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_

$3

`ts
import Airwallex from 'airwallex-payment-elements';

Airwallex.loadAirwallex({
env: 'demo', // 'demo' | 'prod'
});
`

$3

`html


`ts
const cardElement = Airwallex.createElement('card', {
intent: {
// Required, Card uses intent Id and client_secret to prepare checkout
id: 'replace-with-your-intent-id',
client_secret: 'replace-with-your-client-secret',
},
});
cardElement.mount('card'); // Injects iFrame into element container
`

$3

`ts
document.getElementById('submit').addEventListener('click', () => {
Airwallex.confirmPaymentIntent({
element: card, // Must link element
id: 'replace-with-your-intent-id', // Same as intent details from above
client_secret: 'replace-with-your-client-secret',
}).then((response) => {
// Listen to the payment confirmation response
window.alert(JSON.stringify(response));
});
});
}
`

$3

`ts
// Replace EVENT_TYPE with 'onReady', 'onChange', 'onSuccess', or 'onError'
window.addEventListener(EVENT_TYPE, (event) => {
/*
... Handle event
*/
window.alert(event.detail);
});
`

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!

`bash
.
├── dist
│ ├── index.d.ts
│ ├── index.js
│ └── index.js.map
├── docs # GATSBY DOC PROJECT
│ ├── gatsby-config.js
│ ├── package.json
│ ├── plugins
│ ├── public
│ ├── scripts
│ ├── source
│ │ ├── basic-usage # MANUAL MAINTAINED BY DEVELOPERS
│ │ ├── index.mdx # TECHNICAL OVERVIEW
│ │ └── sdk-reference # GENERATED BY TYPEDOC
│ ├── src
│ ├── tsconfig.json
│ └── yarn.lock
├── src
│ ├── __snapshots__
│ ├── index.test.ts
│ └── index.ts
├── types
│ ├── airwallex.d.ts
│ ├── element.d.ts
├── package.json
├── tsconfig.json
├── .gitlab-ci.yml # ADD DOC PROJECT BUILD AND DEPLOYMENT STAGE
├── typedocconfig.js # TYPEDOC CONFIG
└── yarn.lock
``