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>

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