Lesson 22 / 29

Payment API

Implement secure payment collection using the Web Payment API.

Payment processing

The Payment Request API standardizes payment collection across browsers. It supports credit cards, digital wallets, and other payment methods with user authentication.

Request payment from user

Use Payment Request API to collect payment securely.

const paymentMethods = [{ supportedMethods: 'basic-card' }];
const paymentDetails = {
  total: { label: 'Total', amount: { currency: 'USD', value: '9.99' } }
};

const pr = new PaymentRequest(paymentMethods, paymentDetails);
pr.show()
  .then(response => {
    console.log('Payment successful:', response);
    response.complete('success');
  })
  .catch(err => console.error('Payment failed:', err));

Output:

Secure payment collection via system-integrated payment interface.

Payment request best practices

Optimize payment flow for conversion while maintaining security.