Airwallex logo
Airwallex logoAirwallex logo

Web checkout (desktop and mobile browser)

Copy for LLMView as Markdown

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

  1. Create a PaymentIntent API.
  2. Integrate the Hosted Payment Page.
  3. Pass googlePayRequestOptions JS when calling redirectToCheckout JS. 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 googlePayRequestOptions JS 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});

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:

  1. isReadyToPay
  2. loadPaymentData

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:

  1. Create PaymentIntent API.
  2. Call Google loadPaymentData and collect payment token data.
  3. Confirm PaymentIntent via Confirm PaymentIntent API.

Example confirm request:

Shell
1curl -X POST https://api-demo.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:

  1. Create Customer API.
  2. Get available payment method types (GET /api/v1/pa/config/payment_method_types) and confirm googlepay supports recurring mode.
  3. Collect Google Pay payment data with recurring displayItems.
  4. Create PaymentMethod API.
  5. Create PaymentConsent API.
  6. Verify PaymentConsent API.

Suggested flow for save details with payment:

  1. Create Customer API.
  2. Get available payment method types (GET /api/v1/pa/config/payment_method_types).
  3. Collect Google Pay payment data with recurring displayItems.
  4. Create PaymentMethod API.
  5. Create PaymentConsent API.
  6. Create PaymentIntent API for the first order.
  7. Confirm PaymentIntent API 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?