Redirect/QR Code Element
Redirect Element and QR Code Element integrations allow you to save payment details for future payments. To save payment details, Airwallex allows you to create a PaymentConsent, which represents the consent between you and the shopper to use the shopper’s saved payment method for future payments. You can use the PaymentConsent to initiate scheduled (recurring) or unscheduled (one-time) payments without the shopper involved.
Supported payment methods include:
- Redirect: Alipay, AlipayHK, Gcash, Dana, KakaoPay, Touch ‘n Go
- QR Code: AlipayHK, KakaoPay
This page describes how to save payment details using Redirect or QR Code Element integrations.
Before you implement the integration, consider the following:
Contact your Airwallex Account Manager to enable payment acceptance using Embedded Elements for your merchant account.
Obtain your access token API by authenticating to Airwallex using your unique Client ID and API key. You will need the access token to make API calls.
airwallex-payment-elementspackage using Yarn or NPM
yarn add airwallex-payment-elements
npm install airwallex-payment-elements
You can choose to create and verify a PaymentConsent without an initial payment and charge the shopper later. This is helpful if you want to first onboard a shopper, save their payments details, and then initiate payments (recurring or one-time) in the future without the shopper involved.
To set a card up for future payments, you must first store the card on a Customer object. Create a Customer object using Create a Customer API API when your shopper creates an account with your business. You can also store name, email and other details on the Customer. The response will contain a unique
id for the shopper.
Provide the Customer id in Generate a client secret for a Customer API API and save the returned
Create a checkout page with Redirect/QR code Element to collect payment details by passing the following fields in
client_secretfrom Step 2
method(Redirect Element) or
qrcodeMethod(QR Code Element)
idof the Customer for whom the PaymentConsent is created.
mode: Set this to
next_triggered_by is set to
When the shopper completes the authorization, Airwallex verifies the PaymentConsent and attaches the payment details (in a PaymentMethod object) to the provided Customer. You will receive
payment_consent.verified event via webhook notifications, and you can use the returned unique PaymentConsent
id in Confirm a PaymentIntent API API to make subsequent payments.
Follow these integration steps to trigger subsequent payments using saved payment details. Note that you must integrate subscription management into your application to initiate scheduled payments at set intervals for an agreed amount.
Call Create a PaymentIntent API API by providing the
id of the shopper in the
customer_id parameter. Save the returned intent
Call Confirm a PaymentIntent API API with the following parameters to charge the shopper.
idof the PaymentIntent you want to confirm and complete.
client_secretof the PaymentIntent you want to confirm and complete.
idof the Customer associated with the saved payment method.
payment_consent_reference.id: The PaymentConsent
idassociated with the saved payment method.