Registered user checkout
This implementation applies to Redirect Element and 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
Before you begin
Before you implement the integration, consider the following:
Ensure your Airwallex account is activated for online payments.
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.
Explore the
airwallex-payment-elementsJavaScript client library reference JS to familiarize yourself with the Embedded Elements methods, parameters, and properties.Install the package
- Using Yarn or NPM
yarn add airwallex-payment-elementsnpm install airwallex-payment-elements
- Using CDN
<script src="https://checkout.airwallex.com/assets/elements.bundle.min.js"></script>
- Using Yarn or NPM
Save payment details for the first time
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.
Step 1: Create a Customer
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 and also the client_secret. Save the client_secret for later.
Step 2: Generate a client secret for the Customer
Provide the Customer id in Generate a client secret for a Customer API API and save the returned client_secret
Step 3: Create a PaymentConsent
Create a checkout page with Redirect/QR code Element to collect payment details by passing the following fields in createElement( ):
client_secretfrom Step 2currencymethod(Redirect Element) orqrcodeMethod(QR Code Element)customer_id: Theidof the Customer for whom the PaymentConsent is created.mode: Set this torecurring
By default, next_triggered_by is set to merchant.
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.
Merchant-initiated 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.
Step 1: Create a PaymentIntent
Call Create a PaymentIntent API by providing the amount, currency, and id of the shopper in the customer_id parameter. Save the returned intent id.
Step 2: Confirm the PaymentIntent
Call Confirm a PaymentIntent API with the following parameters to charge the shopper.
intent_id: Theidof the PaymentIntent you want to confirm and complete.customer_id: Theidof the Customer associated with the saved payment method.payment_consent_id: The PaymentConsentidassociated with the saved payment method.