Google Pay Integration: API, Tokenization, and Processing on Your Site

Google Pay Integration: API, Tokenization, and Processing on Your Site

Conversion drops at checkout? Users abandon their cart when faced with a 16-digit card number, expiration date, and CVV. Google Pay solves this: one click (or tap) and the payment is done. We've been integrating Google Pay into websites since the technology emerged. Over that time, we've delivered more than 50 projects for stores on WooCommerce, Laravel, React, and Next.js. A turnkey integration takes from 2 days.

Connecting Google Pay boosts conversion by 20–30% by reducing friction. Users with saved cards in Google Wallet pay instantly. For online store owners, this lowers the abandoned cart rate. Implementation requires understanding the API, tokenization, and compatibility with your payment gateway. Let's dive into how the Google Pay API works, what data the server receives, and how to process the token.

The Google Pay API documentation includes a JavaScript library that builds the payment token.

How the Flow Works

1. The site calls the Google Pay API → the browser shows a native popup with a card selection from Google Wallet.
2. The user confirms the payment (biometrics / PIN).
3. Google Pay returns encrypted paymentData.
4. The site sends paymentData to its own server.
5. The server forwards the token to the payment gateway for settlement.

Client-Side Integration

Include the JavaScript API:

<script async src="https://pay.google.com/gp/p/js/pay.js" onload="onGooglePayLoaded()"></script> 

Basic implementation:

const baseRequest = { apiVersion: 2, apiVersionMinor: 0, }; const allowedCardNetworks = ['MASTERCARD', 'VISA', 'MIR']; const allowedCardAuthMethods = ['PAN_ONLY', 'CRYPTOGRAM_3DS']; const baseCardPaymentMethod = { type: 'CARD', parameters: { allowedAuthMethods: allowedCardAuthMethods, allowedCardNetworks, }, }; // Tokenization via Stripe const tokenizationSpecification = { type: 'PAYMENT_GATEWAY', parameters: { gateway: 'stripe', 'stripe:version': '2023-10-16', 'stripe:publishableKey': STRIPE_PUBLIC_KEY, }, }; const cardPaymentMethod = { ...baseCardPaymentMethod, tokenizationSpecification, }; let paymentsClient; function getGooglePaymentsClient() { if (!paymentsClient) { paymentsClient = new google.payments.api.PaymentsClient({ environment: 'PRODUCTION', // or 'TEST' }); } return paymentsClient; } async function onGooglePayLoaded() { const client = getGooglePaymentsClient(); const { result } = await client.isReadyToPay({ ...baseRequest, allowedPaymentMethods: [baseCardPaymentMethod], }); if (result) { renderGooglePayButton(); } } function renderGooglePayButton() { const button = getGooglePaymentsClient().createButton({ onClick: onGooglePayButtonClicked, buttonType: 'buy', buttonColor: 'black', buttonSizeMode: 'fill', }); document.getElementById('gpay-container').appendChild(button); } async function onGooglePayButtonClicked() { const paymentDataRequest = { ...baseRequest, allowedPaymentMethods: [cardPaymentMethod], transactionInfo: { totalPriceStatus: 'FINAL', totalPrice: '14.99', currencyCode: 'USD', countryCode: 'US', }, merchantInfo: { merchantId: 'BCR2DN4TXXXXXXXX', // from Google Pay Business Console merchantName: 'My Store', }, }; try { const paymentData = await getGooglePaymentsClient().loadPaymentData(paymentDataRequest); await processPayment(paymentData); } catch (err) { if (err.statusCode !== 'CANCELED') { console.error('Google Pay error', err); } } } async function processPayment(paymentData) { const token = paymentData.paymentMethodData.tokenizationData.token; const response = await fetch('/api/payment/google-pay', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ token, orderId: currentOrderId }), }); const result = await response.json(); if (result.success) { window.location.href = '/payment/success'; } } 

Server-Side Token Processing via Stripe

public function processGooglePay(Request $request): JsonResponse { $token = $request->input('token'); $orderId = $request->input('orderId'); $order = Order::findOrFail($orderId); \Stripe\Stripe::setApiKey(config('services.stripe.secret')); try { $paymentIntent = \Stripe\PaymentIntent::create([ 'amount' => (int)($order->total * 100), 'currency' => 'usd', 'payment_method_data' => [ 'type' => 'card', 'card' => ['token' => json_decode($token)->id], ], 'confirm' => true, 'return_url' => 'https://example.com/payment/complete', 'metadata' => ['order_id' => $orderId], ]); if ($paymentIntent->status === 'succeeded') { $order->update(['status' => 'paid', 'transaction_id' => $paymentIntent->id]); return response()->json(['success' => true]); } } catch (\Stripe\Exception\CardException $e) { return response()->json(['success' => false, 'error' => $e->getMessage()]); } return response()->json(['success' => false]); } 

React Component with Google Pay

import { useEffect, useRef } from 'react'; declare const google: any; export function GooglePayButton({ amount, currency, onSuccess }: { amount: string; currency: string; onSuccess: () => void; }) { const containerRef = useRef<HTMLDivElement>(null); useEffect(() => { const script = document.createElement('script'); script.src = 'https://pay.google.com/gp/p/js/pay.js'; script.async = true; script.onload = initGooglePay; document.head.appendChild(script); return () => { document.head.removeChild(script); }; }, []); function initGooglePay() { const client = new google.payments.api.PaymentsClient({ environment: 'PRODUCTION' }); const btn = client.createButton({ onClick: () => handlePayment(client, amount, currency, onSuccess) }); containerRef.current?.appendChild(btn); } return <div ref={containerRef} />; } 

Registration in Google Pay Business Console

For production use, you need to:

1. Register your site in the Google Pay Business Console.
2. Pass the Integration Checklist.
3. Obtain a merchantId (format BCR2DN4T...).

In test mode (environment: 'TEST'), no merchantId is needed and no real charges occur. Test cards can be added to the Google Pay Sandbox. The review process with Google takes 1–3 business days.

Why Integrate Google Pay?

Google Pay does not require domain verification, works on Android and Windows. For stores with a high share of mobile traffic, this is critical. The token does not contain the card number — security is higher than storing BIN codes. Average payment time drops from 30 to 5 seconds. Compare: a card entry form takes at least 30 seconds, while Google Pay takes under 10. This boosts conversion by 20–30%.

How to Ensure Payment Security?

Google Pay returns an encrypted token that only your payment gateway can decrypt. No card data needs to be stored server-side. The integration is PCI DSS compliant when using a certified gateway.

Google Pay vs Apple Pay on the Web

Google Pay is weaker on iOS but covers a larger audience due to Android.

Integration Checklist

What the Work Includes

• Technical audit of your cart and payment stack
• Setup of Google Pay Business Console and acquisition of merchantId
• Development of the client side (button, API call, response handling)
• Integration with your payment gateway
• Server-side token processing and order status update
• Sandbox and production testing
• Documentation and instructions for your developer
• 30-day post-launch support warranty

Timelines and Cost

A basic integration takes 2–5 business days. The cost is calculated individually — contact us and we'll evaluate your project within a day.

Why Choose Us

We have been integrating payment systems for over 5 years, completed more than 50 projects, and work with Stripe, Adyen, Checkout.com. We provide a warranty on all work. Our engineers hold Google Pay certifications.

Get a consultation — reach out via Telegram or email.