Drop-in Element

Refer to the Drop-in Element integration guide for step-by-step instructions on how to embed multiple payment methods on your checkout page.

Apple Pay is supported via Drop-in integration. Ensure that your merchant account is enabled for Apple Pay and you have added your domain information on the Airwallex web app > Payments > Settings page. For more information, see Enable Apple Pay. Once registered, you can pass applePayRequestOptions JS in createElement() to offer Apple Pay. Note that countryCode is mandatory.

JavaScript
1const dropInElement = createElement("dropIn", {
2 intent_id: intent.id,
3 client_secret: intent.client_secret,
4 applePayRequestOptions: {
5  countryCode: 'US',
6        requiredBillingContactFields: ["postalAddress", "email", "name", "phone"], // optional field
7        requiredShippingContactFields: ["name", "email"], // optional field
8        totalPriceLabel: 'COMPANY, INC.', // Provide a business name for the label field
9  buttonType: 'buy', // Indicate the type of button you want displayed on your payments form. Like 'buy'
10  buttonColor: 'white-with-line', // Indicate the color of the button. Default value is 'black' 
11 },
12 currency: 'USD',
13});

Subscription payments

Airwallex allows you to create a PaymentConsent with the shopper to initiate future payments using shopper’s saved payments details. For more information, see Save payment details for future payments. You need to add additional information about the order & terms of the payment to display this information on the payment sheet.

1. See below example to understand how to setup recurring with Apple Pay without payment

JSON
1    createElement("dropIn",{
2      mode: 'recurring',
3      client_secret: intent.client_secret ?? '',
4      currency: 'USD',
5      customer_id: 'your customer id',
6      ...
7      applePayRequestOptions: {
8       countryCode: 'US',
9       lineItems: [{
10        label: "Delayed Subscription",
11        amount: "20.00",
12        type: "final",
13        paymentTiming: "deferred",
14        deferredPaymentDate: new Date("2023-07-01T00:00:00"),
15        }],
16
17      },
18})

2. See below example to understand how to setup recurring with Apple Pay with payment

JSON
1    createElement("dropIn",{
2      mode: 'recurring',
3      intent_id : ''
4      client_secret: intent.client_secret ?? '',
5      currency: 'USD',
6      customer_id: 'your customer id',
7      intent_id : "xxx"
8      ...
9      applePayRequestOptions: {
10       countryCode: 'US',
11       lineItems: [{
12        label: "Subscription",
13        amount: "20.00", //should be same as intent amount when intent_id is referred
14        type: "final",
15        paymentTiming: "recurring",
16        recurringPaymentStartDate: new   Date("2022-01-01T00:00:00"),
17        recurringPaymentIntervalUnit: "month",
18        recurringPaymentIntervalCount: 6,
19        recurringPaymentEndDate: new Date("2024-01-01T00:00:00"),
20        }],
21
22      },
23})

3. See example below for variable amount / variable subscription use-case with payment

JSON
1lineItems: [
2    {
3      label: "WEEKLY PRODUCT",
4      amount: "20.00",
5      type: "pending"
6    }
7]

4. See example below for variable amount / variable subscription use-case without payment

JSON
1lineItems: [
2{
3    label: "WEEKLY PRODUCT",
4    amount: "0.00",
5    type: "pending"
6    paymenttiming: "deferred"
7    deferredPaymentDate: new Date("2023-07-01T00:00:00")
8}
9]