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

Интеграция платёжных систем: ЮKassa, Stripe, PayPal, Apple Pay, Google Pay

Конверсия упала на 12% сразу после редизайна. Команда запулила новый SPA-чекаут на Vue 3, забыв про обработку fallback-сценариев. Sentry зафиксировал шквал ошибок: Payment method not available, 3DS2 challenge flow failed, webhook signature verification failed. Пользователи бросали корзину на этапе выбора способа оплаты. Проверка показала, что Stripe Elements не получал корректный clientSecret после редиректа, а webhook-эндпоинт отвечал 500 из-за отсутствия идемпотентности. После замены checkout-формы на кастомную интеграцию с раздельным хранением event ID в Redis ошибки ушли, конверсия восстановилась за двое суток. Задача не в том, чтобы «подключить SDK» — платёжка требует синхронизации с требованиями банков, SCA в Европе и 54-ФЗ в России. Наш опыт — 7 лет интеграций для 50+ проектов, от интернет-магазинов до SaaS-платформ с миллионными оборотами.

Что входит в работу под ключ

• Аудит текущего payment flow и требований (валюты, фискализация, подписки).
• Выбор провайдера с учётом географии и бизнес-модели.
• Backend-интеграция (Laravel/Node.js/Go) с обработкой webhook'ов, идемпотентностью и ретраями.
• Frontend-виджет (Stripe Elements / ЮKassa SDK) с поддержкой Apple Pay и Google Pay.
• Тестирование всех сценариев: успех, отказ, 3DS, возвраты, чек коррекции.
• Мониторинг первых транзакций и документация.

Оценим проект за 1 день — для получения консультации напишите в чат.

Сравнение провайдеров: что выбрать

Stripe выигрывает по гибкости: 135+ валют против одной у ЮKassa. Но для РФ с 54-ФЗ и СБП ЮKassa в 3 раза быстрее в интеграции — не нужен внешний ОФД. Для подписок Stripe Billing — готовый engine с trial'ами и email-уведомлениями в 2 клика.

Как выбрать подходящего провайдера?

Ключевых точек три. Где живут ваши клиенты? Только РФ — ЮKassa, глобально — Stripe. Нужна ли фискализация по 54-ФЗ? Да — ЮKassa, иначе Stripe + облачный ОФД. Планируете ли подписки? Да — Stripe Billing как эталон, ЮKassa требует собственной логики с автоплатежами. Экономия на комиссиях при выборе правильного провайдера — до 1.5% с оборота. Для проекта с 2 млн ₽ в месяц это 360 000 ₽ в год.

Где прячутся реальные сложности

Подключить тестовый режим — час. Правильно обработать все сценарии — несколько недель.

Webhook надёжность. Webhook может не дойти — сервер недоступен, таймаут, сеть. Провайдер повторяет с экспоненциальным backoff (Stripe — до 3 дней). Обработчик обязан быть идемпотентным: если payment.succeeded придёт дважды с одним payment_id, заказ обновится только раз. Реализуется через хранение event ID в Redis с TTL.

3DS2 и redirect flow. При оплате картой с 3DS2 пользователь уходит на страницу банка, затем возвращается по return_url. За это время сессия могла истечь, корзина очиститься. Статус проверяем не по query-параметрам, а прямым запросом к API провайдера при возврате.

Частичные возвраты и чеки. Клиент вернул часть товаров — нужен чек коррекции (ФНС) и частичный refund в ЮKassa. Stripe делает partial_refund нативно. В обоих случаях синхронизация статусов между платёжкой, БД и складом — отдельная задача.

Валютные ограничения. ЮKassa — только рубли. Если клиент из РФ платит в евро через Stripe, конвертация идёт через его банк, и вы не управляете курсом.

Почему webhook'и требуют идемпотентности?

Webhook может быть доставлен дважды из-за сетевых таймаутов или повторных попыток провайдера. Без идемпотентности второй вызов вызовет дублирование заказа или ошибочное начисление. Решение — сохранять уникальный ID события (например, Stripe event id + timestamp) в Redis с TTL 24 часа и проверять перед обработкой. Если ID уже существует — возвращаем 200, не выполняя бизнес-логику. Типичные ошибки при интеграции webhook'ов: не проверять подпись HMAC (любой может отправить фальшивый payment.succeeded), не использовать очередь (обработчик блокирует ответ — провайдер считает фейлом и шлёт повторно), не сохранять event ID (дубликаты рассинхронизируют статусы).

Как строим интеграцию

Архитектура. Никогда не храним данные карт — только токены провайдера. Flow: Order в БД → Payment Intent → редирект/виджет → webhook подтверждает → обновляем статус. База истины — статус в платёжной системе.

Для Laravel используем stripe/stripe-php или yookassa-sdk. Webhook — отдельный контроллер с VerifyCsrfToken исключением, проверка подписи в первой строке, Queue job для бизнес-логики.

Для Next.js/React — @stripe/stripe-js + @stripe/react-stripe-js. PaymentElement включает Apple/Google Pay автоматически. Пример:

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

Тестирование. Stripe CLI: stripe listen --forward-to localhost:8000/webhook. Тест-карты для всех сценариев (3DS, decline, insufficient funds). Cypress-тест checkout flow в CI — обязательная гарантия стабильности.

Мы отлаживали интеграцию Stripe Billing для SaaS с 50 000 подписчиков. Проблема возникла с обработкой invoice.payment_succeeded: фронтенд обновлял подписку сразу после редиректа, но webhook мог задержаться на 10 секунд, и статус перезаписывался на incomplete. Решение — добавить polling API с проверкой статуса инвойса до показа успешной страницы. Это снизило количество ошибочных отписок на 18%.

Процесс и сроки

Аудит → выбор провайдера → backend → frontend → тесты → деплой → мониторинг.

Стоимость рассчитывается индивидуально. Закажите интеграцию, и ваш checkout не упадёт при следующем обновлении.

Ссылки:

• PCI DSS — стандарт безопасности индустрии платёжных карт
• 3-D Secure — протокол аутентификации
• Webhook — механизм обратного вызова

Гарантируем: 7 лет опыта, 50+ успешных интеграций. Свяжитесь с нами для аудита вашего checkout'а — мы оценим проект и подберём оптимального провайдера.