# Payment API — Progressive Web Apps

Source: https://www.geekswithgeeks.com/en/pwa/pwa-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.

```javascript
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.