Payments KYB Element

The Payments KYB (Know Your Business) Element allows platforms to collect KYB information from connected accounts to complete the KYB onboarding process. This enables connected accounts to start receiving funds through the Airwallex payment gateway. To explore the experience, go to the Airwallex demo site

createElement('paymentsKyb', options?)

Use this function to create an instance of an individual Element.

Parameters

type

required'paymentsKyb'

The type of element you are creating.

options

optionalPaymentsKybElementOptions

Options for creating paymentsKyb Element.

hideHeader

optionalboolean

If set to true, the Payments Kyb flow header will be hidden, allowing platforms to configure a customized taskflow header on top the Element. By default, the header will be displayed within the Payments Kyb flow and shows the platform's content.

hideNav

optionalboolean

If set to true, the side navigation will be hidden. By default, standard side navigation will be shown.

locale

optional'en' | 'zh' | 'fr'

The locale for the Element, applied to Element UI strings and error messages. By default, the locale configured in init() is used.

langKey

optional'en' | 'zh' | 'fr'Deprecated

Use locale instead.

Returns

PaymentsKybElement | null

createElement('paymentsKyb', options?)

1import { createElement } from '@airwallex/components-sdk';
2
3const element = await createElement('paymentsKyb', {
4  hideHeader: true,
5  hideNav: true,
6});

destroy()

Destroys the Element instance.

destroy()

1element.destroy();

mount(domElement)

Mounts Element to your HTML DOM.

Parameters

domElement

requiredstring | HTMLElement

The container DOM element to mount the element.

mount(domElement)

1// There are two ways to mount element:
2// 1. Call with container DOM id
3element.mount('container-dom-id');
4
5// 2. Find the created DOM in existing HTML and call with container DOM element
6const containerElement = document.getElementById('container-dom-id');
7element.mount(containerElement);

on('ready', handler)

This event will be fired when the Payments Kyb element is ready for starting the Kyb application. If PERMISSION_DENIED error takes place, this event will not be triggered.

Parameters

type

required'ready'

The event name.

handler

requiredfunction

The callback function that will be called when the event occurs.

The handler receives an object with the following properties:

kybStatus

required'PENDING_REVIEW' | 'IN_REVIEW' | 'REJECTED' | 'ACCEPTED' | 'APPROVED'

kycStatus

required'INIT' | 'SUBMITTED' | 'SUCCESS' | 'FAILED'

type

required'paymentsKyb'

on('ready', handler)

1{
2  kybStatus: 'PENDING_REVIEW' | 'IN_REVIEW' | 'REJECTED' | 'ACCEPTED' | 'APPROVED',
3  kycStatus: 'INIT' | 'SUBMITTED' | 'SUCCESS' | 'FAILED'
4}

on('success', handler)

This event fires when the initial KYB case is submitted successfully

Parameters

type

required'success'

The event name.

handler

required() => void

The callback function that will be called when the event occurs.

on('success', handler)

1element.on('success', () => {
2  // Handle success event
3});

on('cancel', handler)

The event fires when shopper click cancel button when interact with the form.

Parameters

type

required'cancel'

The event name.

handler

required() => void

The callback function that will be called when the event occurs.

on('cancel', handler)

1element.on('cancel', () => {
2  console.log('KYB cancelled');
3});

on('error', handler)

Error events are fired at various targets for different kinds of errors with shopper interaction.

Parameters

type

required'error'

The event name.

handler

requiredfunction

The callback function that will be called when the event occurs.

The handler receives an object with the following properties:

code

required'API_ERROR' | 'SUBMIT_FAILED'

message

optionalstring

on('error', handler)

1{ code: string, message?: string }

on('reserveOptionsOffered', handler)

UserReserveSelection is only used when the reserve selection is available for the accounts. Contact Account Manager for more details.

Parameters

type

required'reserveOptionsOffered'

The event name.

handler

requiredfunction

The callback function that will be called when the event occurs.

on('reserveOptionsOffered', handler)

1{
2 reserveOptions: UserReserveSelection
3}

on('selectReserve', handler)

UserReserveSelection is what the user selects for the reserve option. Only for when the reserve selection is available for the accounts. Contact Account Manager for more details.

Parameters

type

required'selectReserve'

The event name.

handler

requiredfunction

The callback function that will be called when the event occurs.

The handler receives an object with the following properties:

selected

on('selectReserve', handler)

1{
2 selected: UserReserveSelection
3}

unmount()

Unmounts the Element. Note that the Element instance will remain.

unmount()

1element.unmount();

Was this page helpful?