Payment

This feature is not (yet) supported on your device

The Payment Request API provides a browser-based method to enable users to make payments on the web, using a credit card, Apple Pay or Google Pay for example.

Safari on iOS currently only supports Apple Pay.

Demo

const applePayButton = document.querySelector('#apple-pay-button'); const paymentButton = document.querySelector('#payment-button'); const applePayMethod = { supportedMethods: 'https://apple.com/apple-pay', data: { version: 3, merchantIdentifier: 'merchant.whatpwacando.today', merchantCapabilities: ['supports3DS', 'supportsCredit', 'supportsDebit'], supportedNetworks: ['amex', 'discover', 'masterCard', 'visa', 'maestro'], countryCode: 'US', }, }; const cardMethod = { supportedMethods: 'basic-card', data: { supportedNetworks: [ 'visa', 'mastercard' ] } }; const paymentDetails = { id: 'order-123', displayItems: [ { label: 'PWA Demo Payment', amount: {currency: 'USD', value: '0.01'} } ], total: { label: 'Total', amount: {currency: 'USD', value: '0.01'} } }; if(applePayButton) { applePayButton.addEventListener('click', async () => { const request = new PaymentRequest([applePayMethod], paymentDetails); const response = await request.show(); console.log(response); }); } if(paymentButton) { paymentButton.addEventListener('click', async () => { const request = new PaymentRequest([cardMethod], paymentDetails); const response = await request.show(); console.log(response); }); }

Documentation

Payment Request API on MDN

Browser support

Payment Request API on caniuse.com