ACH Credit

The ACH Credit payment component allows you to push funds from a Unit account to another via ACH.

Customer experience:

Add a new counterparty to send funds to
Save the counterparty in the account counterparties list
Send funds to 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

ACH Credit Payment Component TEST MODE

Mobile

Desktop

Web Components

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

<unit-elements-ach-credit-payment
    theme=""
    fee="1.5"
    customer-token=""
    account-id="1105561"
    is-auto-focus="true"
    with-plaid="false"
    initial-stage-back-button="true"
    final-stage-done-button="true"
></unit-elements-ach-credit-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
with-plaid	boolean string ("true" / "false")	No	Enable Plaid integration to connect your users’ financial accounts using the Plaid API. To utilize this integration, you will need to have a Plaid account and provide your Plaid credentials through the Unit Sandbox Dashboard and Unit Production Dashboard. Default "false".
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 linked counterparty 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:

If you wish to use plaid in this component, please follow the pre-requisites of ACHDebitComponent .

UNACHCreditComponent 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.
withPlaid	boolean	NO	Use the Plaid API to connect your users' financial accounts. To utilize this integration, follow the prerequirements and set the value as `true`. Default `false`.
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 { UNACHCreditComponent, UNACHData, UNACHOnLoadData } from 'react-native-unit-components';

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

Android SDK

Prerequirements:

If you wish to use plaid in this component, please follow the pre-requisites of ACHDebitComponent.

Component name: UNACHCreditComponent

getACHCreditComponent parameters:

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

UNACHCreditComponentCallbacks

The callbacks parameter for UNACHCreditComponent is of the following type:

typealias UNACHCreditComponentCallbacks = (callback: UNACHCreditComponentCallback) -> Unit

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

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

To get the ACHCredit Component fragment, call the getACHCreditComponent 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.UNACHCreditViewSettingsBuilder
import co.unit.un_components.common.enums.UNACHCreditComponentCallback
import co.unit.un_components.components.UNACHCreditComponent

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

        private var unACHCreditComponent: UNACHCreditComponent? = null

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

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

The additionalSettings parameter for UNACHCreditComponent has this attribute:

UNACHCreditViewSettingsInterface

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
withPlaid	Boolean	false	Using the Plaid API to connect your users' financial accounts. Default `false`
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 UNACHCreditViewSettingsBuilder() to create an instance of the interface and define your additional settings.

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

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

IOS SDK

Component name: UNACHCreditComponent

Configuration parameters:

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

public typealias UNACHCreditComponentCallbacks = (_ callback: UNACHCreditComponentCallback) -> Void

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

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

To get the ACH Credit Component call the getACHCreditComponent method of UnitSDK.manager.ui.views.

Example:

import UIKit
import UNComponents
import SnapKit

class ACHCreditScreen: UIViewController {

    fileprivate lazy var achCreditComponent: UNACHCreditView = {
        let unViews = UnitSDK.manager.ui.views

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

    override func viewDidLoad() {
        super.viewDidLoad()

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

UNACHCreditViewSettingsProtocol:

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
withPlaid	Bool	false	Using the Plaid API to connect your users' financial accounts. Default `false`
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	`[UNPlaidAccountFilter]`		Account subtypes to display in Link based on the provided list `[.checking, .savings]`. If not specified, only checking subtype will be shown.

Plaid integration:

If you wish to use the Plaid API to connect your users' financial accounts using the Plaid integration. In order to utilize this 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

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

Example:

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

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

Implementation

Web Components​

Inputs:​

Events:​

React Native SDK​

Prerequirements:​

UNACHCreditComponent props:​

Example:​

Android SDK​

Prerequirements:​

Component name: UNACHCreditComponent​

getACHCreditComponent parameters:​

UNACHCreditComponentCallbacks​

Example:​

UNACHCreditViewSettingsInterface​

IOS SDK​

Component name: UNACHCreditComponent​

Configuration parameters:​

Example:​

UNACHCreditViewSettingsProtocol:​

Plaid integration:​

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

Example:​

Web Components

Inputs:

Events:

React Native SDK

Prerequirements:

UNACHCreditComponent props:

Example:

Android SDK

Prerequirements:

Component name: UNACHCreditComponent

getACHCreditComponent parameters:

UNACHCreditComponentCallbacks

Example:

UNACHCreditViewSettingsInterface

IOS SDK

Component name: UNACHCreditComponent

Configuration parameters:

Example:

UNACHCreditViewSettingsProtocol:

Plaid integration:

Enable camera support (for apps using Identity Verification only)

Example: