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.