The Airwallex Payment Elements JavaScript library has been deprecated. For the latest features and customization options for Drop-in Element, Card Element, Split Card Element, Apple Pay Element, Google Pay Element, and Hosted Payment Page please upgrade to Airwallex.js JS. This guide covers the changes made and instructions for migrating to Airwallex.js.

Update JavaScript client library

npm/yarn/pnpm installation

Install the new package.

• Before: airwallex-payment-elements
• After: @airwallex/components-sdk

cdn installation

Update the URL in the <script> tag.

• Before: <script src="https://checkout.airwallex.com/assets/elements.bundle.min.js"></script>
• After: <script src="https://static.airwallex.com/components/sdk/v1/index.js"></script>

After installation, you will need to initialize the SDK by calling the init() method.

Update SDK functions

init()

New parameters

• enabledElements: An array of Element groups representing the Elements. For example, to use Payments elements, set enabledElements to payments.

Deprecated parameters

• origin

BEFORE

JavaScript
1import { init } from 'airwallex-payment-elements';
2init({
3 env: 'prod',
4 origin: window.location.origin,
5});

AFTER

JavaScript
1import { init } from '@airwallex/components-sdk';
2init({
3  env: 'prod',
4  enabledElements: ['payments'],
5});

createElement()

No changes to the function other than the import source.

BEFORE

JavaScript
1import { createElement } from 'airwallex-payment-elements';
2createElement('card');

AFTER

JavaScript
1import { createElement } from '@airwallex/components-sdk';
2createElement('card');

redirectToCheckout()

Replace redirectToCheckout() with payments.redirectToCheckout().

BEFORE

JavaScript
1import { init, redirectToCheckout } from 'airwallex-payment-elements';
2init({
3  env: 'demo',
4  origin: window.location.origin,
5});
6
7redirectToCheckout({
8  intent_id: 'replace-with-your-intent-id',
9  client_secret: 'replace-with-your-client-secret',
10  currency: 'replace-with-your-currency',
11  country_code: 'replace-with-your-country-code',
12});

AFTER

JavaScript
1import { init } from '@airwallex/components-sdk';
2const { payments } = await init({
3  env: 'demo',
4  enabledElements: ['payments'],
5});
6
7payments.redirectToCheckout({
8  intent_id: 'replace-with-your-intent-id',
9  client_secret: 'replace-with-your-client-secret',
10  currency: 'replace-with-your-currency',
11  country_code: 'replace-with-your-country-code',
12});

getPaymentIntent()

This function has been deprecated.

getDeviceFingerprint()

This function has been deprecated.

getGatewayUrl()

This function has been deprecated.

Element functions

For the following functions, replace the global object Airwallex with the instance object element where element is the object returned from createElement().

createPaymentConsent()

Replace Airwallex.createPaymentConsent() with element.createPaymentConsent().

BEFORE

JavaScript
1Airwallex.createPaymentConsent(options);

AFTER

JavaScript
1element.createPaymentConsent({
2  client_secret: 'replace-with-your-client-secret',
3});

createPaymentMethod()

Replace Airwallex.createPaymentMethod() with element.createPaymentMethod().

BEFORE

JavaScript
1Airwallex.createPaymentMethod({
2   "client_secret":"replace-with-your-client-secret",
3   "customer_id":"replace-with-your-customer-id",
4   "payment_method":{
5      "card":{
6         "name":"John Doe",
7      },
8      "element":"CardNumberElement",
9   },
10});

AFTER

JavaScript
1element.createPaymentMethod({
2   "client_secret":"replace-with-your-client-secret",
3   "customer_id":"replace-with-your-customer-id",
4   "payment_method":{
5      "card":{
6         "name":"John Doe",
7      },
8   },
9});

confirmPaymentIntent()

Replace Airwallex.confirmPaymentIntent() with element.confirm().

BEFORE

JavaScript
1Airwallex.confirmPaymentIntent(paymentMethod);

AFTER

JavaScript
1element.confirm({
2  client_secret: 'replace-with-your-client-secret',
3});

confirmPaymentIntentWithSavedCard()

Replace Airwallex.confirmPaymentIntentWithSavedCard() with element.confirm.

BEFORE

javascript;highlight-lines-red=[1,
1Airwallex.confirmPaymentIntentWithSavedCard({
2     client_secret: 'replace-with-your-client-secret',
3     methodId: 'replace-with-your-methodId',
4     element: CardNumberElement,
5 });

AFTER

JavaScript
1element.confirm({
2     client_secret: 'replace-with-your-client-secret',
3});

destroyElement()

Replace Airwallex.destroyElement() with element.destroy().

BEFORE

JavaScript
1Airwallex.destroyElement(type);

AFTER

JavaScript
1element.destroy();

Event listeners

Replace domElement.addEventListener('onEventName', ...) with element.on('eventName', ...) where element is the object returned from createElement().

BEFORE

JavaScript
1const domElement = card.mount('card');
2domElement.addEventListener('onReady', (event) => {
3  /*
4    ... Handle event
5  */
6  window.alert(event.detail);
7});

AFTER

JavaScript
1const domElement = card.mount('card');
2element.on('ready', (event) => {
3  /*
4    ... Handle event
5  */
6  window.alert(event.detail);
7});