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

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 UNAccountComponent 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
)