Реализация Payment Request API на сайте

Реализация Payment Request API на сайте

Payment Request API — браузерный стандарт, позволяющий вызвать нативный диалог оплаты с сохранёнными в браузере или в системе картами. На iOS Safari это Apple Pay, на Chrome — Google Pay или сохранённые карты из Google Chrome. Пользователь видит один диалог вместо формы с полями карты — конверсия на mobile выше на 20–40% по сравнению с классической формой.

Когда применимо

Payment Request API работает только по HTTPS. Поддерживается в Chrome 61+, Safari 11.1+ (iOS), Edge 16+. Firefox — только за флагом. Для продакшна нужно проверить canMakePayment() перед показом кнопки — иначе она появится там, где не работает.

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

const paymentRequest = new PaymentRequest(
    [
        { supportedMethods: 'basic-card', data: { supportedNetworks: ['visa', 'mastercard'] } },
    ],
    {
        total: { label: 'Итого', amount: { currency: 'RUB', value: '1500.00' } },
        displayItems: [
            { label: 'Товар 1', amount: { currency: 'RUB', value: '1200.00' } },
            { label: 'Доставка',  amount: { currency: 'RUB', value: '300.00' } },
        ],
        shippingOptions: [
            {
                id: 'standard',
                label: 'Стандартная доставка (3–5 дней)',
                amount: { currency: 'RUB', value: '300.00' },
                selected: true,
            },
        ],
    },
    { requestShipping: true, requestPayerEmail: true, requestPayerPhone: true }
);

// Проверка перед показом кнопки
const canPay = await paymentRequest.canMakePayment();
if (canPay) {
    document.getElementById('payment-request-btn').style.display = 'block';
}

Обработка ответа и отправка на сервер

paymentRequest.addEventListener('paymentmethodchange', async (event) => {
    // Пересчёт стоимости при смене карты (например, при корпоративной карте)
    event.updateWith({ total: { label: 'Итого', amount: { currency: 'RUB', value: '1500.00' } } });
});

paymentRequest.addEventListener('shippingaddresschange', async (event) => {
    const address = event.target.shippingAddress;
    const newShipping = await fetchShippingCost(address);
    event.updateWith({
        shippingOptions: newShipping.options,
        total: { label: 'Итого', amount: { currency: 'RUB', value: newShipping.total } },
    });
});

try {
    const paymentResponse = await paymentRequest.show();

    // Отправить данные на сервер
    const result = await fetch('/api/checkout/payment-request', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            methodName: paymentResponse.methodName,
            details:    paymentResponse.details,     // токен карты
            shippingAddress: paymentResponse.shippingAddress,
            payerEmail: paymentResponse.payerEmail,
            payerPhone: paymentResponse.payerPhone,
        }),
    });

    const data = await result.json();

    if (data.success) {
        await paymentResponse.complete('success');
        window.location.href = `/orders/${data.orderId}/confirmation`;
    } else {
        await paymentResponse.complete('fail');
        showError(data.message);
    }
} catch (e) {
    if (e.name !== 'AbortError') {
        console.error('Payment failed', e);
    }
}

AbortError — пользователь закрыл диалог. Это нормально, не нужно показывать ошибку.

Интеграция с платёжными шлюзами

Payment Request API возвращает токенизированные данные карты — не номер карты в открытом виде. Этот токен нужно передать в платёжный шлюз. Stripe имеет нативную интеграцию через @stripe/stripe-js:

import { loadStripe } from '@stripe/stripe-js';

const stripe = await loadStripe(STRIPE_PUBLIC_KEY);
const { paymentRequest, elements } = stripe.paymentRequest({
    country: 'RU',
    currency: 'rub',
    total: { label: 'Заказ #123', amount: 150000 },
    requestPayerName: true,
    requestPayerEmail: true,
});

const prButton = elements.create('paymentRequestButton', { paymentRequest });
const canUse = await paymentRequest.canMakePayment();
if (canUse) {
    prButton.mount('#payment-request-button');
}

paymentRequest.on('paymentmethod', async (ev) => {
    const { error } = await stripe.confirmCardPayment(clientSecret, {
        payment_method: ev.paymentMethod.id,
    });
    ev.complete(error ? 'fail' : 'success');
});

Stripe Payment Request Button автоматически показывает Apple Pay на iOS Safari, Google Pay на Android Chrome — один компонент, два провайдера.

Серверная часть

На сервере обработчик получает токен (для basic-card — зашифрованные данные карты от браузера, для Stripe — paymentMethod.id) и передаёт в шлюз как обычный платёж. Логика ничем не отличается от стандартного платежа картой, только источник токена другой.

Полифилл и fallback

Payment Request API не поддерживается во всех браузерах. Реализация должна всегда иметь классическую форму как fallback. Кнопка «Оплатить быстро» появляется только при canMakePayment() === true. Для остальных — стандартная форма ввода карты без изменений.