Account

The account component allows you to show your customers their different accounts, and allows them to:

• View account details
• Switch between accounts
• Download account statements
• Download a banking verification letter

Account Component TEST MODE

Mobile

Desktop

Implementation

Web Components

Add the Account Element to your app where you'd like it to be presented.

<unit-elements-account
    account-id="1105561"
    customer-token=""
    theme=""
    hide-actions-menu-button="false"
    hide-selection-menu-button="false"
    menu-items="details,statements,bankVerification"
></unit-elements-account>

Inputs:

Name	Type	Required	Description
account-id	string	No	Unit account id. The account to show, when not provided, one of the customer's accounts will be shown.
customer-token	string	Yes	A Unit Customer token. Required Scopes: customers statements accounts
theme	string	No	A URL that specifies the UI configuration.
language	string	No	A URL that specifies the language configuration.
hide-actions-menu-button	string	No	Hide actions menu button in case value is 'true'.
hide-selection-menu-button	string	No	Hide selection menu button in case value is 'true'.
show-left-to-spend	string	No	Show amount left to spend in case value is 'true', only relevant for credit accounts.
menu-items	string	No	A list of actions, The menu dynamically adjusts based on the provided list details, statements, bankVerification.

Events:

Event Name	Description	Detail
unitAccountChanged	Occurs when a user switches to a different account	[Promise] Account
unitRequestLeftToSpendDetails	Occurs when a user requests left to spend details	[Promise] Account

Incoming events:

In some cases, the default menu button won't fit into the design of an application. By using the unitRequestOpenActionsMenu incoming event, it's possible to open the account actions bottom sheet from a custom button

<unit-elements-account
    account-id="1105561"
    customer-token=""
    theme=""
    hide-actions-menu-button="false"
    hide-selection-menu-button="false"
></unit-elements-account>

<button id="#custom-button">Account Actions</button>

<script>
    document.querySelector('#custom-button').addEventListener('click', () => {
        document
            .querySelector('unit-elements-account')
            .dispatchEvent(new CustomEvent('unitRequestOpenActionsMenu'));
    });
</script>

It's also possible to create your own menu and call account actions from it. Use unitRequestAccountAction event and send inside an action you want to perform. Possible actions: OpenAccountStatements, OpenAccountDetails, DownloadBankVerificationLetter

<unit-elements-account
    account-id="1105561"
    customer-token=""
    theme=""
    hide-actions-menu-button="false"
    hide-selection-menu-button="false"
></unit-elements-account>

<button id="#custom-button">Download bank verification letter</button>

<script>
    document.querySelector('#custom-button').addEventListener('click', () => {
        document.querySelector('unit-elements-account').dispatchEvent(
            new CustomEvent('unitRequestAccountAction', {
                detail: { action: 'DownloadBankVerificationLetter' },
            })
        );
    });
</script>

React Native SDK

UNAccountComponent props:

Name	Type	Required	Description
customerToken	string	YES	A Unit Customer token.
accountId	string	NO	Unit account id. The account to show, when not provided, one of the customer's accounts will be shown.
theme	string	NO	A URL that specifies the UI configuration.
language	string	NO	A URL that specifies the language configuration.
menuItems	UNAccountMenuItem[]	NO	A list of actions, The menu dynamically adjusts based on the provided list [.details, .statements, .bankVerification].
showLeftToSpend	boolean	NO	Show amount left to spend in case value is true, only relevant for credit accounts.
hideActionsMenuButton	boolean	NO	Hide actions menu button in case value is true
hideSelectionMenuButton	boolean	NO	Hide selection menu button in case value is true
onRequestLeftToSpendDetails	(account: UNAccountData) => void	NO	Callback for left to spend details request.
onAccountChanged	(account: UNAccountData) => void	NO	Callback for account changes.
onLoad	(response: UNOnLoadResponse<[UNAccountData]>) => void	NO	Callback 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();
};

// .......

Android SDK

Component name: UNAccountComponent

getAccountComponent parameters:

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

UNAccountComponentCallbacks

The callbacks parameter for UNAccountComponent is of the following type:

typealias UNAccountComponentCallbacks = (callback: UNAccountComponentCallback) -> Unit

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

sealed class UNAccountComponentCallback {
    data class OnLoad(val onLoadResponse: Result<List<UNAccountData>>): UNAccountComponentCallback()
    data class RequestLeftToSpendDetails(val account: UNAccountData): UNAccountComponentCallback()
    data class AccountChanged(val account: UNAccountData): UNAccountComponentCallback()
}

To get the Account Component fragment, call the getAccountComponent 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.UNAccountViewSettingsBuilder
import co.unit.un_components.common.enums.UNAccountComponentCallback
import co.unit.un_components.components.UNAccountView

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

        private var unAccountComponent: UNAccountComponent? = null

        unAccountComponent = UnitComponentsSdk.manager.ui.views.getAccountComponent(
            accountId = YOUR_ACCOUNT_ID,
            theme = YOUR_THEME_URL,
            language = YOUR_LANGUAGE_URL
        ) { callback ->
            when(callback) {
                is UNAccountComponentCallback.OnLoad -> handleOnLoad(callback.onLoadResponse)
                is UNAccountComponentCallback.RequestLeftToSpendDetails -> handleRequestLeftToSpendDetails(callback.account)
                is UNAccountComponentCallback.AccountChanged -> handleAccountChange(callback.account)
            }
        }

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

    private fun handleAccountChange(account: UNAccountData) {
        print("[Account component] Account Change: $account")
    }

    private fun handleRequestLeftToSpendDetails(account: UNAccountData) {
        requireActivity().runOnUiThread {
            activity?.showAlert("Request More details: id=${account.id}, type=${account.type}, account-number=${account.attributes.accountNumber}, balance=${account.attributes.balance}")
        }
        print("[Account component] onRequestLeftToSpendDetails: $account")
    }
    private fun accountUnitOnLoad(onLoadResult: Result<List<UNAccountData>>) {
        if(onLoadResult.isSuccess) {
            println(onLoadResult.getOrNull())
        } else {
            when (val exception = onLoadResult.exceptionOrNull()) {
                is UNComponentsError.OnLoad -> {
                    println(exception)
                }
            }
        }
    }
}

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 menu bottom-sheet from a custom button.

Important Note: one can use the openActionsMenu() only after unAccountComponent is loaded.

Example:

unAccountComponent?.openActionsMenu()

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 co.unit.un_components.common.models.Account.UNAccountMenuAction

// .......
unAccountComponent?.openAction(UNAccountMenuAction.OpenAccountDetails)

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.

import co.unit.un_components.common.models.Account.UNAccountMenuAction

// .......

unAccountComponent?.refresh()

The additionalSettings parameter for UNAccountComponent has this attribute:

UNAccountViewSettingsInterface

Name	Type	Default Value	Description
hideActionsMenuButton	Boolean	false	Hide the actions menu buttons.
hideSelectionMenuButton	Boolean	false	Hide selection menu button.
showLeftToSpend	Boolean	false	Show amount left to spend in case value is true, only relevant for credit accounts.
menuItems	List<UNAccountComponentMenuItems>	null	A list of actions, The menu dynamically adjusts based on the provided list [.details, .statements, .bankVerification].

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

val additionalSettings = UNAccountViewSettingsBuilder()
    .hideActionsMenuButton(...)
    .hideSelectionMenuButton(...)
    .showLeftToSpend(...)
    .menuItems(...)

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

IOS SDK

Component name: UNAccountComponent

Configuration parameters:

Name	Type	Required	Description
accountId	String	YES	Unit account id. The account for which the activity will be shown.
additionalSettings	UNAccountViewSettingsProtocol	NO	Advanced optional settings.
theme	String	NO	A URL that specifies the UI configuration.
language	String	NO	A URL that specifies the language configuration.
callbacks	UNAccountComponentCallbacks	NO	Callbacks to interact with the Account component.

The callbacks parameter for UNAccountComponent is of the following type:

public typealias UNAccountComponentCallbacks = (_ callback: UNAccountComponentCallback) -> Void

The UNAccountComponentCallback is an enum that has the following callbacks that you can receive from an Account component:

public enum UNAccountComponentCallback {
    case unitOnLoad(result: Result<[UNAccountData], UNError>)
    case onAccountChange(account: UNAccountData)
    case onRequestLeftToSpendDetails(account: UNAccountData)
}

To get the Account Component call the getAccountComponent method of UnitSDK.manager.ui.views.

Example:

import UIKit
import UNComponents
import SnapKit

class AccountScreen: UIViewController {

    fileprivate lazy var accountComponent: UNAccountView = {
        let unViews = UnitSDK.manager.ui.views
        let accountComponent = unViews.getAccountComponent(accountId: "424242"){ callback in
            switch callback {
            case .unitOnLoad(let result):
                switch result {
                case .success(let accounts):
                    print("Success. Accounts Data: \(accounts)")
                case .failure(let error):
                    print("Fail to load Account component. Error details: \(error)")
                }
            case .onAccountChange(let account):
                print(("Account \(account.id) is changed"))
            case .onRequestLeftToSpendDetails(let account):
                print(("Request left to spend details for account \(account.id)"))
            }
        }
        return accountComponent
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        view.addSubview(accountComponent)
        accountComponent.snp.makeConstraints { make in
            make.top.equalTo(view.safeAreaLayoutGuide.snp.top)
            make.leading.trailing.equalToSuperview()
        }
    }

}

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:

accountComponent.openActionsMenu()

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:

accountComponent.open(action: UNAccountMenuAction.details)

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.

Example:

accountComponent.refresh()

The additionalSettings parameter for UNAccountComponent is of the following type:

UNAccountViewSettingsProtocol:

Name	Type	Default Value	Description
hideActionsMenuButton	Bool	false	Hide the actions menu buttons.
hideSelectionMenuButton	Bool	false	Hide selection menu button.
menuItems	[UNAccountComponentMenuItems]		A list of actions, The menu dynamically adjusts based on the provided list [.details, .statements, .bankVerification].
showLeftToSpend	Bool	false	Show amount left to spend in case value is true, only relevant for credit accounts.

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

Example:

let additionalSettings = UNAccountViewSettingsBuilder()
    .hideActionsMenuButton(true)
    .hideSelectionMenuButton(true)
    .menuItems([.details])
let unViews = UnitSDK.manager.ui.views
let cardComponent = unViews.getAccountComponent(accountId: "424242", additionalSettings: additionalSettings)