Install Airwallex.js

Install Airwallex.js using your preferred package manager, for example, npm, yarn, or pnpm.
Alternatively with cdn installation, you can add Airwallex.js as a HTML <script> tag to the <head> element of each HTML page on your site. This installation option allows any newly created Airwallex.js objects to be globally accessible in your client side code.
npm
yarn
pnpm
cdn
1npm install @airwallex/components-sdk

Initialize Airwallex.js

Load Airwallex.js and specify the initialization settings and elements you want to fetch using the init() function. The modular approach of fetching only the resources specified in init() ensures optimized performance and customization tailored to your needs.

The Airwallex package should only be initialized once in your application.

init(options?)

Parameters

optionsoptionalInitOptions

Returns

void
linkTypeScript
1// Example 1: Initialize Airwallex.js for Payment Elements
2import { init } from '@airwallex/components-sdk';
3const options = {
4  locale: 'en',
5  env: 'prod',
6  enabledElements: ['payments'],
7};
8await init(options);
9

10// Example 2: Initialize Airwallex.js for Onboarding, Payout, Risk, or Compliance Support Elements
11import { init } from '@airwallex/components-sdk';
12const options = {
13  locale: 'en',
14  env: 'prod',
15  enabledElements: ['onboarding', 'payouts', 'risk'],
16  authCode: 'replace-with-your-auth-code',
17  clientId: 'replace-with-your-client-id',
18  codeVerifier: 'replace-with-your-code-verifier',
19};
20await init(options);

InitOptions

envoptional'demo' | 'prod'

The Airwallex environment you want to integrate your application with. Default value is 'prod'.

localeoptional'en' | 'zh' | 'ja' | 'ko' | 'ar' | 'fr' | 'es' | 'nl' | 'de' | 'it' | 'zh-HK' | 'pl' | 'fi' | 'ru' | 'da' | 'id' | 'ms' | 'sv' | 'ro' | 'pt'

The locale used to globally configure localization for Airwallex.js Elements. The specified locale will be applied to both the Element UI strings and error messages unless overridden by the locale field at the Element level (except Payment Elements).

Supported locales vary by Elements type:

  • Payment Elements: Supports all locales. Defaults to the browser's locale; however, if the browser's locale is not supported, it will default to 'en'.
  • Payouts Elements: Supports only en, zh, zh-HK, de, es, fr, it, ja, ko with only en support available for Tax Form Element.
  • Onboarding Elements: Supports only en and zh.
  • Risk Elements: Supports only en and zh.
  • Compliance Support Elements: Supports only en.

fontsoptional
FontOptions
[]

Fonts options to customize the font styles of Payment Elements.

enabledElementsoptionalArray<'payments' | 'payouts' | 'onboarding' | 'risk'>

An array of Element groups representing the Elements. For example, 'payments' indicates all available Elements that support collection of payments information.

authCodeoptionalstring

Scoped auth code to exchange for scoped access token to authorize platform to make API calls. Only applicable to Onboarding, Payout, Risk and Compliance Support Elements

clientIdoptionalstring

The ID of platform application issued by Airwallex. Only applicable to Onboarding, Payout, Risk and Compliance Support Elements

codeVerifieroptionalstring

Serves as proof key for code exchange in authorization code flow. Only applicable to Onboarding, Payout, Risk and Compliance Support Elements