Payment Request API Integration

Implementation of Payment Request API on Website

Payment Request API is browser standard allowing to invoke native payment dialog with cards saved in browser or system. On iOS Safari this is Apple Pay, on Chrome — Google Pay or saved cards from Google Chrome. User sees one dialog instead of card form — mobile conversion 20–40% higher than classic form.

When Applicable

Payment Request API works only over HTTPS. Supported in Chrome 61+, Safari 11.1+ (iOS), Edge 16+. Firefox only behind flag. For production need to check canMakePayment() before showing button — else appears where it doesn't work.

Basic Implementation

const paymentRequest = new PaymentRequest(
    [
        { supportedMethods: 'basic-card', data: { supportedNetworks: ['visa', 'mastercard'] } },
    ],
    {
        total: { label: 'Total', amount: { currency: 'RUB', value: '1500.00' } },
        displayItems: [
            { label: 'Product 1', amount: { currency: 'RUB', value: '1200.00' } },
            { label: 'Delivery',  amount: { currency: 'RUB', value: '300.00' } },
        ],
        shippingOptions: [
            {
                id: 'standard',
                label: 'Standard delivery (3–5 days)',
                amount: { currency: 'RUB', value: '300.00' },
                selected: true,
            },
        ],
    },
    { requestShipping: true, requestPayerEmail: true, requestPayerPhone: true }
);

// Check before showing button
const canPay = await paymentRequest.canMakePayment();
if (canPay) {
    document.getElementById('payment-request-btn').style.display = 'block';
}

Handling Response and Sending to Server

paymentRequest.addEventListener('paymentmethodchange', async (event) => {
    // Recalc cost on card change (e.g. corporate card)
    event.updateWith({ total: { label: 'Total', 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: 'Total', amount: { currency: 'RUB', value: newShipping.total } },
    });
});

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

    // Send data to server
    const result = await fetch('/api/checkout/payment-request', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            methodName: paymentResponse.methodName,
            details:    paymentResponse.details,     // card token
            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 — user closed dialog. Normal, don't show error.

Integration with Payment Gateways

Payment Request API returns tokenized card data — not card number plaintext. This token sent to gateway. Stripe has native integration via @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: 'Order #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 auto shows Apple Pay on iOS Safari, Google Pay on Android Chrome — one component, two providers.

Server-side

Server handler receives token (for basic-card — encrypted card data from browser, for Stripe — paymentMethod.id) and sends to gateway as regular card payment. Logic no different from standard card payment, only token source different.

Polyfill and Fallback

Payment Request API not supported everywhere. Implementation must always have classic form as fallback. "Quick pay" button appears only on canMakePayment() === true. For others — standard card entry form without changes.