Guest user checkout

This page describes how to embed a Apple Pay Element on your payment page to accept payments.

How it works

The diagram below depicts the information flow in a Apple Pay Element integration. Apple Pay sequence

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.
Install Airwallex.js JS. If your integration currently uses Airwallex Payment Elements , refer to our upgrade guide for information on migrating to Airwallex.js.

Step 1: Set up the server to create a PaymentIntent

When the shopper begins the checkout process, you will need to create a PaymentIntent object to indicate your intent to collect payment from the shopper.

When the checkout page loads, on your server, call Create a PaymentIntent API with an amount and currency. Always decide how much to charge on the server side, a trusted environment, as opposed to the client. This prevents malicious shoppers from being able to alter the payment amount.

Provide return_url in Create a PaymentIntent API to indicate where Airwallex should redirect the shopper after completing the payment, whether successful or otherwise.

The PaymentIntent’s id and client_secret are returned in the response — these parameters let you confirm the payment and update card details on the client, without allowing manipulation of sensitive information, like payment amount.

Shell
1curl --request POST \
2--url 'https://api-demo.airwallex.com/api/v1/pa/payment_intents/create' \
3--header 'Content-Type: application/json' \
4--header 'Authorization: Bearer <your_bearer_token>' \
5--data-raw '{
6    "request_id": "00e8df19-7087-4209-b50b-067d6a39ee72",
7    "amount": 100,
8    "currency": "CNY",
9    "merchant_order_id": "Merchant_Order_a7f9baf8-884a-4def-ba85-d1f9be83470a",   
10    "return_url": "http://www.merchant.com/result"
11}'

Step 2: Initialize Airwallex on your checkout page

First, you will need to import Airwallex.js and then initialize the package. For details, see Initialize Airwallex JS.

Step 3: Add the Apple Pay Element to your checkout page

To embed the Apple Pay Element into your checkout page, you will need to create an empty container, create the Element and then mount the Element to the container.

Define the payment form

First, create an empty container div with a unique id in your payment form. Ensure that the payment form only contains one Element with this unique id. Airwallex inserts an iframe into this div on mounting the Element.

HTML
1<div id="applePayButton"></div>

Create the Apple Pay Element

When the payment form has loaded, call createElement(type, options) by specifying the Element type as applePayButton to create the Element. Ensure that the payment form only contains one Element with applePayButton id.

JavaScript
1import { createElement } from '@airwallex/components-sdk';
2const element = createElement('applePayButton', {
3  intent_id: 'replace-with-your-intent-id',
4  client_secret: 'replace-with-your-client-secret',
5  amount: {
6    value: 'replace-with-your-intent-amount',
7    currency: 'replace-with-your-intent-currency',
8  },
9  countryCode: 'replace-with-your-country-code',
10  requiredBillingContactFields: ["postalAddress", "email", "name", "phone"], // optional field
11  requiredShippingContactFields: ["name", "email"], // optional field
12  totalPriceLabel: 'COMPANY, INC.', // Provide a business name for the label field.
13  buttonType: 'buy', // Indicate the type of button you want displayed on your payments form. Like 'buy'
14  buttonColor: 'white-with-line', // Indicate the color of the button. Default value is 'black' 
15});

Mount the Apple Pay Element

Call mount() with the id of the div to mount the Element to the DOM. This creates the Apple Pay button. The Element should only be mounted once in a single payment flow.

JavaScript
1element.mount('applePayButton'); // Injects iframe into the Apple Pay Element container

Add onReady event listener to ensure the Element is mounted. Use this event to prepare and load the checkout page.

JavaScript
1 const element = mount('root');
2element.addEventListener('onReady', (event) => {
3  // handle event
4});

Apple Pay props

You can also pass options in createElement() to overwrite styles and other functions as shown in the following table. For details, see applePayButton props JS.

Step 4: Handle the response

Add success and error event listeners to handle error and success events received from Airwallex.

JavaScript
1const element = mount('dropIn');
2element.on('success', (event) => {
3  // Handle event on success
4});
5
6element.on('error', (event) => {
7  // Handle event on error
8});

If no error occurred, display a message that the payment was successful. If payment fails with an error, display the appropriate message to your shopper so they can take action and try again.

Retrieve the payment result

For any actions subsequent to the payment such as shipping goods or sending email receipts, you can retrieve the payment result using the following options:

Set up webhooks to receive notifications on whether the payment has succeeded. Airwallex sends payment_intent.succeeded event when a payment succeeds. Listen to these events rather than waiting on a callback from the client. On the client, the shopper could close the browser window or quit the app before the callback executes. For information on how to set up webhooks and listen to events, see Getting started with webhooks
On your server, call Retrieve a PaymentIntent API to check the PaymentIntent status.
Check Payment Activity screen on your Airwallex web app.