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 или на почту.