Airwallex JS
Airwallex logoAirwallex logo

Beneficiary Element

Copy for LLMView as Markdown
The Beneficiary Element renders a UI to collect Airwallex’s required beneficiary information, such as bank account details, business/personal information. To explore the experience, go to the Airwallex demo site.

createElement('beneficiaryForm', options?)

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

Parameters

type

required'beneficiaryForm'
The type of element you are creating.

options

optionalBeneficiaryFormOptions
Options for creating beneficiaryForm Element.

apiVersion

optionalstring
The Airwallex API version to use for the form. Only support for api version after 2023-04-15.

customizations

optionalBeneficiaryFormCustomizations
Customization options for the form's behavior.

defaultValues

optionalBeneficiaryFormDefaultValues

Pre-filled values for the form fields. Note: Pre-filled values only take effect for fields that can be rendered on initial load. Fields that are dynamically generated through user interactions will not be affected by default values.

locale

optional'en' | 'zh' | 'zh-HK' | 'de' | 'es' | 'fr' | 'it' | 'ja' | 'ko' | 'en-US' | 'es-MX' | 'tr'
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' | 'zh-HK' | 'de' | 'es' | 'fr' | 'it' | 'ja' | 'ko' | 'en-US' | 'es-MX' | 'tr'Deprecated
Use locale instead.

Returns

BeneficiaryFormElement | null

createElement('beneficiaryForm', options?)

1import { createElement } from '@airwallex/components-sdk';
2const element = await createElement('beneficiaryForm', {
3  defaultValues: {
4    beneficiary: {
5      entity_type: 'COMPANY',
6      bank_details: {
7        account_currency: 'AUD',
8        bank_country_code: 'AU',
9        local_clearing_system: 'BANK_TRANSFER',
10      },
11    },
12    transfer_methods: ['LOCAL'],
13  },
14});

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 the element:
2// 1. Call with the container DOM id
3element.mount('container-dom-id');
4

5// 2. Find the created DOM in the existing HTML and call with the container DOM element
6const containerElement = document.getElementById('container-dom-id');
7element.mount(containerElement);

on('ready', handler)

This event will be fired when the form is ready to interact with the user.

Parameters

type

required'ready'
The event name.

handler

required() => void
The callback function that will be called when the event occurs.

on('ready', handler)

1element.on('ready', () => {
2    console.log('Beneficiary form is ready');
3  });

on('error', handler)

This event will be fired when form encounters an unexpected error.

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'UNKNOWN_ERROR'
The unexpected error code, for example: UNKNOWN_ERROR.

message

optionalstring
The unexpected error message.

on('error', handler)

1element.on('error', (data: { code: string }) => {
2    console.error(data.code);
3  });

on('formState', handler)

This event will be fired when the form validation state or loading state is changed.

Parameters

type

required'formState'
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:

errors

requiredBeneficiaryFormError
The error message if the form is invalid.

loading

requiredboolean
Whether the form is loading.

validation

requiredboolean
Whether the form is valid.

on('formState', handler)

1element.on('formState', (data: { loading: boolean; validation: boolean; errors: string }) => {
2    // validation is true if the form is valid
3    // loading is true if the form is loading
4    // errors is the error message if the form is invalid
5  });

on('change', handler)

This event will be fired when the form values change.

Parameters

type

required'change'
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:

values

requiredBeneficiaryFormValue
The form value.

on('change', handler)

1element.on('change', (data: {values: BeneficiaryFormValue}) => {
2    // data.values is the form value
3  });

submit()

Collects beneficiary information by submitting the form.

Returns

Promise<BeneficiaryFormSubmitResponse>

BeneficiaryFormSubmitResponse

requiredobject

values

requiredBeneficiaryFormValue
The values submitted by the user.

errors

optionalBeneficiaryFormError
The errors that occurred during the submission.

submit()

1const { values: beneficiary, errors } = await element.submit();
2if (!errors) {
3  // Submit the beneficiary information to the backend for processing
4} else {
5  // Handle errors using the error code
6}

unmount()

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

unmount()

1element.unmount();
Was this page helpful?