Skip to main content

React Native SDK

Installation

Add the react-native-unit-components and the react-native-webview dependencies to your project:

Using npm:

$ npm install --save react-native-unit-components react-native-webview

Using yarn:

$ yarn add react-native-unit-components react-native-webview

Usage

Initialize Unit SDK

Call UnitSDK.init in your root component with the required environment and your source. By doing so you will also helps us improve the app performance.

The UNEnvironment enum should be used.

enum UNEnvironment {
sandbox,
production
}

Input:

NameTypeRequiredDescription
envUNEnvironmentYESUnit environment.
themestringNOA URL that specifies the UI configuration.
languagestringNOA URL that specifies the language configuration.
fontsUNFontsNOUNFonts object that specifies your custom fonts.
webVersioningStrategyUNWebVersioningStrategyNOWeb SDK version management strategy.

Example:

import React, { useEffect } from 'react';
import { UnitSDK, UNEnvironment } from 'react-native-unit-components';

const THEME = 'A URL that specifies the UI configuration';
const LANGUAGE = 'A URL that specifies the language configuration.';

export default function YourRootComponent() {
useEffect(() => {
UnitSDK.init(UNEnvironment.production, THEME, LANGUAGE, CUSTOM_FONTS);
}, [])
}

Setup Fonts:

The UNFonts object is a dictionary-like structure where each key is a font family, and each font family can have multiple variants, currently distinguished by weight.

File Naming Convention

Your font file must adhere to the naming convention: <family-name>-<font-weight>. This standardization is critical for the SDK to correctly identify and utilize the fonts.

Integrating Custom Fonts into a React Native Project:

Add and link your font files to your React Native project, following the normal procedures for asset inclusion. You can follow these step-by-step instructions:

1. Adding Font Files

First, add your custom font files to a directory within your project. Typically, this would be an assets/fonts/ directory.

2. Configure Asset Inclusion

  • Create Config File: If it does not already exist, create a configuration file at the root directory of your project. Name this file react-native.config.js.

  • Add Configuration: Open the react-native.config.js file and add the following lines within module.exports:

    module.exports = {
    // Your existing configuration here

    assets: ['./assets/fonts/'],
    };

3. Linking the Assets

Now, you need to link these assets to your project. This process will vary based on your React Native version.

  • For React Native Version <= 0.69 Run one of the following commands:

    npx react-native link

    or

    yarn react-native link
  • For React Native Version > 0.69 Run one of the following commands:

    npx react-native-asset

4. Verification

  • iOS: Open your info.plist file and verify that the font files have been added under the key UIAppFonts.
  • Android: Navigate to your Android assets directory and ensure that a new font file has been created.
Define the UNFonts Object

After integrating your fonts, the next step is to define the UNFonts object. Below is the schema for UNFonts and its nested types:

export type UNFonts = {
[fontFamily: string]: UNFontData[];
}

export type UNFontData = {
fontWeight: FontWeight;
sources: UNFontSource[];
}

export type UNFontSource = {
fileName: string;
assetDirRelativePath: string;
format?: string; // Optional, might be effective when fallbacks are used
}

Example

Here's a simple example to illustrate how you might define a UNFonts object:

const CustomFonts: UNFonts = {
"Helvetica": [
{
fontWeight: FontWeight.Regular,
sources: [{ fileName: "Helvetica-Regular.ttf", assetDirRelativePath: "fonts/"}]
},
{
fontWeight: FontWeight.Bold,
sources: [{ fileName: "Helvetica-Bold.ttf", assetDirRelativePath: "fonts/" }]
}
],
"Arial": [
{
fontWeight: FontWeight.Regular,
sources: [{ fileName: "Arial-Regular.ttf", assetDirRelativePath: "fonts/"}]
}
]
};

Web SDK Versioning Strategy Guide

It's essential to understand that this SDK utilizes the web SDK views for certain components.

To give you optimal flexibility in managing the Web SDK versions, we've devised a strategy that allows you to either keep your SDK up-to-date or fixate on a particular version. To set your preferred versioning approach, using the type UNWebVersioningStrategy. Below are the options you can select from:

  1. Exact Versioning -

      type: UNVersioningStrategyType.exact;
    major: number;
    minor: number;
    patch: number;
    • This method allows you to lock onto a specific version that suits your needs.
  2. Up to Next Minor -

      type: UNVersioningStrategyType.upToNextMinor;
    major: number;
    minor: number;
    • This is the default and recommended approach. While it keeps your SDK updated with minor patches, a manual update is needed for minor version changes.
  3. Up to Next Major -

      type: UNVersioningStrategyType.upToNextMajor;
    major: number;
    • With this strategy, your SDK will automatically update until there's a major version change.
  4. Latest -

      type: UNVersioningStrategyType.latest;
    • This strategy will always keep your SDK updated with the latest version.

For a comprehensive understanding, refer to our Web SDK - Versioning Guide.

const myWebSdkStrategy: UNWebVersioningStrategy = {
type: UNVersioningStrategyType.upToNextMinor,
major: 1,
minor: 2,
};

For the latest RN SDK, the webVersioningStrategy is upToNextMinor(major: 1, minor: 6).

Bottom Sheet Component

The UNBottomSheetComponent is a View that our SDK controls in order to show menus and forms in your application. It is mandatory to have one UNBottomSheetComponent when our components are visible.

The UNBottomSheetComponent has an absolute position and should be able to take the full width and the height of the screen. We recommend to place the UNBottomSheetComponent in your root component of your application.

The structure of your root component might look as follows:

import React, { useEffect } from 'react';
import { UNBottomSheetComponent } from 'react-native-unit-components';

export default function YourRootComponent() {
return (
<>
<YourComponents />
<UNBottomSheetComponent />
</>
);
}

Card Component

UNCardComponent props:
NameTypeRequiredDescription
customerTokenstringYESA Unit Customer token.
cardIdstringYESUnit card id.
themestringNOA URL that specifies the UI configuration.
languagestringNOA URL that specifies the language configuration.
menuItemsUNCardMenuItem[]NOA list of actions, The menu dynamically adjusts based on the provided list. The keys for UNCardMenuItem are: freeze, addToWallet, managePin, replace, report, and close.
hideActionsMenuButtonbooleanNOHide menu button in case value is true
hideCardTitlebooleanNOHide card title in case value is true
hideSensitiveDataButtonbooleanNOHide sensitive data button in case value is true
learnMoreUrlstringNOA “Learn more” URL on the report lost/close card info note.
onStatusChanged(card: UNCardData) => voidNOCallback for card status changes.
onLoad(response: UNOnLoadResponse<UNCardData>) => voidNOCallback for a loaded component
onCardActivated(card: UNCardData) => voidNOCallback for card activated.
pushProvisioningModuletypeof NativeModulesNOA Native Module that implements Visa's push provisioning
Example:
import React from 'react';
import { UNCardComponent, UNCardData } from 'react-native-unit-components';
import { NativeModules } from 'react-native';
const { PushProvisioningModule } = NativeModules;


export default function YourComponent() {
return (
<UNCardComponent
cardId={'632197'}
customerToken={/*Customer token here*/}
onStatusChanged={(card: UNCardData) => { console.log(card) }}
onCardActivated={(card: UNCardData) => { console.log(card) }}
pushProvisioningModule={PushProvisioningModule}
onLoad={(response: UNOnLoadResponse<UNCardData>) => { console.log(response) }}
/>
);
}
Incoming Events:
  • In some cases, the default menu button won't fit into the design of an application. By using the openActionsMenu() method, it's possible to open the card actions bottom sheet from a custom button.

    Important Note: one can use the openActionsMenu() only after UNCardComponent is loaded. (can be verified by onLoad callback)

Example:

import { UNCardComponent, CardRef } from 'react-native-unit-components';

...

const cardRef = useRef<CardRef>(null);

...

const openActionsMenu = () => {
cardRef.current?.openActionsMenu();
};

...

<UNCardComponent
ref={cardRef}
cardId={"4242"}
customerToken={''}
/>

  • It's also possible to create your own menu and call card actions from it. Use openAction(action: UNCardMenuAction) method and send inside an action you want to perform. Use API Docs in order to understand which actions could be applied for any particular card statuses.

    Example:


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

// .......

const openAction = (action: UNCardMenuAction) => {
cardRef.current?.openAction(action);
};

// .......

  • You can choose to implement your own show / hide card sensitive data button. In this case use 'showSensitiveData()' method to show sensitive data and 'hideSensitiveData()' method to hide it.

    Example:



// .......

const showSensitiveData = () => {
cardRef.current?.showSensitiveData();
};
const hideSensitiveData = () => {
cardRef.current?.hideSensitiveData();
};

// .......

Adding a card to Wallet (Optional)

Start by following the Add card to wallet instructions to use this capability. Then pass the PushProvisioningModule as a prop to Unit's Card Component. This will let the SDK get wallets and start card provisioning for you once the native Add to Wallet button was pressed. Then, you can add a card to the wallet using the "Manage Apple Wallet" or "Manage Google Wallet" tab in the Card Components's native menu or using an AddToWallet as the Incoming event action.

Book Payment Component

UNBookPaymentComponent props:
NameTypeRequiredDescription
customerTokenstringYESA Unit Customer token.
accountIdstringNOUnit account id. The account from which money is being sent.
counterPartyAccountIdstringNOUnit account id. The account which will receive money.
counterPartyNamestringNOName of the counterparty. This is the name that will be displayed in the Book Payment UI during the transfer.
isSameCustomerbooleanNOStating whether both accounts belong to the same customer. Allows fetching additional information about the counterparty account. Default "false"
isAutoFocusbooleanNOAuto-focus the money input field once the component is mounted. Default false
initialStageBackButtonbooleanNOAn action button at the first stage of the payment flow. Default false
finalStageDoneButtonbooleanNOAn action button at the final stage of the payment flow. Default false
themestringNOA URL that specifies the UI configuration.
languagestringNOA URL that specifies the language configuration.
onPaymentCreated(bookPayment: UNBookPaymentData) => voidNOCallback for the created bookPayment.
onInitialStageBackButtonClicked() => voidNOOccurs when the initial stage back button is clicked.
onFinalStageDoneButtonClicked() => voidNOOccurs when the final stage done button is clicked.
onLoad(response: UNOnLoadResponse<[UNAccountData]>) => voidNOCallback for handling onload event, also usable for error handling.
Example:
import React from 'react';
import { UNBookPaymentComponent, UNBookPaymentData, UNAccountData} from 'react-native-unit-components';

export default function YourComponent() {
return (
<UNBookPaymentComponent
customerToken={/*Customer token here*/}
accountId={'1105561'}
counterPartyAccountId={'1105562'}
counterPartyName={'Peter Parker"'}
isSameCustomer={true}
onPaymentCreated={(bookPayment: UNBookPaymentData) => { console.log(bookPayment) }}
onLoad={(response: UNOnLoadResponse<[UNAccountData]>) => { console.log(response) }}
/>
);
}

Activity Component

UNActivityComponent props:
NameTypeRequiredDescription
customerTokenstringYESA Unit Customer token.
accountIdstringNOUnit account id. The account for which the activity will be shown. If not specified: the activity of the customer (all accounts) will be shown
themestringNOA URL that specifies the UI configuration.
languagestringNOA URL that specifies the language configuration.
hideFilterButtonbooleanNOHide filter button in case value is true
hideTitlebooleanNOHide title in case value is true
hideBackToTopbooleanNOHide back to top button in case value is true
queryFilterstringNOQuery for filtering transactions and authorizations: Transactions, Authorizations
paginationTypeUNActivityComponentPaginationTypeNODefines the method by which additional content is loaded. Possible values: infiniteScroll (default), pagination
transactionsPerPagenumberNONumber of transactions to fetch on each page or scroll to bottom. Also acts as initial number of transactions to fetch. The default is 8 for pagination and 15 for infinite scroll
onLoad(response: UNOnLoadResponse<UNActivityOnLoadData>) => voidNOCallback for handling onload event, also usable for error handling.
Incoming Events:
  • By using the refresh() method, it's possible to to refresh the component data from a custom button. Important Note: one can use the refresh() only after UNActivityComponent is loaded. (can be verified by onLoad callback)
Example:
import React from 'react';
import { UNActivityComponent, UNActivityOnLoadData, UNActivityRef } from 'react-native-unit-components';

...
const activityRef = useRef<UNActivityRef>(null);
...

const refresh = () => {
activityRef.current?.refresh();
};
...
export default function YourComponent() {
return (
<UNActivityComponent
ref={activityRef}
customerToken={/*Customer token here*/}
accountId={'1105561'}
onLoad={(response: UNOnLoadResponse<UNActivityOnLoadData>) => { console.log(response) }}
queryFilter={'filter[since]=2023-01-01T00:00:00.000Z&filter[until]=2023-04-26T00:00:00.000Z&sort=-createdAt'}
/>
);
}

Account Component

UNAccountComponent props:
NameTypeRequiredDescription
customerTokenstringYESA Unit Customer token.
accountIdstringNOUnit account id. The account to show, when not provided, one of the customer's accounts will be shown.
themestringNOA URL that specifies the UI configuration.
languagestringNOA URL that specifies the language configuration.
menuItemsUNAccountMenuItem[]NOA list of actions, The menu dynamically adjusts based on the provided list [.details, .statements, .bankVerification].
showLeftToSpendbooleanNOShow amount left to spend in case value is true, only relevant for credit accounts.
hideActionsMenuButtonbooleanNOHide actions menu button in case value is true
hideSelectionMenuButtonbooleanNOHide selection menu button in case value is true
onRequestLeftToSpendDetails(account: UNAccountData) => voidNOCallback for left to spend details request.
onAccountChanged(account: UNAccountData) => voidNOCallback for account changes.
onLoad(response: UNOnLoadResponse<[UNAccountData]>) => voidNOCallback for a loaded component
Example:
import React from 'react';
import { UNAccountComponent, UNAccountData } from 'react-native-unit-components';

export default function YourComponent() {
return (
<UNAccountComponent
customerToken=""
accountId="1105561"
onAccountChanged={(account: UNAccountData) => console.log('Account changed', account)}
onLoad={(response: UNOnLoadResponse<[UNAccountData]>) => { console.log(response) }}
/>
);
}
Incoming Events:
  • In some cases, the default menu button won't fit into the design of an application. By using the openActionsMenu() method, it's possible to open the account actions bottom sheet from a custom button.

    Important Note: one can use the openActionsMenu() only after UNAccountComponent is loaded. (can be verified by onLoad callback)

Example:

import { UNAccountComponent, UNAccountRef } from 'react-native-unit-components';

...

const accountRef = useRef<UNAccountRef>(null);

...

const openAccountMenu = () => {
accountRef.current?.openActionsMenu();
};

...

<UNAccountComponent
ref={accountRef}
accountId={"4242"}
customerToken={''}
/>

  • It's also possible to create your own menu and call account actions from it. Use openAction(action: UNAccountMenuAction) method and send inside an action you want to perform. Use Unit's API Docs in order to understand which actions could be applied.

Example:

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

// .......

const openAction = (action: UNAccountMenuAction) => {
accountRef.current?.openAction(action);
};

// .......


  • By using the refresh() method, it's possible to to refresh the component data from a custom button. Important Note: one can use the refresh() only after UNAccountComponent is loaded. (can be verified by onLoad callback)

Example:

// .......

const refresh = () => {
accountRef.current?.refresh();
};

// .......


Check Deposit Component

Prerequirements:

To enable check scanning with our SDK, please request the camera permissions in your application. Android: navigate to the AndroidManifest.xml file and insert the following:

    <uses-permission android:name="android.permission.CAMERA" />

iOS: navigate to the Info.plist file and insert the camera permission key:

    <key>NSCameraUsageDescription</key>
<string>Your custom message requesting permission from the user</string>
UNCheckDeposit props:
NameTypeRequiredDescription
accountIdstringYESUnit account id. The account to deposit to.
feenumberNOFee changed for making the check deposit, will be presented to the user.
customerTokenstringYESA Unit Customer token.
themestringNOA URL that specifies the UI configuration.
languagestringNOA URL that specifies the language configuration.
initialStageBackButtonbooleanNOAn action button at the first stage of the payment flow. Default false
finalStageDoneButtonbooleanNOAn action button at the final stage of the payment flow. Default false
onInitialStageBackButtonClicked() => VoidNOOccurs when the initial stage back button is clicked.
onFinalStageDoneButtonClicked() => VoidNOOccurs when the final stage done button is clicked.
onDepositCreated(depositCheckData: UNCheckDeposit) => VoidNOOccurs when a check deposit is successfully created
onRestartRequest(depositCheckData: UNCheckDeposit) => VoidNOOccurs when "Deposit another check" is clicked
onLoad(response: UNOnLoadResponse<UNAccountData>) => voidNOCallback for a loaded component
Example:
import React from 'react';
import { UNCheckDepositComponent, UNCheckDepositData, UNAccountData, UNOnLoadResponse } from 'react-native-unit-components';

export default function YourComponent() {
return (
<UNCheckDepositComponent
customerToken={"<Your customer token>"}
accountId={"424242"}
fee={1.5}
onDepositCreated={(checkData: UNCheckDepositData) => console.log('Check deposit created:' , checkData)}
onRestartRequest={(checkData: UNCheckDepositData) => console.log('Restart Request. Check data: ', checkData)}
onLoad={(response: UNOnLoadResponse<UNAccountData>) => { console.log(response) }}
/>
);
}

ACH Debit Payment Component

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.

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

Register your app id:

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

  1. Sign in to the Plaid Dashboard and go to the Team Settings -> API page.
  2. Next to Allowed Android Package Names click Configure then Add New Android Package Name.
  3. Enter your package name, for example com.plaid.example.
  4. Click Save Changes.
UNACHDebitComponent props:
NameTypeRequiredDescription
customerTokenstringYESA Unit Customer token.
accountIdstringNOUnit account id. The account from which money is being sent.
themestringNOA URL that specifies the UI configuration.
languagestringNOA URL that specifies the language configuration.
plaidLinkCustomizationNamestringNOThe 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.
plaidAccountFiltersUNPlaidAccountFilter[]NOAccount 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.
feenumberNOBill your counterparty for his activity.
isAutoFocusbooleanNOAuto-focus the 'add new recipient' button once the component is mounted. Default "false"
sameDaybooleanNOEnables Same Day ACH
initialStageBackButtonbooleanNOAn action button at the first stage of the payment flow. Default false
finalStageDoneButtonbooleanNOAn action button at the final stage of the payment flow. Default false
onInitialStageBackButtonClicked() => voidNOOccurs when the initial stage back button is clicked.
onFinalStageDoneButtonClicked() => voidNOOccurs when the final stage done button is clicked.
onPaymentCreated(data: UNACHData) => voidNOCallback for ACH payment created
onLoad(response: UNOnLoadResponse<UNACHOnLoadData>) => voidNOCallback 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) }}
/>
);
}

ACH Credit Payment Component

Prerequirements:

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

UNACHCreditComponent props:
NameTypeRequiredDescription
customerTokenstringYESA Unit Customer token.
accountIdstringNOUnit account id. The account from which money is being sent.
themestringNOA URL that specifies the UI configuration.
languagestringNOA URL that specifies the language configuration.
plaidLinkCustomizationNamestringNOThe 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.
plaidAccountFiltersUNPlaidAccountFilter[]NOAccount 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.
feenumberNOBill your counterparty for his activity.
withPlaidbooleanNOUse the Plaid API to connect your users' financial accounts. To utilize this integration, follow the prerequirements and set the value as true. Default false.
isAutoFocusbooleanNOAuto-focus the 'add new recipient' button once the component is mounted. Default "false"
sameDaybooleanNOEnables Same Day ACH
initialStageBackButtonbooleanNOAn action button at the first stage of the payment flow. Default false
finalStageDoneButtonbooleanNOAn action button at the final stage of the payment flow. Default false
onInitialStageBackButtonClicked() => voidNOOccurs when the initial stage back button is clicked.
onFinalStageDoneButtonClicked() => voidNOOccurs when the final stage done button is clicked.
onPaymentCreated(data: UNACHData) => voidNOCallback for ACH payment created
onLoad(response: UNOnLoadResponse<UNACHOnLoadData>) => voidNOCallback 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) }}
/>
);
}

Multiple Cards Component

UNMultipleCardsComponent props:
NameTypeRequiredDescription
customerTokenstringYESA Unit Customer token.
themestringNOA URL that specifies the UI configuration.
languagestringNOA URL that specifies the language configuration.
paginationTypeUNMultipleCardsComponentPaginationTypeNODefines how more content is loaded. Possible values: infiniteScroll (default), pagination
cardsPerPagenumberNONumber of cards to fetch on each page or scroll to bottom. Also acts as initial number of cards to fetch. The default is 8 for pagination and 15 for infinite scroll
hideTitlebooleanNOHide title in case value is true
hideBackToTopbooleanNOHide back to top button in case value is true
disableCardClickbooleanNOWhen true, will not publish a onCardClicked event when a row is clicked. Possible values: true / false (default)
queryFilterstringNOQuery for filtering Cards
onLoad(response: UNOnLoadResponse<UNMultipleCardsOnLoadData>) => voidNOCallback for a loaded component
onCardClicked(card: UNCardData) => voidNOOccurs when a card row is clicked
Example:
import React from 'react';
import {
UNMultipleCardsComponent,
UNCardData,
UNMultipleCardsComponentPaginationType,
UNMultipleCardsOnLoadData
} from 'react-native-unit-components';


export default function YourComponent() {
return (
<UNMultipleCardsComponent
customerToken={/*Customer token here*/}
paginationType={UNMultipleCardsComponentPaginationType.pagination}
cardsPerPage={4}
onCardClicked={(card: UNCardData) => { console.log(card) }}
onLoad={(response: UNOnLoadResponse<UNMultipleCardsOnLoadData>) => { console.log(response) }}
/>
);
}

Next Repayment Component

UNNextRepaymentComponent props:
NameTypeRequiredDescription
customerTokenstringYESA Unit Customer token.
accountIdstringYESUnit account id. The credit account for which to display next repayment.
themestringNOA URL that specifies the UI configuration.
languagestringNOA URL that specifies the language configuration.
hideTitlebooleanNOHide title in case value is true
onLoad(response: UNOnLoadResponse<[UNRepaymentData]>) => voidNOCallback for a loaded component
Example:
import React from 'react';
import {
UNNextRepaymentComponent,
UNRepaymentData
} from 'react-native-unit-components';


export default function YourComponent() {
return (
<UNNextRepaymentComponent
customerToken={/*Customer token here*/}
accountId={'1105561'}
onLoad={(response: UNOnLoadResponse<[UNRepaymentData]>) => { console.log(response) }}
/>
);
}

Program Details Component

UNProgramDetailsComponent props:
NameTypeRequiredDescription
customerTokenstringYESA Unit Customer token.
accountIdstringYESUnit account id. The credit account for which to display program details.
themestringNOA URL that specifies the UI configuration.
languagestringNOA URL that specifies the language configuration.
hideTitlebooleanNOHide title in case value is true
onLoad(response: UNOnLoadResponse<[UNAccountData]>) => voidNOCallback for a loaded component
Example:
import React from 'react';
import {
UNProgramDetailsComponent,
UNAccountData
} from 'react-native-unit-components';


export default function YourComponent() {
return (
<UNProgramDetailsComponent
customerToken={/*Customer token here*/}
accountId={'1105561'}
onLoad={(response: UNOnLoadResponse<[UNAccountData]>) => { console.log(response) }}
/>
);
}

Payee Managment Component

UNPayeeManagementComponent props:
NameTypeRequiredDescription
customerTokenstringYESA Unit Customer token
menuItemsUNPayeeManagementMenuItem[]NOA list of actions, The menu dynamically adjusts based on the provided list [.sendFunds, .delete].
queryFilterstringNOQuery for filtering ccounterparties: Counterparties.
paginationTypeUNPayeeManagementComponentPaginationTypeNODefines the method by which additional content is loaded. Possible values: infiniteScroll (default), pagination
counterPartiesPerPagenumberNONumber of counterparties to fetch on each page or scroll to bottom. Also acts as initial number of counterparties to fetch. The default is "8" for pagination and "15" for infinite scroll
themestringNOA URL that specifies the UI configuration.
languagestringNOA URL that specifies the language configuration.
hideTitlebooleanNOHide title in case value is true
hideCounterpartyActionsButtonbooleanNOHide the component actions button in case value is true
menuPlaceholderstringNOThe ID name of the menu HTML element allows the user to render the counterparty menu in a different location.
flowPlaceholderstringNOThe ID name of the flow HTML element allows the user to render the counterpaty flow (delete, send funds) in a different location.
payeeCreationPlaceholderstringNOThe ID name of the payee-creation HTML element allows the user to render the payee creation in a different location.
microDepositConnectionPlaceholderstringNOThe ID name of the micro-deposit-connection HTML element allows the user to render the micro-deposit-connection in a different location.
plaidAccountFiltersUNPlaidAccountFilter[]NOAccount subtypes to display in Link. If not specified, only checking subtype will be shown. Possible values: .checking, .savings
plaidLinkCustomizationNamestringNOThe 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.
onLoad(response: [UNPayeeCounterparty]) => voidNOCallback for handling onload event, also usable for error handling.
onCounterpartyCreated(counterparty: UNPayeeCounterparty) => voidNOCallback when a new counterparty created
onCounterpartyDeleted(counterparty: UNPayeeCounterparty) => voidNOCallback when selected counterparty deleted
onConnectedAccountCreated(connectedAccount: UNPayeeConnectedAccount) => voidNOCallback when a new connected account created
onMicroDepositConnectionCreated(onnectedAccount: UNPayeeCounterparty) => voidNOCallback when micro-deposit connection created
onMicroDepositConnectionRejected(connectedAccount: UNPayeeConnectedAccount) => voidNOCallback when micro-deposit connection rejected
Example:
import React from 'react';
import {
UNPayeeConnectedAccount,
UNPayeeCounterparty,
UNPayeeManagementComponent
} from 'react-native-unit-components';

export default function YourComponent {
return (
<UNPayeeManagementComponent
customerToken={/*Customer token here*/}
onConnectedAccountCreated={(account: UNPayeeConnectedAccount) => console.log(`Payee Account created: ${account}`)}
onCounterpartyCreated={(counterparty: UNPayeeCounterparty) => console.log(`Payee Counterparty created: ${counterparty}`)}
onCounterpartyDeleted={(counterparty: UNPayeeCounterparty) => console.log(`Counterparty Deleted: ${counterparty}`)}
onMicroDepositConnectionCreated={(account: UNPayeeCounterparty) => console.log(`Micro Deposit Connection Created ${account}`)}
onMicroDepositConnectionRejected={(account: UNPayeeConnectedAccount) => console.log(`Micro Deposit Connection Rejected ${account}`)}
/>
);
};

Wire Payment Component

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:
NameTypeRequiredDescription
customerTokenstringYESA Unit Customer token
accountIdstringNOUnit account id. The account from which money is being sent.
feenumberNOFee changed for making the wire payment, will be presented to the user.
themestringNOA URL that specifies the UI configuration.
languagestringNOA URL that specifies the language configuration.
isAutoFocusbooleanNOAuto-focus the money input field once the component is mounted. Default false
initialStageBackButtonbooleanNOAn action button at the first stage of the payment flow. Default false
finalStageDoneButtonbooleanNOAn action button at the final stage of the payment flow. Default false
onPaymentCreated(data: UNWirePaymentData) => voidNOCallback for the created wirePayment.
onInitialStageBackButtonClicked() => voidNOOccurs when the initial stage back button is clicked.
onFinalStageDoneButtonClicked() => voidNOOccurs when the final stage done button is clicked.
onLoad(response: UNOnLoadResponse<[UNAccountData]>) => voidNOCallback 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) }}
/>
);
}

Multi-Factor Authentication

UNMultiFactorAuthenticationComponent props:
NameTypeRequiredDescription
customerTokenstringYESA Unit Customer token
themestringNOA URL that specifies the UI configuration.
languagestringNOA URL that specifies the language configuration.
onLoad(response: UNOnLoadResponse<undefined>) => voidNOCallback for handling onload event, also usable for error handling.
onVerificationTokenCreated(data: UNCustomerTokenVerification) => voidNOOccurs on load of component and when clicking Resend code
onAuthenticationFinished(data: UNMultiFactorAuthenticationFinished) => voidNOCallback when multi-factor authentication finished successfully, and customer token created
Example:
import React from 'react';
import { UNMultiFactorAuthenticationComponent } from 'react-native-unit-components';

export default function YourComponent {
return (
<UNMultiFactorAuthenticationComponent
customerToken={/*Customer token here*/}
onLoad={(response: UNOnLoadResponse<undefined>) => console.log(response)}
onVerificationTokenCreated={(data: UNCustomerTokenVerification) => console.log(`Verification token created: ${data}`)}
onAuthenticationFinished={(data: UNMultiFactorAuthenticationFinished) => console.log(`Authentication finished: ${counterparty}`)}
/>
);
};

Flows

Add card to wallet flow

Start by following the Add card to wallet instructions to use this flow.

Call UnitSDK.setPushProvisioningModule(PushProvisioningModule) with your PushProvisioningModule Native Module.

After that, you can add a card to Apple or Google Wallet by calling the Unit SDK's startPushProvisioning(cardId: string, customerToken: string).

Example:

UnitSDK.ui.flows.startPushProvisioning(YOUR_CARD_ID, YOUR_CUSTOMER_TOKEN);

Security

UNSecuritySettings is an interface. Currently, the settings consist just the snapshotProtectionStrategy.

You can define your custom security settings using it. Then, apply these settings by passing them as a parameter to the SDK's init function.

Snapshot Protection

UNSnapshotProtectionStrategy defines how to protect your app's content from being captured in snapshots. The default strategy is FullProtection. The enum offers three strategies:

  1. FullProtection - applies protection to all screens within the application.
  2. None - no protection applied (likely used if you implement your own protection).

Example:

const securitySettings: UNSecuritySettings = {
snapshotProtectionStrategy: UNSnapshotProtectionStrategy.FullProtection
};

UnitSDK.init(env, THEME, undefined, UNIT_FONTS, webVersioningStrategy, securitySettings);

Additional Capabilities

Add card to wallet

This capability can be used with the Card Component or without it, as a separate flow. Complete the add to wallet guide for React Native, skipping the last module access from javascript, to use this capability.

Set redirect-uri for Plaid (iOS)

In order to use Plaid in iOS, you must set redirectUri (so we can create token correctly as explained in Plaid documentation).

The redirect uri must match the one set in Plaid dashboard with /plaid suffix. For example, if the redirect-uri set on Plaid dashboard is https://your.example.domain/plaid, then the redirect-uri set to UnitSDK must be https://your.example.domain.

Example:

UnitSDK.helpers.redirectUri = 'https://your.example.domain'

Error Handling

By using unitOnLoad callback you can get a result of type UNOnLoadResponse for the requested component. OnError - you will get an enum UNError that consist of several cases.

UNError:

fieldsDescription
errors: UNErrorData[]Report UNError on errors that happen in loading time

UNErrorData:

NameTypeDescription
statusStringA Unit-specific code, uniquely identifying the error type
titleString?The title of the error type
detailString?Additional information about the error.
detailsString?Additional information about the error.
meta{ supportId: String }?meta.supportId unique error identifier to be used for further investigation

Note: An "error object" MUST contain a title and the HTTP status code members.

Example:

    import { UNCardComponent, UNCardData, UNOnLoadResponse } from 'react-native-unit-components';
....
const handleCardOnLoad = (response: UNOnLoadResponse<UNCardData>) => {
if ('errors' in response) {
console.error('ERROR unitOnLoad: ', response.errors);
return;
}
if ('data' in response) {
const cardData: UNCardData = response.data;
console.log('Success, data:', cardData)
return;
}
return;
}
....
return (
...
<UNCardComponent
cardId={'632197'}
customerToken={''}
onLoad={handleCardOnLoad}
/>
...
)

Components working together

Unit components within the same app can effectively communicate with each other. They can automatically exchange messages and trigger events to update relevant data in other components.

For instance, the Payment components and Activity components can work together such that, after a payment has been processed, the new transactions are automatically displayed on the Activity component.

Similarly, the Payment components and Account components can communicate such that, after a payment has been made, the account balance is updated on the Account component.

In some cases, a component may need to be updated in response to an event that is triggered by another component.

For example, if a customer has multiple accounts, the app may have an Account component and an Activity component that displays the activity of a selected account.

import React from 'react';
import { View } from 'react-native';
import { UNAccountComponent, UNActivityComponent } from 'react-native-unit-components';

export default function YourComponent() {
const [activityAccountId, setActivityAccountId] = useState("475891")

return (
<View>
<UNAccountComponent
customerToken={/*Customer token here*/}
accountId={"475891"}
onAccountChanged={(account) => {
console.log("account changed to", account)
setActivityAccountId(account.id)
}}
/>

<UNActivityComponent
customerToken={/*Customer token here*/}
accountId={activityAccountId}
/>
</View>
)
}