Transfer Element

1import { createElement } from '@airwallex/components-sdk';
2const element = await createElement('payoutForm', {
3  defaultValues: {
4    beneficiary_id: 'replace-with-your-beneficiary-id',
5  },
6});

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    console.log('Payout form is ready');
3  });

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

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

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

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

1element.unmount();