KYC RFI Element

The KYC RFI Element allows platforms to collect additional KYC information from connected accounts during onboarding. The additional information is requested by Airwallex when initial details are insufficient for approval. To explore the experience, go to the Airwallex demo site

createElement('kycRfi', options?)

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

Parameters

type

required'kycRfi'

The type of element you are creating.

options

optionalRfiElementOptions

Options for creating kycRfi Element.

hideHeader

optionalboolean

If set to true, the RFI 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 RFI 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

KycRfiElement | null

createElement('kycRfi', options?)

1import { createElement } from '@airwallex/components-sdk';
2
3const element = await createElement('kycRfi', {
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 RFI page is ready.

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:

type

required'kycRfi'

on('ready', handler)

1type RfiEventData = {
2  type: 'kycRfi';
3}
4
5element.on('ready', (data: RfiEventData) => {
6  // Handle ready event
7});

on('success', handler)

This event fires when the rfi flow is completed successfully.

Parameters

type

required'success'

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:

rfiId

requiredstring

on('success', handler)

1type RfiEventData = {
2  rfiId: string;
3}
4
5element.on('success', (data: RfiEventData) => {
6  // Handle success event
7});

on('cancel', handler)

This event fires when the element is exited by cancellation.

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('RFI cancelled');
3});

on('error', handler)

This event fires when an error occurs within the element.

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' | 'INVALID_KYC_STATUS' | 'INVALID_RFI_STATUS'

message

optionalstring

on('error', handler)

1type errorCode = 'API_ERROR' | 'SUBMIT_FAILED' | 'INVALID_KYC_STATUS' | 'INVALID_RFI_STATUS' | 'UNKNOWN';
2type ErrorData = { code: errorCode, message?: string }
3
4element.on('error', (data: ErrorData) => {
5  console.error('RFI error:', data.code, data.message);
6});

unmount()

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

unmount()

1element.unmount();

Was this page helpful?