Embedded Transfer component

Before beginning the process, you will need to get an authorization code to authorize the user into the Embedded Transfer component workflow. Always get authorization codes on the server side, a trusted environment. This prevents malicious users from being able to alter the scope.

When your page loads, on your server, call Authorize an account API with the following required fields in the request:

• scope: Indicates the resources your application is allowed to access. For this SDK, you must provide w:awx_action:transfers_edit as the scope.
• code_challenge: Generate a challenge token together with the code_verifier using the S256 generation method as described in RFC 7636 Section 4 . code_challenge = BASE64URL-ENCODE(SHA256(ASCII(code_verifier))). Use a third-party package to generate code_verifier and code_challenge or use the following code example in JavaScript.

Install js-base64 package.

The authorization_code will be returned in the response, which you should then return to the client side as authCode in order to initialize the SDK.

In this step, we will verify your proof to use the SDK and prepare the component based on your configurations like running environment, display language, etc.

Call the asynchronous method sdk.init(options) with your credentials and configurations, and wait a little for us to get the component ready. For details of the options, please see Initialization JS.

First, create an empty container div with a unique id. Airwallex inserts an iframe into this div on mounting the instance of the component.

To create the component, call createElement(type, options) and specify the type as payoutForm. This method creates an instance of the component. Components are rendered as iframes. For details of the properties, please see Create Element JS.

Call element.mount(domElement) to attach the instance of the component to the prebuilt container. The instance should only be mounted once.

Add event listeners to handle events received from Airwallex.

Events can be used to facilitate other flows in your user interface where applicable. Please find more details in the list of events below.

You can introduce different call-to-actions based on the user input by monitoring the values in the change event. For example, you can trigger an approval flow based on the source amount, i.e., when it is above a certain threshold amount, you can guide the user to go through a different user flow.

You can also monitor errors as part of the formState event and provide additional guidance for the users so they can fix the errors. The list of possible errors can be found in the Errors and events section.

You can create transfers with the payload you have retrieved by calling the Create a new transfer API endpoint. Please make sure that your request also contains the required beneficiary information.

• If you have created beneficiaries with Airwallex previously, you can provide a beneficiary_id in your request.
• If you already have the beneficiary information, you can specify the parameters in the beneficiary object in your request.
• If you want to collect beneficiary information from your users similarly as you do for transfers, you can use the Embedded Beneficiary component to generate a beneficiary payload and aggregate it into your transfer payload.

See Create a transfer to learn more about this endpoint.

Please note that this API call should only happen on the server side, a trusted environment.

Build and test your integration in the sandbox environment first before going to production. Make sure to account for various success and error scenarios.