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.

Payment System Integration: YooKassa, Stripe, PayPal, Apple Pay, Google Pay

Conversion dropped by 12% immediately after the redesign. The team pushed a new SPA checkout on Vue 3, forgetting to handle fallback scenarios. Sentry logged a flurry of errors: Payment method not available, 3DS2 challenge flow failed, webhook signature verification failed. Users abandoned carts at the payment method selection stage. Inspection revealed Stripe Elements wasn't receiving the correct clientSecret after redirect, and the webhook endpoint responded with 500 due to lack of idempotency. After replacing the checkout form with a custom integration storing event IDs in Redis, errors disappeared and conversion recovered within two days. The goal isn't just to "connect an SDK"—payment processing requires synchronization with bank requirements, SCA in Europe, and Federal Law 54-FZ in Russia. Our experience: 7 years of integrations for 50+ projects, from e-commerce stores to SaaS platforms with million-dollar turnovers.

What's Included in Turnkey Work

• Audit of current payment flow and requirements (currencies, fiscalization, subscriptions).
• Provider selection based on geography and business model.
• Backend integration (Laravel/Node.js/Go) with webhook handling, idempotency, and retries.
• Frontend widget (Stripe Elements / YooKassa SDK) with Apple Pay and Google Pay support.
• Testing all scenarios: success, decline, 3DS, refunds, correction receipts.
• Monitoring of first transactions and documentation.

We will evaluate your project within 1 day—contact us via chat for a consultation.

Provider Comparison: Which to Choose

Stripe wins on flexibility: 135+ currencies vs. YooKassa's single currency. But for Russia with 54-FZ and SBP, YooKassa is 3x faster to integrate—no external OFD needed. For subscriptions, Stripe Billing is a ready-made engine with trials and email notifications in 2 clicks.

How to Choose the Right Provider?

Three key points. Where do your clients live? Only Russia → YooKassa; globally → Stripe. Do you need 54-FZ fiscalization? Yes → YooKassa; otherwise Stripe + cloud OFD. Do you plan subscriptions? Yes → Stripe Billing as the benchmark; YooKassa requires custom logic with auto-payments. Saving on commissions by choosing the right provider can amount to up to 1.5% of turnover. For a project with 2 million RUB per month, that's 360,000 RUB per year.

Where the Real Difficulties Lie

Setting up a test mode takes an hour. Properly handling all scenarios takes weeks.

Webhook reliability. A webhook may not arrive—server unavailable, timeout, network issues. The provider retries with exponential backoff (Stripe up to 3 days). The handler must be idempotent: if payment.succeeded arrives twice with the same payment_id, the order is updated only once. This is implemented by storing event IDs in Redis with a TTL.

3DS2 and redirect flow. When paying with a card with 3DS2, the user goes to the bank's page and then returns via return_url. During this time, the session may expire or the cart may be cleared. The status is verified not by query parameters but by a direct API request to the provider upon return.

Partial refunds and receipts. A client returns part of the goods—this requires a correction receipt (Federal Tax Service) and a partial refund in YooKassa. Stripe natively supports partial_refund. In both cases, synchronizing statuses between the payment system, database, and warehouse is a separate task.

Currency limitations. YooKassa only handles rubles. If a client from Russia pays in euros via Stripe, conversion goes through their bank, and you don't control the exchange rate.

Why Do Webhooks Require Idempotency?

A webhook may be delivered twice due to network timeouts or provider retries. Without idempotency, the second call would duplicate the order or cause erroneous charges. The solution is to store a unique event ID (e.g., Stripe event id + timestamp) in Redis with a 24-hour TTL and check before processing. If the ID already exists, return 200 without executing business logic. Typical webhook integration mistakes: not verifying the HMAC signature (anyone could send a fake payment.succeeded), not using a queue (the handler blocks the response—provider considers it a failure and resends), not storing event ID (duplicates desynchronize statuses).

How We Build the Integration

Architecture. We never store card data—only tokens from the provider. Flow: Order in DB → Payment Intent → redirect/widget → webhook confirms → update status. The source of truth is the status in the payment system.

For Laravel we use stripe/stripe-php or yookassa-sdk. Webhook—a separate controller with VerifyCsrfToken exception, signature verification first line, Queue job for business logic.

For Next.js/React—@stripe/stripe-js + @stripe/react-stripe-js. PaymentElement includes Apple/Google Pay automatically. Example:

const stripe = await stripePromise;
const { error } = await stripe.confirmPayment({
  elements,
  confirmParams: { return_url: 'https://example.com/order/thank-you' },
});

Testing. Stripe CLI: stripe listen --forward-to localhost:8000/webhook. Test cards for all scenarios (3DS, decline, insufficient funds). Cypress checkout flow test in CI—mandatory stability guarantee.

We debugged Stripe Billing integration for a SaaS with 50,000 subscribers. The issue was handling invoice.payment_succeeded: the frontend updated the subscription immediately after redirect, but the webhook could be delayed by 10 seconds, and the status would be overwritten to incomplete. Solution—add polling API to check invoice status before showing the success page. This reduced erroneous cancellations by 18%.

Process and Timeline

Audit → provider selection → backend → frontend → tests → deploy → monitoring.

Pricing is custom. Order integration and your checkout won't crash on the next update.

Links:

• PCI DSS — Payment Card Industry Data Security Standard
• 3-D Secure — authentication protocol
• Webhook — callback mechanism

We guarantee: 7 years of experience, 50+ successful integrations. Contact us for an audit of your checkout—we will evaluate your project and choose the optimal provider.