ACH Debit

The ACH Debit payment component allows to pull funds from an external bank account to Unit account via ACH.

Note, that this component is using Plaid to connect to your users' financial accounts.

Customer experience:

Add a new counterparty via Plaid Link to pull funds from
Save the counterparty in the account counterparties list
Pull funds from a counterparty from a list of saved counterparties
Specify the amount to be sent
Write a description (that will show up on the activity screens and/or statements)
Confirm payment

Web Components

Add the ACH Debit Payment Element to your app where you'd like it to be presented.

The ACH Debit component is using Plaid to connect to the user's bank account.

In order to use this component, you need to have a Plaid account and provide your Plaid credentials via Unit Sandbox Dashboard and Unit Production Dashboard.

The Plaid interface can be displayed in any of Plaid's supported languages by using the language config's "local" attribute (Default: "en").

<unit-elements-ach-debit-payment
    theme=""
    fee="1.5"
    customer-token=""
    account-id="1105561"
    is-auto-focus="true"
    initial-stage-back-button="true"
    final-stage-done-button="true"
></unit-elements-ach-debit-payment>

Inputs:

Name	Type	Required	Description
customer-token	string	Yes	A Unit Customer token. Required Scopes: `customers accounts payments payments-write counterparties counterparties-write`
account-id	string	No	Unit account id. The account from which money is being sent.
fee	string ("1.5")	No	Bill your counterparty for his activity
is-auto-focus	boolean string ("true" / "false")	No	Auto-focus the 'add new recipient' button once the component is mounted. Default "false"
theme	string	No	A URL that specifies the UI configuration.
language	string	No	A URL that specifies the language configuration.
same-day	boolean string ("true" / "false")	No	Enables Same Day ACH
plaid-account-filters	string "checking, savings"	No	Account subtypes to display in Link. If not specified, only checking subtype will be shown.
plaid-link-customization-name	string	No	The name of the Link customization from the Plaid Dashboard to be applied to Link. If not specified, the default customization will be used. When using a Link customization, the language in the customization must match the language selected via the language parameter.
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 ACH payment is created	ACH payment to inline counterparty
unitPaymentInitialStageBackButtonClicked	Occurs when the initial stage back button is clicked
unitPaymentFinalStageDoneButtonClicked	Occurs when the final stage done button is clicked

React Native SDK

Prerequirements

Make sure to set the redirect-uri as explained below.

Installation of the SDK

In your project directory, run:

With npm:

npm install --save react-native-plaid-link-sdk

With yarn:

yarn add react-native-plaid-link-sdk

Installation for iOS

Add Plaid to your project’s Podfile as follows (likely located at ios/Podfile).

pod 'Plaid', '~> <insert latest version>'

Then install your CocoaPods dependencies:

(cd ios && pod install)

Installation for Android

By doing this Plaid will be able to redirect the user back to your app.

Sign in to the Plaid Dashboard and go to the Team Settings -> API page.
Next to Allowed Android Package Names click Configure then Add New Android Package Name.
Enter your package name, for example com.plaid.example.
Click Save Changes.

UNACHDebitComponent 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.
theme	string	NO	A URL that specifies the UI configuration.
language	string	NO	A URL that specifies the language configuration.
plaidLinkCustomizationName	string	NO	The name of the Link customization from the Plaid Dashboard to be applied to Link. If not specified, the default customization will be used. When using a Link customization, the language in the customization must match the language selected via the language parameter.
plaidAccountFilters	`UNPlaidAccountFilter[]`	NO	Account subtypes to display in Link based on the provided list. The keys for UNPlaidAccountFilter are: `checking` and `savings`. If not specified, only checking subtype will be shown.
fee	number	NO	Bill your counterparty for his activity.
isAutoFocus	boolean	NO	Auto-focus the 'add new recipient' button once the component is mounted. Default "false"
sameDay	boolean	NO	Enables Same Day ACH
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`
onInitialStageBackButtonClicked	`() => void`	NO	Occurs when the initial stage back button is clicked.
onFinalStageDoneButtonClicked	`() => void`	NO	Occurs when the final stage done button is clicked.
onPaymentCreated	`(data: UNACHData) => void`	NO	Callback for ACH payment created
onLoad	`(response: UNOnLoadResponse<UNACHOnLoadData>) => void`	NO	Callback for a loaded component

Example:

import React from 'react';
import { UNACHDebitComponent, UNACHData, UNACHOnLoadData } from 'react-native-unit-components';

export default function YourComponent() {
  return (
    <UNACHDebitComponent
      customerToken={/*Customer token here*/}
      accountId={'1105561'}
      onPaymentCreated={(payment: UNACHData) => { console.log(payment) }}
      onLoad={(response: UNOnLoadResponse<UNACHOnLoadData>) => { console.log(response) }}
    />
  );
}

Android SDK

Prerequirements

This component is using the Plaid API to connect your users' financial accounts using the Plaid integration. You must have a Plaid account and provide your Plaid credentials in the Unit Sandbox Dashboard and Unit Production Dashboard. Make sure to set the redirect-uri as explained below. Finally, you need to add Plaid dependency to your application (Documentation for installation).

Enable camera support (for apps using Identity Verification only)

If your app uses Identity Verification please follow these instructions

Register your app id in Plaid's dashboard

By doing this Plaid will be able to redirect the user back to your app.

Sign in to the Plaid Dashboard and go to the Team Settings -> API page.
Next to Allowed Android Package Names click Configure then Add New Android Package Name.
Enter your package name, for example com.plaid.example.
Click Save Changes.

Component name: UNACHDebitComponent

getACHDebitComponent parameters:

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

UNACHDebitComponentCallbacks

The callbacks parameter for UNACHDebitComponent is of the following type:

typealias UNACHDebitComponentCallbacks = (callback: UNACHDebitComponentCallback) -> Unit

The UNACHDebitComponentCallback is sealed class that has the following callbacks that you can receive from an ACHDebit component:

sealed class UNACHDebitComponentCallback {
    data object OnInitialStageBackButtonClicked: UNACHDebitComponentCallback()
    data object OnFinalStageDoneButtonClicked: UNACHDebitComponentCallback()
    data class OnPaymentCreated(val data: UNACHData): UNACHDebitComponentCallback()
    data class OnLoad(val onLoadResponse: Result<UNACHDebitOnLoadResponse>): UNACHDebitComponentCallback()
}

To get the ACHDebit Component fragment, call the getACHDebitComponent 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.UNACHDebitViewSettingsBuilder
import co.unit.un_components.common.enums.UNACHDebitComponentCallback
import co.unit.un_components.components.UNACHDebitComponent

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

        private var unACHDebitComponent: UNACHDebitComponent? = null

        unACHDebitComponent = UnitComponentsSdk.manager.ui.views.getACHDebitComponent(
            accountId = YOUR_ACCOUNT_ID,
            theme = YOUR_THEME_URL,
            language = YOUR_LANGUAGE_URL
        ) { callback ->
            when(callback) {
                is UNACHDebitComponentCallback.OnInitialStageBackButtonClicked -> handleInitialStageBackButtonClicked()
                is UNACHDebitComponentCallback.OnFinalStageDoneButtonClicked ->handleFinalStageDoneButtonClicked()
                is UNACHDebitComponentCallback.OnPaymentCreated -> handlePaymentCreated(callback.data)
                is UNACHDebitComponentCallback.OnLoad -> handleUnitOnLoad(callback.onLoadResponse)
            }
        }

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

The additionalSettings parameter for UNACHDebitComponent has this attribute:

UNACHDebitViewSettingsInterface

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.
isSameDay	Boolean	false	Enables Same Day ACH
isAutoFocus	Boolean	false	Auto-focus the 'add new recipient' button once the component is mounted
plaidLinkCustomizationName	String	null	The name of the Link customization from the Plaid Dashboard to be applied to Link. If not specified, the default customization will be used. When using a Link customization, the language in the customization must match the language selected via the language parameter.
fee	Double	null	Bill your counterparty for his activity.
plaidAccountFilters	`List<UNPlaidAccountFilter>`	null	Account subtypes to display in Link based on the provided list `[.Checking, .Savings]`. If not specified, only checking subtype will be shown.

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

val additionalSettings = UNACHDebitViewSettingsBuilder()
    .initialStageBackButton(...)
    .finalStageDoneButton(...)
    .isSameDay(...)
    .isAutoFocus(...)
    .plaidLinkCustomizationName(...)
    .fee(...)
    .plaidAccountFilters(...)

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

IOS SDK

Prerequirements:

Enable camera support (for apps using Identity Verification only)

If your app uses Identity Verification please follow these instructions

Component name: UNACHDebitComponent

Configuration parameters:

Name	Type	Required	Description
accountId	String	NO	Unit account id. The account from which money is being sent.
additionalSettings	UNACHDebitViewSettingsProtocol	NO	Advanced optional settings.
callbacks	UNACHDebitComponentCallbacks	NO	Callbacks to interact with the ACH Debit 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 UNACHDebitComponent is of the following type:

public typealias UNACHDebitComponentCallbacks = (_ callback: UNACHDebitComponentCallback) -> Void

The UNACHDebitComponentCallback is an enum that has the following callbacks that you can receive from an ACH Debit component:

public enum UNACHDebitComponentCallback {
    case onPaymentCreated(data: UNACHData)
    case unitOnLoad(result: Result<UNACHDebitOnLoadResponse, UNError>)
    case onInitialStageBackButtonClicked
    case onFinalStageDoneButtonClicked
}

To get the ACH Debit Component call the getACHDebitComponent method of UnitSDK.manager.ui.views.

Example:

import UIKit
import UNComponents
import SnapKit

class ACHDebitScreen: UIViewController {

    fileprivate lazy var achDebitComponent: UNACHDebitView = {
        let unViews = UnitSDK.manager.ui.views

        let achDebitComponent = unViews.getACHDebitComponent(accountId: "424242"){ callback in
            switch callback {
            case .onInitialStageBackButtonClicked:
                print("Back button clicked on the initial stage")
            case .onFinalStageDoneButtonClicked:
                print("Done button clicked on the final stage")
            case .onPaymentCreated(let data):
                print("ACH Debit - onPaymentCreated: \(data)")
            case .unitOnLoad(let result):
                switch result {
                case .success(let ACHDebitResponse):
                    print("Successfully loaded ACHDebit Component. Data: \(ACHDebitResponse)")
                case .failure(let error):
                    print("Failed to load ACHDebit component. Error details: \(error)")
                }
            }
        }
        return achDebitComponent
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        // add the ach Debit component as a subview - using SnapKit for example
        view.addSubview(achDebitComponent)
        achDebitComponent.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 UNACHDebitComponent is of the following type:

UNACHDebitViewSettingsProtocol:

Name	Type	Default Value	Description
fee	Double	0	Bill your counterparty for his activity
isAutoFocus	Bool	false	Auto-focus the 'add new recipient' button once the component is mounted
sameDay	Bool	false	Enables Same Day ACH
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.
plaidLinkCustomizationName	String		The name of the Link customization from the Plaid Dashboard to be applied to Link. If not specified, the default customization will be used. When using a Link customization, the language in the customization must match the language selected via the language parameter.
plaidAccountFilters	`[UNPlaidAccount]`		Account subtypes to display in Link based on the provided list `[.Checking, .Savings]`. If not specified, only checking subtype will be shown.

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

Example:

let additionalSettings = UNACHDebitViewSettingsBuilder()
    .fee(1.5)
    .isAutoFocus(true)
    .sameDay(true)
    .initialStageBackButton(true)
    .finalStageDoneButton(true)

let unViews = UnitSDK.manager.ui.views
let achDebitComponent = unViews.getACHDebitComponent(accountId: "424242", additionalSettings: additionalSettings)

Implementation

Web Components​

Inputs:​

Events:​

React Native SDK​

Prerequirements​

Installation of the SDK​

Installation for iOS​

Installation for Android​

UNACHDebitComponent props:​

Example:​

Android SDK​

Prerequirements​

Enable camera support (for apps using Identity Verification only)​

Register your app id in Plaid's dashboard​

Component name: UNACHDebitComponent​

getACHDebitComponent parameters:​

UNACHDebitComponentCallbacks​

Example:​

UNACHDebitViewSettingsInterface​

IOS SDK​

Prerequirements:​

Enable camera support (for apps using Identity Verification only)​

Component name: UNACHDebitComponent​

Configuration parameters:​

Example:​

UNACHDebitViewSettingsProtocol:​

Example:​

Web Components

Inputs:

Events:

React Native SDK

Prerequirements

Installation of the SDK

Installation for iOS

Installation for Android

UNACHDebitComponent props:

Example:

Android SDK

Prerequirements

Enable camera support (for apps using Identity Verification only)

Register your app id in Plaid's dashboard

Component name: UNACHDebitComponent

getACHDebitComponent parameters:

UNACHDebitComponentCallbacks

Example:

UNACHDebitViewSettingsInterface

IOS SDK

Prerequirements:

Enable camera support (for apps using Identity Verification only)

Component name: UNACHDebitComponent

Configuration parameters:

Example:

UNACHDebitViewSettingsProtocol:

Example: