> ## Documentation Index
> Fetch the complete documentation index at: https://waffo.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Frontend component - Google Pay integration

> A complete guide to integrating Google Pay payments on the merchant page.

## Overview

Google Pay allows users to complete payments quickly using credit or debit cards saved in their Google account, simplifying checkout and improving conversion rates.

## Payment flow

<Steps>
  <Step title="User clicks the Google Pay button">
    The user clicks the Google Pay button on the merchant page.
  </Step>

  <Step title="Initiate a Google Pay request">
    The merchant initiates a request via the Google Pay Web API / Android SDK.
  </Step>

  <Step title="User selects a payment method">
    The user selects a payment method, and Google returns an encrypted token.
  </Step>

  <Step title="Submit the token">
    The merchant submits the token to the merchant backend.
  </Step>

  <Step title="Call the Waffo API">
    The merchant calls Waffo `/api/v1/order/create` with the token.
  </Step>

  <Step title="Handle the result">
    Waffo processes the payment and returns the result, and the merchant notifies the user.
  </Step>
</Steps>

## Prerequisites

* Waffo account setup completed
* Obtain `gatewayMerchantId` from Waffo TAM (use `"googletest"` for sandbox)

## Step 1: Google frontend integration

### Web integration

Refer to the [Google Pay Web documentation](https://developers.google.com/pay/api/web/guides/setup) and configure `tokenizationSpecification`:

```javascript theme={null}
const tokenizationSpecification = {
  type: 'PAYMENT_GATEWAY',
  parameters: {
    gateway: 'waffo',
    gatewayMerchantId: 'googletest',
  }
};
```

### Android integration

Refer to the [Google Pay Android documentation](https://developers.google.com/pay/api/android/guides/setup).

### Notes

* Supported payment type: `CARD`
* Supported card networks: `VISA`, `MASTERCARD`, `AMEX`, `DISCOVER`
* Authentication method: `PAN_ONLY`
* Required fields: `name`, `address`, `phone`, `email`

## Step 2: Waffo backend integration

Send the token returned by Google Pay to Waffo via `/api/v1/order/create`:

```json theme={null}
{
  "paymentRequestId": "gp_a1b2c3d4e5f6a1b2c3d4e5f6",
  "merchantOrderId": "ORDER_20260325001",
  "orderAmount": "100.00",
  "orderCurrency": "HKD",
  "notifyUrl": "https://your-site.com/webhook/waffo",
  "merchantInfo": { "merchantId": "M000001" },
  "paymentInfo": {
    "productName": "ONE_TIME_PAYMENT",
    "payMethodName": "GOOGLEPAY",
    "payMethodType": "CARD"
  },
  "userInfo": {
    "userId": "user_123",
    "userFirstName": "John"
  },
  "paymentTokenData": "{ Google Pay returned encrypted token JSON }"
}
```

<Note>
  `paymentTokenData` must be a JSON object, not a string.
</Note>

## Web SDK integration

Integrate Google Pay via the Waffo Web SDK `createPayment()` method:

```javascript theme={null}
sfc.createPayment({
  sessionToken: '<sessiontoken>',
  merchantId: '<your merchantId>',
  merchantSiteId: '<your merchantSiteId>',
  paymentOption: {
    card: {
      externalToken: {
        externalTokenProvider: 'GooglePay',
        mobileToken: '<encrypted Token using Waffo open key>'
      }
    }
  },
  billingAddress: {
    email: 'user@example.com',
    county: 'HK'
  }
}, function(res) {
  console.log(res);
});
```

### 3DS flow control

Use the `googlePay3Dflow` parameter to control 3D Secure authentication:

* `enable` (default): Enable 3DS authentication
* `disable`: Skip 3DS (contact Waffo for configuration first)

```javascript theme={null}
sfc.createPayment({
  // ...
  googlePay3Dflow: 'enable',
});
```

## Go-live checklist

1. Apply for [Google Production Access](https://services.google.com/fb/forms/googlepayAPIenable)
2. Update the Google integration configuration for the production environment
3. Replace `gatewayMerchantId` with the production value provided by Waffo TAM
4. Contact Waffo TAM to confirm the configuration is correct

## Google Pay built into the checkout

If you do not need a custom integration, you can contact Waffo to enable Google Pay in the checkout:

1. Provide the website domain that will process Google Pay
2. Provide the merchant ID to enable
3. After configuration is complete, the Google Pay button will be displayed automatically on the checkout page

<Note>
  In the built-in checkout mode, 3DS transactions must comply with SCA requirements. If applicable, contact Waffo to enable 3DS.
</Note>