Wire Payment

Implementation

Web Components

note

Wire payments are not enabled by default, and are subject to a minimum payment amount that is determined by the partner bank. See docs about Wires.

Implementation

note

The component is performing MFA on every wire payment, the customer-token that is being used when using the component must have the upgradableScope attribute with the wire-payments-write scope. An example of creating a token:

{
  "data": {
    "type": "customerToken",
    "attributes": {
      "scope": "payments accounts",
      "upgradableScope": "wire-payments-write",
      "verificationToken": "i8FWKLBjXEg3TdeK93G3K9PKLzhbT6CRhn/VKkTsm....",
      "verificationCode": "203130"
    }
  }
}

Add the wire payment element to your app where you'd like it to be presented.

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

Inputs:

Name	Type	Required	Description
account-id	string	Yes	Unit account id. The account from which money is being sent.
is-auto-focus	boolean string ("true" / "false")	No	Auto-focus the money input field once the component is mounted. Default "false"
customer-token	string	Yes	A Unit Customer token. Required Scopes: payments accounts Required Upgradable Scopes: wire-payments-write
fee	string	No	Fee charged for making the wire payment, 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.
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"

Events:

Event Name	Description	Detail
unitPaymentCreated	Occurs when a book payment is created	Wire Payment
unitPaymentInitialStageBackButtonClicked	Occurs when the initial stage back button is clicked
unitPaymentFinalStageDoneButtonClicked	Occurs when the final stage done button is clicked

React Native SDK

note

Wire payments are not enabled by default, and are subject to a minimum payment amount that is determined by the partner bank. See docs about Wires.

note

The component is performing MFA on every wire payment, the customer-token that is being used when using the component must have the upgradableScope attribute with the wire-payments-write scope. An example of creating a token:

{
  "data": {
    "type": "customerToken",
    "attributes": {
      "scope": "payments accounts",
      "upgradableScope": "wire-payments-write",
      "verificationToken": "i8FWKLBjXEg3TdeK93G3K9PKLzhbT6CRhn/VKkTsm....",
      "verificationCode": "203130"
    }
  }
}

UNWirePaymentComponent props:

Name	Type	Required	Description
customerToken	string	YES	A Unit Customer token
accountId	string	NO	Unit account id. The account from which money is being sent.
fee	number	NO	Fee changed for making the wire payment, 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.
isAutoFocus	boolean	NO	Auto-focus the money input field once the component is mounted. Default false
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
onPaymentCreated	(data: UNWirePaymentData) => void	NO	Callback for the created wirePayment.
onInitialStageBackButtonClicked	() => void	NO	Occurs when the initial stage back button is clicked.
onFinalStageDoneButtonClicked	() => void	NO	Occurs when the final stage done button is clicked.
onLoad	(response: UNOnLoadResponse<[UNAccountData]>) => void	NO	Callback for handling onload event, also usable for error handling.

Example:

import React from 'react';
import { UNAccountData, UNWirePaymentComponent } from 'react-native-unit-components';

export default function YourComponent() {
  return (
    <UNWirePaymentComponent
      customerToken={/*Customer token here*/}
      accountId={/*Account Id here*/}
      onPaymentCreated={(data: UNWirePaymentData) => { console.log(data) }}
      onLoad={(response: UNOnLoadResponse<[UNAccountData]>) => { console.log(response) }}
    />
  );
}

Android SDK

note

Wire payments are not enabled by default, and are subject to a minimum payment amount that is determined by the partner bank. See docs about Wires.

note

The component is performing MFA on every wire payment, the customer-token that is being used when using the component must have the upgradableScope attribute with the wire-payments-write scope. An example of creating a token:

{
  "data": {
    "type": "customerToken",
    "attributes": {
      "scope": "payments accounts",
      "upgradableScope": "wire-payments-write",
      "verificationToken": "i8FWKLBjXEg3TdeK93G3K9PKLzhbT6CRhn/VKkTsm....",
      "verificationCode": "203130"
    }
  }
}

Component name: UNWirePaymentComponent

getWirePaymentComponent parameters:

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

UNWirePaymentComponentCallbacks

The callbacks parameter for UNWirePaymentComponent is of the following type:

typealias UNWirePaymentComponentCallbacks = (callback: UNWirePaymentComponentCallback) -> Unit

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

sealed class UNWirePaymentComponentCallback {
    data object OnInitialStageBackButtonClicked: UNWirePaymentComponentCallback()
    data object OnFinalStageDoneButtonClicked: UNWirePaymentComponentCallback()
    data class OnPaymentCreated(val data: UNWirePaymentData): UNWirePaymentComponentCallback()
    data class OnLoad(val onLoadResult: Result<List<UNAccountData>>): UNWirePaymentComponentCallback()
}

To get the WirePayment Component fragment, call the getWirePaymentComponent 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.UNWirePaymentViewSettingsBuilder
import co.unit.un_components.common.enums.UNWirePaymentComponentCallback
import co.unit.un_components.components.UNWirePaymentComponent

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

        private var unWirePaymentComponent: UNWirePaymentComponent? = null

        unWirePaymentView = UnitComponentsSdk.manager.ui.views.getWirePaymentComponent(
            theme = YOUR_THEME_URL,
            language = YOUR_LANGUAGE_URL
        ) { callback ->
            when(callback) {
                is UNWirePaymentComponentCallback.OnInitialStageBackButtonClicked -> handleInitialStageBackButtonClicked()
                is UNWirePaymentComponentCallback.OnFinalStageDoneButtonClicked -> handleFinalStageDoneButtonClicked()
                is UNWirePaymentComponentCallback.OnPaymentCreated -> handlePaymentCreated(callback.data)
                is UNWirePaymentComponentCallback.OnLoad -> handleUnitOnLoad(callback.onLoadResult)
            }
        }

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

The additionalSettings parameter for UNWirePaymentComponent has this attribute:

UNWirePaymentViewSettingsInterface

Name	Type	Default Value	Description
fee	Double	null	Fee charged for making the wire payment, will be presented to the user.
isAutoFocus	Boolean	false	Auto-focus the money input field once the component is mounted.
initialStageBackButton	String	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 UNWirePaymentViewSettingsBuilder() to create an instance of the interface and define your additional settings.

val additionalSettings = UNWirePaymentViewSettingsBuilder()
    .fee(...)
    .initialStageBackButton(...)
    .finalStageDoneButton(...)
    .isAutoFocus(...)

unWirePaymentComponent = UnitComponentsSdk.manager.ui.views.getWirePaymentComponent(
    additionalSettings = additionalSettings,
    theme = YOUR_THEME_URL,
    language = YOUR_LANGUAGE_URL
)

IOS SDK

note

Wire payments are not enabled by default, and are subject to a minimum payment amount that is determined by the partner bank. See docs about Wires.

note

The component is performing MFA on every wire payment, the customer-token that is being used when using the component must have the upgradableScope attribute with the wire-payments-write scope. An example of creating a token:

{
  "data": {
    "type": "customerToken",
    "attributes": {
      "scope": "payments accounts",
      "upgradableScope": "wire-payments-write",
      "verificationToken": "i8FWKLBjXEg3TdeK93G3K9PKLzhbT6CRhn/VKkTsm....",
      "verificationCode": "203130"
    }
  }
}

Component name: UNWirePaymentComponent

Configuration parameters:

Name	Type	Required	Description
accountId	String	NO	Unit account id. The account from which money is being sent.
fee	Double	NO	Fee charged for making the wire payment, will be presented to the user.
additionalSettings	UNWirePaymentViewSettingsProtocol	NO	Advanced optional settings.
callbacks	UNWirePaymentComponentCallbacks	NO	Callbacks to interact with the Wire Payment 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 UNWirePaymentComponent is of the following type:

public typealias UNWirePaymentComponentCallbacks = (_ callback: UNWirePaymentComponentCallback) -> Void

The UNWirePaymentComponentCallback is an enum that has the following callbacks that you can receive from a Wire Payment component:

public enum UNWirePaymentComponentCallback {
    case unitOnLoad(result: Result<[UNAccountData], UNError>)
    case paymentCreated(data: UNWirePaymentData)
    case initialStageBackButtonClicked
    case finalStageDoneButtonClicked
}

To get the Wire Payment Component view, call the getWirePaymentComponent method of UnitSDK.manager.ui.views.

Example:

class WirePaymentScreen: UIViewController {
    fileprivate lazy var wirePaymentComponent: UIView = {
        let unViews = UnitSDK.manager.ui.views

        let wirePaymentComponent = unViews.getWirePaymentComponent() { callback in
            switch callback {
            case let .unitOnLoad(result):
                print(result)
            case let .paymentCreated(data):
                print(data)
            case .initialStageBackButtonClicked:
                print("initialStageBackButtonClicked")
                self.navigationController?.popViewController(animated: true)
            case .finalStageDoneButtonClicked:
                print("finalStageDoneButtonClicked")
                self.navigationController?.popViewController(animated: true)
            }
        }
        return wirePaymentComponent
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        // add the WirePayment component as a subview - using SnapKit for example
        self.view.addSubview(programDetailsComponent)
        wirePaymentComponent.snp.makeConstraints { make in
            make.top.equalTo(view.safeAreaLayoutGuide.snp.top)
            make.bottom.equalTo(view.safeAreaLayoutGuide.snp.bottom)
            make.leading.trailing.equalToSuperview()
        }
    }
}

The additionalSettings parameter for UNWirePaymentComponent is of the following type:

UNWirePaymentViewSettingsProtocol:

Name	Type	Default Value	Description
isAutoFocus	Bool	false	Auto-focus the money input field once the component is mounted.
initialStageBackButton	Bool	false	An action button at the first stage of the payment flow.
finalStageDoneButton	Bool	false	An action button at the final stage of the payment flow.

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

Example:

let additionalSettings = UNWirePaymentViewSettingsBuilder()
            .finalStageDoneButton(true)
            .initialStageBackButton(true)

let unViews = UnitSDK.manager.ui.views
let wirePaymentComponent = unViews.getWirePaymentComponent(additionalSettings: additionalSettings)