Google Pay

The same InyoTokenizer instance can render a Google Pay button next to your card form. Add the googlePay option: one public key, one environment (chosen by the script URL) and one pair of callbacks serve both payment methods, and a Google Pay token is charged exactly like a card token.

Set up the tokenizer first: see Tokenizing Cards. This page covers only what the googlePay option adds.

Google Pay must be enabled for your merchant account, and the checkout origin must be registered with Inyo (see Domain Whitelisting). The Google Pay merchant settings — merchant ID, merchant name shown on the payment sheet, accepted card networks and environment — are managed by Inyo for each merchant account; you do not configure them. Without a merchant name, Google shows the name registered in its own console.

How It Works

sequenceDiagram
    participant S as Shopper
    participant P as Your page<br/>+ inyo.js
    participant G as Google Pay
    participant I as Inyo
    participant B as Your backend
    Note over P,I: Page load
    P->>I: Get Google Pay<br/>settings
    P->>G: Can this device pay?
    G-->>P: Yes
    P-->>S: Show button
    Note over S,I: Shopper pays
    S->>P: Click button
    P->>G: Open payment sheet
    S->>G: Pick card, approve
    G-->>P: Encrypted<br/>payment data
    P->>I: Tokenize
    I-->>P: Token
    Note over P,B: Charge
    P->>B: successCallback<br/>sends the token
    B->>I: POST /v2/payment
    I-->>B: Payment result

Example

<div id="payment-form">
  <!-- card inputs with data-field attributes, as above -->
</div>
<div id="google-pay-button"></div>

document.addEventListener('DOMContentLoaded', () => {
  const cart = { total: '99.99' };  // your checkout's cart state

  const tokenizer = new InyoTokenizer({
    targetId: '#payment-form',
    publicKey: 'YOUR_PUBLIC_KEY',
    threeDSData: { enable: true, enablePostMessage: true },
    successCallback: handleSuccess,   // receives card and Google Pay tokens
    errorCallback: handleError,
    googlePay: {
      targetId: '#google-pay-button',
      // called on every click: always shows the current cart total
      transactionInfo: () => ({ totalPrice: cart.total, currencyCode: 'USD', countryCode: 'US' }),
      availabilityCallback: (available) => {
        // false: this browser or device cannot pay with Google Pay; no button was rendered
      }
    }
  });

  document.getElementById('pay-btn').addEventListener('click', () => {
    tokenizer.tokenizeCard();
  });
});

There is no method to call for Google Pay: the button runs the whole flow and delivers the token to successCallback, in the same response shape as a card token. A Google Pay response also carries additionalData.walletToken (see Success Callback).

The amount on the sheet is display only. The Google Pay token carries no amount: the amount charged is the one your backend sends to POST /v2/payment. Always take it from your own records, never from the browser.

Return the total from a function rather than a fixed object whenever the cart can change (coupons, shipping, quantities), so the shopper approves the amount you will charge. Keep the function fast — preferably synchronous, reading your cart state: browsers only let the Google Pay sheet open shortly after the click, so a slow async lookup can stop it from opening.

Google Pay Parameters (googlePay)

Behavior

• Availability: the button appears only when the shopper's browser and device can pay with Google Pay. Otherwise nothing is rendered and errorCallback is not called; use availabilityCallback to adapt your layout.
• Device-tokenized cards only: Google Pay is offered with cards tokenized on the shopper's device, which carry their own authentication cryptogram. No 3DS challenge runs for Google Pay, so threeDSData does not apply to it. In practice the button appears mainly on Android devices with a card in Google Wallet.
• One-time tokens: storeLaterUse applies to cards only. A Google Pay token is single use.
• Iframes: if your checkout runs inside an iframe, add allow="payment" to the <iframe> element.
• Sandbox: the sandbox script uses Google Pay's test environment. Cards in the shopper's Google account return test payment data and are never charged.

Charging a Google Pay Token

Send additionalData.token to your backend and create the payment as a card payment:

"paymentMethod": {
  "type": "CARD",
  "cardTokenId": "TOKEN_FROM_successCallback"
}

It is the same flow as a card token, with three differences:

• No 3DS: threeDSData does not apply. The card in Google Pay already carries its own authentication cryptogram, so no challenge runs.
• Single use: storeLaterUse does not apply. A Google Pay token is always single use; tokenize again for each payment.
• Amount: the amount on the Google Pay sheet is display only. The amount charged is always the one your backend sends to POST /v2/payment, taken from your own records.

To tell a Google Pay token apart, check additionalData.walletToken.walletType === "GOOGLE_PAY" in the successCallback response.

Google Pay Error Codes

These codes reach the same errorCallback: