airwallex-payment-elements

IMPORTANT NOTICE: This package is being superseded by Airwallex.js. We strongly recommend upgrading to Airwallex.js for the latest features and improvements.

Comprehensive documentation for Airwallex Payment Elements is now available via Airwallex.js. Airwallex.js consolidates all Airwallex Elements into a single, unified SDK for greater efficiency and ease of integration. The SDK includes:

• Payment Elements (Drop-In, HPP, Card, Apple Pay, Google Pay, etc.)
• Payout Elements (Beneficiary, Transfer, Tax Form)
• Onboarding Elements (KYC, KYB)
• Risk Elements (RFI)
• Compliance Support Elements (SCA)

We recommend upgrading to the new Airwallex.js SDK to access the latest Payment Elements features and enhancements.

This airwallex-payment-elements library is a lightweight javascript SDK that allows merchants to conveniently integrate the Airwallex checkout flow on their website.

Check out our demo here.

How it works

Merchants can integrate airwallex-payment-elements in the checkout page on their site. For every checkout, merchants should create a PaymentIntent entity through the Airwallex API to process payments with Airwallex.

Once the PaymentIntent is successfully created via API integration, the API will return a response with a unique ID and client secret for the intent. Merchants can then use these two keys to enable the payment elements to collect payment attempt details.

Payment Methods

The package includes different payment processing elements that will allow merchants ot accept payments on their site. We have 6 different checkout elements:

• Hosted Payment Page (HPP): Merchants can accept payments without the full handling of the payment processing and display of the payment options.
• Drop in: Merchants can accept payments without full responsibility of handling their payments but can still control the overall look and feel of their payment page.
• Embedded Fields (Elements): A set of prebuilt UI components, like inputs and buttons that Merchants can directly place in their checkout flow (more below)
  • Full Featured Card
  • Split Card
  • Wechat Element

The primary focus of this library is Elements, which enables Merchants to collect sensitive information (PCI) using customizable UI elements. This library also provides a single interface for interacting with the Payment Request API, allowing for the tokenization of sensitive information and handling of 3D secure authentication flows.

Elements includes the following features:

1. Automatic formatting of card information in the input field
2. Customize placeholders to fit Merchant UX/UI designs
3. Responsive design
4. Flexible/Customizable styling to match the look and feel of the Merchant's checkout flow

Installation

Install with Yarn

yarn add airwallex-payment-elements

Or, with NPM

npm install airwallex-payment-elements

Getting Started with the Airwallex Card Element

The Card element is one of Airwallex's most popular payment integration. It is a single line multi-input field containing card number, card expiry, and card cvc.

Detailed Card integration guide here. More extensive documentation details below

Initialize Airwallex:

1import Airwallex from 'airwallex-payment-elements';
2
3Airwallex.loadAirwallex({
4  env: 'demo', // 'demo' | 'prod'
5});

Create a container for your payment element in HTML:

1<div id="card"></div>
2<div id="submit">Submit</div>

Then create and mount your payment element in Javascript:

1const cardElement = Airwallex.createElement('card', {
2  intent: {
3    // Required, Card uses intent Id and client_secret to prepare checkout
4    id: 'replace-with-your-intent-id',
5    client_secret: 'replace-with-your-client-secret',
6  },
7});
8cardElement.mount('card'); // Injects iFrame into element container

Add an event handler to the button to trigger payment confirmation

1document.getElementById('submit').addEventListener('click', () => {
2  Airwallex.confirmPaymentIntent({
3    element: card, // Must link element
4    id: 'replace-with-your-intent-id', // Same as intent details from above
5    client_secret: 'replace-with-your-client-secret',
6  }).then((response) => {
7    // Listen to the payment confirmation response
8    window.alert(JSON.stringify(response));
9  });
10});
11}

Add onReady, onChange, onSuccess, and onError event listeners to handle various events received from the Airwallex Payment server.

1// Replace EVENT_TYPE with 'onReady', 'onChange', 'onSuccess', or 'onError'
2window.addEventListener(EVENT_TYPE, (event) => {
3  /*
4  ... Handle event
5    */
6  window.alert(event.detail);
7});

Integration

Each payment processing method requires different customizations. Check out our examples of web integrations with the airwallex-payment-demo library.

Sandboxes

You also can play around with different elements in our framework specific sandboxes below. They're all based off the airwallex-payment-demo repository!

• Static HTML
• React
• React-Typescript
• Vue
• Angular

Questions, comments, or suggestions?

We want to provide you with a seamless experience integrating with our platform. Let us know if you run into any problems, or have any comments and suggestions for us. We value your input!

1.
2├── dist
3│   ├── index.d.ts
4│   ├── index.js
5│   └── index.js.map
6├── docs # GATSBY DOC PROJECT
7│   ├── gatsby-config.js
8│   ├── package.json
9│   ├── plugins
10│   ├── public
11│   ├── scripts
12│   ├── source
13│   │   ├── basic-usage # MANUAL MAINTAINED BY DEVELOPERS
14│   │   ├── index.mdx # TECHNICAL OVERVIEW
15│   │   └── sdk-reference # GENERATED BY TYPEDOC
16│   ├── src
17│   ├── tsconfig.json
18│   └── yarn.lock
19├── src
20│   ├── __snapshots__
21│   ├── index.test.ts
22│   └── index.ts
23├── types
24│   ├── airwallex.d.ts
25│   ├── element.d.ts
26├── package.json
27├── tsconfig.json
28├── .gitlab-ci.yml # ADD DOC PROJECT BUILD AND DEPLOYMENT STAGE
29├── typedocconfig.js # TYPEDOC CONFIG
30└── yarn.lock