Payment Request replaces a checkout form with a browser sheet filled from the user's wallet; show() returns a PaymentResponse for your processor and complete() closes the sheet. Methods are URLs such as https://google.com/pay 1 or https://apple.com/apple-pay 10 (Safari 10 's only one); basic-card was removed in Chrome 100 1 . Support is Limited: Chromium 4,389 and Safari.
const details = { total: { label: 'Donation', amount: { currency: 'USD', value: '65.00' } } };
const methods = ['basic-card', 'https://google.com/pay'].map((id) => ({ supportedMethods: id }));
for (const m of methods) {
console.log(m.supportedMethods, await new PaymentRequest([m], details).canMakePayment());
}
payButton.onclick = async () => { // show() needs a click, and real wallets need real data
const response = await new PaymentRequest([methods[1]], details).show();
const charged = await fetch('/charge', { method: 'POST', body: JSON.stringify(response) });
await response.complete(charged.ok ? 'success' : 'fail');
};Output
basic-card false https://google.com/pay true
canMakePayment() means the browser handles a method, not that the user has a card. Wallets need their own data, so most shops embed a processor component such as Stripe 238 's Express Checkout Element.