Інтеграція Google Pay на сайт: API, токенізація, обробка

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

Конверсія падає на етапі оплати? Користувачі кидають кошик, коли бачать форму з 16-значним номером картки, терміном дії та CVV. Google Pay вирішує цю проблему: один клік (або дотик) — і платіж здійснено. Ми інтегруємо Google Pay у сайти з моменту появи технології. За цей час реалізували понад 50 проєктів для магазинів на WooCommerce, Laravel, React та Next.js. Інтеграція під ключ займає від 2 днів.

Підключення Google Pay підвищує конверсію на 20–30% за рахунок зменшення тертя. Користувачі зі збереженими картками в Google Wallet оплачують миттєво. Для власників інтернет-магазинів це знижує відсоток покинутих кошиків. Реалізація потребує розуміння API, токенізації та сумісності з платіжним шлюзом. Розберемо, як працює Google Pay API, які дані отримує сервер і як обробляти токен.

Google Pay API documentation включає JavaScript-бібліотеку, яка формує платіжний токен.

Як працює флоу

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

Клієнтська інтеграція

Підключення JavaScript 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 робочих дні.

Чому варто інтегрувати Google Pay?

Google Pay не вимагає верифікації домену, працює на Android та Windows. Для магазинів з високою часткою мобільного трафіку це критично. Токен не містить номера картки — безпека вища, ніж при зберіганні BIN-кодів. Середній час оплати скорочується з 30 до 5 секунд. Порівняйте: форма введення картки займає щонайменше 30 секунд, а Google Pay — менше 10. Це підвищує конверсію на 20–30%.

Як забезпечити безпеку платежів?

Google Pay передає зашифрований токен, який може розшифрувати тільки ваш платіжний шлюз. На серверній стороні не потрібно зберігати дані карток. Інтеграція відповідає PCI DSS при використанні сертифікованого шлюзу.

Порівняння Google Pay та Apple Pay на сайті

Google Pay програє на iOS, але охоплює більшу аудиторію завдяки Android.

Чек-лист інтеграції Google Pay

Що входить в роботу

• Технічний аудит вашого кошика та платіжного стеку
• Налаштування Google Pay Business Console та отримання merchantId
• Розробка клієнтської частини (кнопка, виклик API, обробка відповіді)
• Інтеграція з вашим платіжним шлюзом
• Серверна обробка токена та оновлення статусу замовлення
• Тестування в Sandbox та production
• Документація та інструкція для вашого розробника
• Гарантійна підтримка 30 днів після запуску

Терміни та вартість

Базова інтеграція займає 2–5 робочих днів. Вартість розраховується індивідуально — зв'яжіться з нами, ми оцінимо ваш проєкт протягом дня.

Чому обирають нас

Ми займаємося інтеграцією платіжних систем понад 5 років, реалізували більше 50 проєктів, працюємо з Stripe, Adyen, Checkout.com. Надаємо гарантію на всі роботи. Наші інженери мають сертифікати Google Pay.

Отримайте консультацію — напишіть нам у Telegram або на пошту.