Інтеграція платіжної системи Google Pay на сайт

Інтеграція Google Pay на веб-сайт

Google Pay на веб-сайті реалізується через Google Pay API (web) — JavaScript-бібліотеку, яка формує платіжний токен, обробляємий платіжним шлюзом. Підтримується в Chrome на Android та десктопі, у браузерах на основі Chromium. На відміну від Apple Pay, не вимагає верифікації домену.

Як працює потік

1. Сайт викликає Google Pay API → браузер показує нативний попап з вибором карти з Google Wallet
2. Користувач підтверджує платіж (біометрія / PIN)
3. Google Pay повертає зашифровані paymentData
4. Сайт відправляє paymentData на свій сервер
5. Сервер передає токен у платіжний шлюз для списання

Підключення Google Pay API

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

Базова реалізація

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,
  },
};

// Токенізація через 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', // або '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', // з Google Pay Business Console
      merchantName: 'Мій магазин',
    },
  };

  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';
  }
}

Серверна обробка токена через 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-компонент з 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} />;
}

Реєстрація в Google Pay Business Console

Для використання в production необхідно:

1. Зареєструвати сайт у Google Pay Business Console
2. Пройти перевірку інтеграції (Integration Checklist)
3. Отримати merchantId (формат BCR2DN4T...)

У тестовому режимі (environment: 'TEST') merchantId не потрібен, реальні списання не відбуваються. Тестові карти додаються у Google Pay Sandbox. Прохождення ревю від Google — 1–3 робочих дня.