Google Pay lets customers pay using cards saved to their Google account with a single tap.

Prerequisites

PaymentKit.js checks Google Pay availability automatically when it initializes — there’s no manual prepare step. You reveal your button once the SDK reports it’s ready (see Show the express button), and the customer’s tap submits the payment.

PaymentKit.js routes Google Pay through whichever processor your account has configured, and each processor relies on a different browser library. PaymentKit does not inject these scripts for you—add the one matching your processor (or both, if you’re unsure which one the backend will select).

1
<script src="https://js.stripe.com/v3/"></script>

Setup

1
<script src="https://unpkg.com/@payment-kit-js/vanilla/dist/cdn/paymentkit.min.js"></script>
2
<script>
3
  const paymentKit = PaymentKit.default({
4
    environment: 'production',
5
    secureToken: 'your_secure_token',
6
    paymentMethods: [PaymentKit.PaymentMethods.googlePay]
7
  });
8
</script>

Choose the wallet processor

By default the SDK auto-selects your account’s Google Pay express-checkout processor. If you have more than one account (Stripe or Airwallex) and want a specific one to handle Google Pay, pass processorIds when you construct PaymentKit — a map of payment method to processor id. The SDK then mints and charges Google Pay on the exact account you name (Stripe PaymentMethods are account-scoped, so mint and charge must stay on the same account — this keeps them aligned).

Pass ids only; the processor family (Stripe/Airwallex) is resolved from your account. Apple Pay and Google Pay are set independently — use the googlePay key here:

1
import PaymentKit from '@payment-kit-js/vanilla';
2
import GooglePayPaymentMethod from '@payment-kit-js/vanilla/payment-methods/google-pay';
3
4
const paymentKit = PaymentKit({
5
  environment: 'production',
6
  secureToken: 'your_secure_token',
7
  paymentMethods: [GooglePayPaymentMethod],
8
  processorIds: {
9
    googlePay: 'proc_prod_1e769fc8bf77493c', // EU account
10
  },
11
});

processorIds is read once, when PaymentKit is constructed, and applies for that instance’s lifetime. To steer Google Pay per checkout — e.g. the EU account for EU shoppers, the US account for US shoppers — compute the id and pass it when you initialize PaymentKit for that session. A single instance reused across checkouts keeps its original value until you re-init.

1
const paymentKit = PaymentKit({
2
  environment: 'production',
3
  secureToken: 'your_secure_token',
4
  paymentMethods: [GooglePayPaymentMethod],
5
  processorIds: {
6
    googlePay: isEuShopper
7
      ? 'proc_prod_1e769fc8bf77493c'  // EU account
8
      : 'proc_prod_53cd0b7dbdc4449e', // US account
9
  },
10
});

Show the express button

The SDK checks Google Pay availability automatically when it initializes. Use onGooglePayReady to show or hide your express button, and notifyAmountChanged to re-prepare whenever the amount changes.

React to readiness

Register a callback with onGooglePayReady. It fires immediately with the current state, then again on every change. Register as many callbacks as you need — none are overwritten.

1
paymentKit.google_pay.onGooglePayReady((isReady) => {
2
  googlePayButton.hidden = !isReady;
3
});

While the SDK is re-preparing (see below), it reports isReady: false, then true again once it’s ready — so the same callback naturally hides the button during the gap.

Re-prepare after the amount changes

Whenever the cart total changes — a coupon is applied, quantity is updated, shipping is added — call notifyAmountChanged() so the SDK clears the stale session and prepares a fresh one with the new amount. It returns a promise that resolves once Google Pay is ready again.

1
await paymentKit.google_pay.notifyAmountChanged();

Your onGooglePayReady callback fires across the re-prepare (false while in flight, then true), so the button hides and reappears on its own. Calling it again while a prepare is already running coalesces the calls — the promise resolves once the latest prepare completes.

Submit payment

Attach submit to the same button you reveal with onGooglePayReady. In the auto-prepare flow the SDK fills the processor from the checkout session, and Google Pay collects the payer’s details from the sheet — so you don’t pass processorId.

1
googlePayButton.addEventListener('click', () => {
2
  paymentKit.submit({
3
    fields: {},
4
    paymentMethod: 'google_pay',
5
    options: {
6
      customerInfo: {
7
        first_name: 'Jane',
8
        last_name: 'Smith'
9
      }
10
    },
11
    onSuccess: (result) => {
12
      console.log('Transaction ID:', result.id);
13
      console.log('Checkout Session:', result.checkoutSessionId);
14
      window.location.href = '/success';
15
    },
16
    onError: (errors) => {
17
      if (errors.google_pay === 'Google Pay not available on this device') {
18
        // Hide button, show card form instead
19
      }
20
    }
21
  });
22
});

Options

Browser support

Google Pay works on:

• Chrome 61+ on Android devices (with a card saved to Google Pay)
• Chrome 61+ on desktop (with a card saved to Google Pay)
• Microsoft Edge on desktop (with a card saved to Google Pay)

Error handling