Create Card

Create Card Component TEST MODE

Mobile

Desktop

Note: The preview is in Sandbox, meaning this is not a real card.

Implementation

Web Components

Add the Create Card element to your app where you'd like it to be presented.

<unit-elements-create-card
    customer-token=""
    theme=""
    language=""
    card-types="physical,virtual"
    hide-sidebar="false"
    virtual-card-fee="1.5"
    physical-card-fee="1.5"
></unit-elements-create-card>

Inputs:

Name	Type	Required	Description
customer-token	string	Yes	A Unit Customer token. Required Scopes: accounts cards customer-token-write customers Required Upgradable Scopes: cards-write
account-id	string	No	Unit account id. The card will be created under this account. If no account is specified, a list of the customer’s accounts will be displayed.
theme	string	No	A URL that specifies the UI configuration.
language	string	No	A URL that specifies the language configuration.
hide-sidebar	boolean string ("true" / "false")	No	Hide the component sidebar in case value is 'true'.
card-types	string	No	A list of comma separated card types, will limit the creation to specific card types physical,virtual, physical or virtual.
virtual-card-fee	string ("1.5")	No	Fee charged for issuing a virtual card. Will be added to the deposit product card issuing fee and will be presented to the user. Requires bank approval.
physical-card-fee	string ("1.5")	No	Fee charged for issuing a physical card. Will be added to the deposit product card issuing fee and will be presented to the user. Requires bank approval.

Events:

Event Name	Description	Detail
unitCardCreated	Occurs when the card is created	[Promise] Card
unitOnLoad	Occurs when a component is loaded	CreateCardComponentResources

React Native SDK

UNCreateCardComponent props:

Name	Type	Required	Description
accountId	string	NO	Unit account id. The account from which money is being sent.
cardTypes	UNCreateCardType[]	NO	A list of card types available to create based on the provided list [UNCreateCardType.Virtual, UNCreateCardType.Physical]
virtualCardFee	number	NO	Fee charged for creating virtual card, will be presented to the user.
physicalCardFee	number	NO	Fee charged for creating physical card, will be presented to the user.
theme	string	NO	A URL that specifies the UI configuration.
language	string	NO	A URL that specifies the language configuration.
onCardCreated	(card: UNCard) => void	NO	Occurs when a card is successfully created
onLoad	(response: UNComponentsOnLoadResponse<UNCreateCardComponentResources>) => void	NO	Callback for handling onload event, also usable for error handling.

Example:

import React from 'react';
import { UNCreateCardComponent, UNCard, UNCreateCardComponentResources, UNComponentsOnLoadResponse, UNCreateCardType} from 'react-native-unit-components';

export default function YourComponent() {
  return (
    <UNCreateCardComponent
      accountId={'YOUR_ACCOUNT_ID'}
      cardTypes={[UNCreateCardType.Virtual, UNCreateCardType.Physical]}
      virtualCardFee={1.5}
      physicalCardFee={1.5}
      onCardCreated={(card: UNCard) => { console.log(card) }}
      onLoad={(response: UNComponentsOnLoadResponse<UNCreateCardComponentResources>) => { console.log(response) }}
    />
  );
}

Android SDK

Component name: UNCreateCardComponent

getCreateCardComponent parameters:

Name	Type	Required	Description
accountId	String	YES	Unit account id.
additionalSettings	UNCreateCardViewSettingsInterface	NO	Additional settings unique for this component
theme	String	NO	A URL that specifies the UI configuration.
language	String	NO	A URL that specifies the language configuration.
callbacks	UNCreateCardComponentCallbacks	NO	Component's Callbacks sealed class

UNCreateCardComponentCallbacks

The callbacks parameter for UNCreateCardComponent is of the following type:

typealias UNCreateCardComponentCallbacks = (callback: UNCreateCardComponentCallback) -> Unit

The UNCreateCardComponentCallback is sealed class that has the following callbacks that you can receive from a CreateCard component:

sealed class UNCreateCardComponentCallback {
    data class OnCardCreated(val card: UNCard): UNCreateCardComponentCallback()
    data class OnLoad(val onLoadResponse: Result<UNCreateCardComponentResources>): UNCreateCardComponentCallback()
}

To get the CreateCard Component fragment, call the getCreateCardComponent method of UnitComponentsSdk.manager.ui.views.

Example:

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.LinearLayout
import androidx.fragment.app.Fragment
import co.unit.un_components.api.UnitComponentsSdk
import co.unit.un_components.common.builders.UNCreateCardViewSettingsBuilder
import co.unit.un_components.common.enums.UNCreateCardComponentCallback
import co.unit.un_components.components.UNCreateCardView

class CreateCardFragment : Fragment(){
    override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {

        private var unCreateCardComponent: UNCreateCardComponent? = null

        unCreateCardComponent = UnitComponentsSdk.manager.ui.views.getCreateCardComponent(
            accountId = YOUR_ACCOUNT_ID,
            theme = YOUR_THEME_URL,
            language = YOUR_LANGUAGE_URL
        ) { callback ->
            when (callback) {
                is UNCreateCardComponentCallback.OnLoad -> handleUnitOnLoad(callback.onLoadResponse)
                is UNCreateCardComponentCallback.OnCardCreated -> handleCardCreated(callback.card)
            }
        }

        val fragmentLayout = inflater.inflate(R.layout.FILE_NAME, container, false)
        childFragmentManager.beginTransaction()
            .replace(R.id.CONTAINER_NAME, unCreateCardComponent as Fragment)
            .commitNow()
        return fragmentLayout
    }
    // ...
    // Event handlers
    // ...
}

The additionalSettings parameter for UNCreateCardComponent has this attribute:

UNCreateCardViewSettingsInterface

Name	Type	Default Value	Description
cardTypes	List<UNCreateCardType>?	null	A list of card types available to create based on the provided list [.virtual, .physical]
virtualCardFee	Double?	null	Fee charged for creating virtual card, will be presented to the user.
physicalCardFee	Double?	null	Fee charged for creating physical card, will be presented to the user.

You can use UNCreateCardViewSettingsBuilder() to create an instance of the interface and define your additional settings.

val additionalSettings = UNCreateCardViewSettingsBuilder()
    .cardTypes(...)
    .virtualCardFee(...)
    .physicalCardFee(...)

unCreateCardComponent = UnitComponentsSdk.manager.ui.views.getCreateCardComponent(
    accountId = YOUR_ACCOUNT_ID,
    additionalSettings = additionalSettings,
    theme = YOUR_THEME_URL,
    language = YOUR_LANGUAGE_URL
)

IOS SDK

Component name: UNCreateCardComponent

Configuration parameters:

Name	Type	Required	Description
accountId	String	NO	Unit account id.
additionalSettings	UNCreateCardViewSettingsProtocol	NO	Advanced optional settings.
callbacks	UNCreateCardComponentCallbacks	NO	Callbacks to interact with the Create Card component.
theme	String	NO	A URL that specifies the UI configuration.
language	String	NO	A URL that specifies the language configuration.

The callbacks parameter for UNCreateCardComponentCallbacks is of the following type:

public typealias UNCreateCardComponentCallbacks = (_ callback: UNCreateCardComponentCallback) -> Void

The UNCreateCardComponentCallback is an enum that has the following callbacks that you can receive from a Create Card component:

public enum UNCreateCardComponentCallback {
    case unitOnLoad(result: Result<UNCreateCardComponentResources, UNComponentsError>)
    case cardCreated(data: UNCard)
}

To get the Create Card Component view call the getCreateCardComponent method of UnitComponentsSDK.manager.ui.views.

Example:

import UIKit
import UNComponents
import SnapKit

class CreateCardScreen: UIViewController {

    fileprivate lazy var createCardComponent: UNCreateCardView = {
        let unViews = UnitComponentsSDK.manager.ui.views

        let createCardComponent = unViews.getCreateCardComponent(accountId: "424242") { callback in
            switch callback {
            case .unitOnLoad(let data):
                print("CreateCard Component is loaded.")
            }
        }
        return createCardComponent
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        view.addSubview(createCardComponent)
        createCardComponent.snp.makeConstraints { make in
            make.top.equalTo(view.safeAreaLayoutGuide.snp.top)
            make.bottom.equalTo(view.safeAreaLayoutGuide.snp.bottom)
            make.leading.equalTo(view.safeAreaLayoutGuide.snp.leading)
            make.trailing.equalTo(view.safeAreaLayoutGuide.snp.trailing)
        }
    }
}

The additionalSettings parameter for UNCreateCardComponent is of the following type:

UNCreateCardViewSettingsProtocol:

Name	Type	Default Value	Description
cardTypes	[UNCreateCardType]?	null	A list of card types available to create based on the provided list [.virtual, .physical]
virtualCardFee	Double?	null	Fee charged for creating virtual card, will be presented to the user.
physicalCardFee	Double?	null	Fee charged for creating physical card, will be presented to the user.

You can use UNCreateCardViewSettingsBuilder to create an instance of the protocol and define your additional settings.

Example:

let additionalSettings = UNCreateCardViewSettingsBuilder()
    .cardTypes([.virtual])
    .virtualCardFee(1)
    .physicalCardFee(2)

let unViews = UnitComponentsSDK.manager.ui.views
let createCardComponent = unViews.unViews.getCreateCardComponent(accountId: "424242", additionalSettings: additionalSettings)