Lesson 23 / 30
Payment API
Collect payments with the Payment Request API using modern payment methods, and know its browser limitations.
Payment processing
The Payment Request API gives browsers a standard payment sheet. The legacy basic-card method was removed; use a payment handler or a provider such as Google Pay, Apple Pay or Stripe, and confirm on the server.
Request payment from user
Create a PaymentRequest with a supported method, then verify and charge on your server before completing.
// Use a real payment method identifier, e.g. Google Pay
const methods = [{
supportedMethods: 'https://google.com/pay',
data: { /* merchant config from your provider */ }
}];
const details = { total: { label: 'Total', amount: { currency: 'USD', value: '9.99' } } };
if ('PaymentRequest' in window) {
const pr = new PaymentRequest(methods, details);
const response = await pr.show();
// send response.details to your server to verify and charge
await response.complete('success');
}
Output:
Secure payment collection via system-integrated payment interface.