Web checkout (desktop and mobile browser)

Use one of the following integration options to offer Google Pay at checkout on desktop and mobile browsers.

Add Google Pay to your integration

If you use an Airwallex hosted checkout solution, enable Google Pay on your account and start accepting payments. Airwallex handles Google-side token processing for you.

For Hosted Payment Page integration, you do not need to complete Google registration and integration steps.

Setup steps

Create a PaymentIntentAPI.
Integrate the Hosted Payment Page.
Pass googlePayRequestOptionsJS when calling redirectToCheckoutJS. countryCode is required.

JavaScript

1payments.redirectToCheckout({
2  intent_id: "replace-with-your-intent-id",
3  client_secret: "replace-with-your-client-secret",
4  currency: "USD",
5  googlePayRequestOptions: {
6    countryCode: "US",
7    merchantInfo: {
8      merchantName: "Example Merchant",
9    },
10    emailRequired: true,
11    billingAddressParameters: {
12      format: "FULL",
13      phoneNumberRequired: true,
14    },
15    billingAddressRequired: true,
16    buttonType: "book",
17    buttonColor: "black",
18    buttonSizeMode: "fill",
19  },
20});

Google Pay is supported in the Drop-in element. Ensure your account is Google Pay enabled and your domain is registered in the Airwallex web app under Payments > Settings.

Use googlePayRequestOptionsJS in createElement("dropIn", ...); countryCode is required.

JavaScript

1const dropInElement = createElement("dropIn", {
2  intent_id: intent.id,
3  client_secret: intent.client_secret,
4  currency: "USD",
5  googlePayRequestOptions: {
6    countryCode: "US",
7    billingAddressParameters: {
8      format: "FULL",
9      phoneNumberRequired: true,
10    },
11    billingAddressRequired: true,
12    merchantInfo: {
13      merchantName: "Example Merchant",
14    },
15    buttonType: "buy",
16    buttonColor: "black",
17  },
18});

To use the Direct Checkout type with the Drop-in element, add checkoutType: 'direct' to googlePayRequestOptions.

HTML

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="utf-8" />
5  <title>Quickstart — Drop-in Element</title>
6  <script src="https://static.airwallex.com/components/sdk/v1/index.js"></script>
7</head>
8<body>
9  <h1>Drop-in Element integration</h1>
10  <p>Complete payment using the embedded Drop-in Element below.</p>
11  <div id="dropIn"></div>
12  <script async>
13    const intent_id = 'replace-with-your-intent-id';
14    const client_secret = 'replace-with-your-client-secret';
15    const currency = 'replace-with-your-currency';
16
17    (async () => {
18      await window.AirwallexComponentsSDK.init({
19        env: 'demo',
20        enabledElements: ['payments'],
21      });
22
23      const element = await window.AirwallexComponentsSDK.createElement('dropIn', {
24        intent_id,
25        client_secret,
26        currency,
27        googlePayRequestOptions: {
28          countryCode: 'US',
29          merchantInfo: {
30            merchantName: 'Example Merchant',
31            merchantId: '0123456789',
32          },
33          buttonType: 'buy',
34          // To enable Google Pay Direct Checkout
35          checkoutType: 'direct',
36        },
37      });
38
39      element.mount('dropIn');
40
41      element.on('ready', () => {
42        // Element is mounted and ready for shopper interaction
43      });
44
45      element.on('success', () => {
46        // Handle successful payment (still verify on the server)
47      });
48
49      element.on('error', () => {
50        // Show a message so the shopper can retry
51      });
52    })();
53  </script>
54</body>
55</html>

JavaScript

1import { init, createElement } from '@airwallex/components-sdk';
2
3await init({
4  env: 'demo',
5  enabledElements: ['payments'],
6});
7
8const element = createElement('dropIn', {
9  intent_id: 'replace-with-your-intent-id',
10  client_secret: 'replace-with-your-client-secret',
11  currency: 'replace-with-your-currency',
12  googlePayRequestOptions: {
13    countryCode: 'US',
14    merchantInfo: {
15      merchantName: 'Example Merchant',
16      merchantId: '0123456789',
17    },
18    buttonType: 'buy',
19    // To enable Google Pay Direct Checkout
20    checkoutType: 'direct',
21  },
22});
23
24element.mount('dropIn');
25element.on('ready', () => {});
26element.on('success', () => {});
27element.on('error', () => {});

Use the Google Pay element if you want a dedicated Google Pay button in your web checkout.

Native API gives you full front-end control, but you must handle Google Pay events and payment token confirmation.

Ensure Google Pay is enabled for your merchant account before processing Google Pay with Native API.

You can use Airwallex certificates to process Google Pay payments on the web only. For native mobile transactions with the Native API, you must use your own Google Pay gateway ID and certificates.

Key Google Pay functions you must handle:

Google tokenization settings:

gateway: airwallex
gatewayMerchantId: Your Airwallex account Open ID (acct_...)

Example tokenizationSpecification:

JSON

1{
2  "type": "PAYMENT_GATEWAY",
3  "parameters": {
4    "gateway": "airwallex",
5    "gatewayMerchantId": "{{AWX_ACCT_OPEN_ID}}"
6  }
7}

Core API flow:

Create PaymentIntentAPI.
Call Google loadPaymentData and collect payment token data.
Confirm PaymentIntent via Confirm PaymentIntentAPI.

Example confirm request:

Shell

1curl -X POST https://api.sandbox.airwallex.com/api/v1/pa/payment_intents/{{PAYMENT_INTENT_ID}}/confirm \
2  -H 'Content-Type: application/json' \
3  -H 'Authorization: Bearer {{ACCESS_TOKEN}}' \
4  -d '{
5    "request_id": "ed489c5b-9a09-49bc-ab12-b5bf0e6c8e27",
6    "payment_method": {
7      "type": "googlepay",
8      "googlepay": {
9        "payment_data_type": "encrypted_payment_token",
10        "encrypted_payment_token": "{{GOOGLE_PAY_TOKEN}}"
11      }
12    }
13  }'

For Google Pay token confirmation payloads:

googlepay.payment_data_type: Type of payment data. Use tokenized_card or encrypted_payment_token.
googlepay.encrypted_payment_token: UTF-8 encoded serialized JSON token from Google Pay.

Example Google Pay token object:

JSON

1{
2  "protocolVersion": "ECv2",
3  "signature": "MEQCIH6Q4OwQ0jAceFEkGF0JID6sJNXxOEi4r+mA7biRxqBQAiAondqoUpU/bdsrAOpZIsrHQS9nwiiNwOrr24RyPeHA0Q==",
4  "intermediateSigningKey": {
5    "signedKey": "{\"keyExpiration\":\"1542323393147\",\"keyValue\":\"MFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAE/1+3HBVSbdv+j7NaArdgMyoSAM43yRydzqdg1TxodSzA96Dj4Mc1EiKroxxunavVIvdxGnJeFViTzFvzFRxyCw==\"}",
6    "signatures": [
7      "MEYCIQCO2EIi48s8VTH+ilMEpoXLFfkxAwHjfPSCVED/QDSHmQIhALLJmrUlNAY8hDQRV/y1iKZGsWpeNmIP+z+tCQHQxP0v"
8    ]
9  },
10  "signedMessage": "{\"tag\":\"jpGz1F1Bcoi/fCNxI9n7Qrsw7i7KHrGtTf3NrRclt+U=\",\"ephemeralPublicKey\":\"BJatyFvFPPD21l8/uLP46Ta1hsKHndf8Z+tAgk+DEPQgYTkhHy19cF3h/bXs0tWTmZtnNm+vlVrKbRU9K8+7cZs=\",\"encryptedMessage\":\"mKOoXwi8OavZ\"}"
11}

Handle recurring payments

Use the options below to support recurring Google Pay use cases, including saving payment details with or without an upfront charge. Choose the integration pattern that matches your checkout implementation.

Google Pay recurring scenarios are supported in hosted checkout via googlePayRequestOptions.displayItems.

Save details without payment (deferred start): use mode: "recurring" and provide subscription display items.
Save details with payment (immediate start): use intent_id + mode: "recurring" and provide recurring display items.
Variable amount use cases are supported with display item configuration.

Use the detailed patterns in Save and reuse payment details.

Example without upfront payment:

JavaScript

1payments.redirectToCheckout({
2  env: "demo",
3  client_secret: "your-client-secret",
4  currency: "USD",
5  customer_id: "your-customer-id",
6  mode: "recurring",
7  googlePayRequestOptions: {
8    countryCode: "US",
9    displayItems: [
10      {
11        label: "monthly",
12        price: "1",
13        status: "FINAL",
14        type: "LINE_ITEM",
15      },
16    ],
17  },
18});

Example with upfront payment:

JavaScript

1payments.redirectToCheckout({
2  env: "demo",
3  intent_id: "int_xxx",
4  client_secret: "your-client-secret",
5  currency: "USD",
6  customer_id: "your-customer-id",
7  mode: "recurring",
8  googlePayRequestOptions: {
9    countryCode: "US",
10    displayItems: [
11      {
12        label: "monthly",
13        price: "1",
14        status: "FINAL",
15        type: "LINE_ITEM",
16      },
17    ],
18  },
19});

Drop-in supports Google Pay recurring patterns with mode: "recurring" and googlePayRequestOptions.displayItems.

Without upfront payment: deferred recurring setup with display items.
With upfront payment: include intent_id and recurring display items.
Variable amount use cases are supported via display item settings.

For complete flow setup, see Save payment details for future payments.

Example without upfront payment:

JavaScript

1createElement("dropIn", {
2  mode: "recurring",
3  client_secret: intent.client_secret ?? "",
4  currency: "USD",
5  customer_id: "your-customer-id",
6  googlePayRequestOptions: {
7    countryCode: "US",
8    displayItems: [
9      {
10        label: "monthly",
11        price: "1",
12        status: "FINAL",
13        type: "LINE_ITEM",
14      },
15    ],
16  },
17});

Example with upfront payment:

JavaScript

1createElement("dropIn", {
2  mode: "recurring",
3  intent_id: "int_xxx",
4  client_secret: intent.client_secret ?? "",
5  currency: "USD",
6  customer_id: "your-customer-id",
7  googlePayRequestOptions: {
8    countryCode: "US",
9    displayItems: [
10      {
11        label: "monthly",
12        price: "1",
13        status: "FINAL",
14        type: "LINE_ITEM",
15      },
16    ],
17  },
18});

For recurring flows with the Google Pay element, use:

Native API recurring flows are supported with PaymentConsent:

Save details without payment: create customer, payment method, and verify PaymentConsent.
Save details with payment: create payment method and PaymentConsent, then create and confirm PaymentIntent for the first order.
Include recurring terms in Google Pay display items shown to the shopper.

Suggested flow for save details without payment:

Create CustomerAPI.
Get available payment method types (GET /api/v1/pa/config/payment_method_types) and confirm googlepay supports recurring mode.
Collect Google Pay payment data with recurring displayItems.
Create PaymentMethodAPI.
Create PaymentConsentAPI.
Verify PaymentConsentAPI.

Suggested flow for save details with payment:

Create CustomerAPI.
Get available payment method types (GET /api/v1/pa/config/payment_method_types).
Collect Google Pay payment data with recurring displayItems.
Create PaymentMethodAPI.
Create PaymentConsentAPI.
Create PaymentIntentAPI for the first order.
Confirm PaymentIntentAPI with payment_consent_id.

Related APIs:

Test your integration

For detailed instructions, see Google Pay payment scenarios.

To test Google Pay in a demo environment, add your email to Google Pay Test Mode Stub Data. Excessive attempts without registering may lead to account access being blocked.

Was this page helpful?