Check Payments

The check payment component allows you to let your customers originate checks. The component takes the user through all the required stages:

• Set amount
• Review and submit the check payment

Implementation

Web Components

Add the check-payments element to your app where you'd like it to be presented.

<unit-elements-check-payment
    account-id="1105561"
    customer-token=""
    theme=""
    initial-stage-back-button="true"
    final-stage-done-button="true"
></unit-elements-check-payment>

Inputs:

Name	Type	Required	Description
customer-token	string	Yes	A Unit Customer token. Required Scopes: check-payments check-payments-write
account-id	string	No	Unit account id. The account from which money is being sent.
theme	string	No	A URL that specifies the UI configuration.
language	string	No	A URL that specifies the language configuration.
initial-stage-back-button	boolean string ("true" / "false")	No	An action button at the first stage of the payment flow. Default "false"
final-stage-done-button	boolean string ("true" / "false")	No	An action button at the final stage of the payment flow. Default "false"

React Native SDK

UNCheckPaymentComponentProps props:

Name	Type	Required	Description
accountId	string	YES	Unit account id. The account from which money is being sent.
theme	string	NO	A URL that specifies the UI configuration.
language	string	NO	A URL that specifies the language configuration.
initialStageBackButton	boolean	NO	An action button at the first stage of the payment flow. Default "false"
finalStageDoneButton	boolean	NO	An action button at the final stage of the payment flow. Default "false"

Example:

import { UNCheckPaymentComponent } from 'react-native-unit-components';

export default function YourComponent() {
  return (
    <UNCheckPaymentComponent
      accountId={'1105561'}
      initialStageBackButton={true}
      finalStageDoneButton={true}
    />
  );
}

Android SDK

Component name: UNCheckPaymentComponent

getCheckPaymentComponent parameters:

Name	Type	Required	Description
accountId	String	YES	Unit account id.
additionalSettings	UNCheckPaymentViewSettingsInterface	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	UNCheckPaymentComponentCallbacks	NO	Component's Callbacks sealed class

UNCheckPaymentComponentCallbacks

The callbacks parameter for UNCheckPaymentComponent is of the following type:

typealias UNCheckPaymentComponentCallbacks = (callback: UNCheckPaymentComponentCallback) -> Unit

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

sealed class UNCheckPaymentComponentCallback {
    data object OnInitialStageBackButtonClicked: UNCheckPaymentComponentCallback()
    data object OnFinalStageDoneButtonClicked: UNCheckPaymentComponentCallback()
    data class OnLoad(val onLoadResponse: Result<UNAccount>): UNCheckPaymentComponentCallback()
}

To get the CheckPayment Component fragment, call the getCheckPaymentComponent method of UnitComponentsSdk.manager.ui.views.

Example:

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import co.unit.un_components.api.UnitComponentsSdk
import co.unit.un_components.common.builders.UNCheckPaymentViewSettingsBuilder
import co.unit.un_components.common.enums.UNCheckPaymentComponentCallback
import co.unit.un_components.components.UNCheckPaymentComponent

class CheckPaymentFragment : Fragment() {
    private var unCheckPaymentComponent: UNCheckPaymentComponent? = null

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val fragmentLayout = inflater.inflate(R.layout.FILE_NAME, container, false)

        // Define your callbacks
        val callbacks: (UNCheckPaymentComponentCallback) -> Unit = { callback ->
            when (callback) {
                is UNCheckPaymentComponentCallback.OnInitialStageBackButtonClicked -> handleInitialStageBackButtonClicked()
                is UNCheckPaymentComponentCallback.OnFinalStageDoneButtonClicked -> handleFinalStageDoneButtonClicked()
                is UNCheckPaymentComponentCallback.OnLoad -> handleOnLoad(callback.onLoadResponse)
            }
        }

        // Check if this is a fresh creation or restoration after process death
        unCheckPaymentComponent = if (savedInstanceState == null) {
            // Fresh creation - create new component and add to fragment manager
            UnitComponentsSdk.manager.ui.views.getCheckPaymentComponent(
                accountId = YOUR_ACCOUNT_ID,
                theme = YOUR_THEME_URL,
                language = YOUR_LANGUAGE_URL
            ).also {
                childFragmentManager.beginTransaction()
                    .replace(R.id.CONTAINER_NAME, it as Fragment, FRAGMENT_TAG)
                    .commitNow()
            }
        } else {
            // Restoration after process death - find existing fragment by tag
            childFragmentManager.findFragmentByTag(FRAGMENT_TAG) as? UNCheckPaymentComponent
        }

        // Set callbacks after obtaining the component (required for both fresh and restored)
        unCheckPaymentComponent?.callbacks = callbacks

        return fragmentLayout
    }

    // ...
    // Event handlers
    // ...

    companion object {
        private const val FRAGMENT_TAG = "check_payment_component"
    }
}

The additionalSettings parameter for UNCheckPaymentComponent has this attribute:

UNCheckPaymentViewSettingsInterface

Name	Type	Default Value	Description
initialStageBackButton	Boolean	false	An action button at the first stage of the payment flow.
finalStageDoneButton	Boolean	false	An action button at the final stage of the payment flow.

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

val additionalSettings = UNCheckPaymentViewSettingsBuilder()
    .initialStageBackButton(...)
    .finalStageDoneButton(...)

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