Реалізація 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. Для решти — стандартна форма введення карти без змін.