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});

1element.destroy();

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);

1element.on('ready', () => {
2  // The 'ready' event indicates that the form is ready for user interaction
3  // This event can be used to hide loading indicators
4  // For a complete list of event codes, please refer to the BeneficiaryFormEventCode enum
5});

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}

1element.unmount();