Getting started
Airwallex.js is a browser-side JavaScript library that lets you seamlessly embed pre-built UI elements into your web pages. With Airwallex.js, you can enable payment acceptance, customer onboarding (KYC/KYB), payouts, risk management, and more—all with minimal effort.
This reference provides detailed documentation on every available element, object, and method in Airwallex.js.
For step-by-step integration guidance on using Airwallex.js UI components, visit our Product Docs.
If you're currently using Airwallex legacy libraries (Payment Elements, Payouts SDK) for embedding UI elements, check out our upgrade guides for migration details.
Install Airwallex.js
Install Airwallex.js using your preferred package manager, for example, npm, yarn, or pnpm.
Alternatively with the 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 the SDK object to be globally accessible in your client-side code as window.AirwallexComponentsSDK.
1npm install @airwallex/components-sdk
init(options?)
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.
Parameters
options
optionalInitOptionsenv
optional'demo' | 'prod''prod'locale
optional'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.
- Payouts Elements supports only
en,zh,zh-HK,de,es,fr,it,ja,ko. - Onboarding Elements supports only
en,fr,zh. - Risk Elements supports only
en,fr,zh. - Compliance Support Elements supports only
en.
fonts
optionalFontOptions[]family
optionalstringAxLLCircular. https://developer.mozilla.org/en-US/docs/Web/CSS/font-familysrc
optionalstringhttps://checkout.airwallex.com/fonts/CircularXXWeb/CircularXXWeb-Regular.woff2. https://developer.mozilla.org/en-US/docs/Web/CSS/@font-faceweight
optionalstring | numberenabledElements
optional('payments' | 'payouts' | 'onboarding' | 'risk')[]authCode
optionalstringclientId
optionalstringcodeVerifier
optionalstringReturns
Promise<InitResult>
InitResult
requiredobjectpayments
optionalPaymentsredirectToCheckout
requiredFunctionsca
optionalSCAgetSCAToken
required() => Promise<string>1// Example 1: Initialize Airwallex.js for Payment Elements2import { init } from '@airwallex/components-sdk';3const options = {4 locale: 'en',5 env: 'prod',6 enabledElements: ['payments'],7};8await init(options);910// Example 2: Initialize Airwallex.js for Onboarding, Payout, Risk, or Compliance Support Elements11import { 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);