# Payment Request API

The Payment Request API provides a consistent user experience for payments on the web. It allows the browser to act as an intermediary between the merchant, the user, and the payment method (like Apple Pay, Google Pay, or stored cards).

## 1. The Concept

Instead of every website building its own checkout form, the Payment Request API delegates this to the browser. The browser displays a native UI where the user can select their saved payment details, shipping address, and contact info.

## 2. Basic Structure

The process involves creating a `PaymentRequest` object, showing the UI, and handling the result.

### Step 1: Define Payment Methods
This is where you specify supported methods.
*Note: The `basic-card` method (raw credit card entry) has been deprecated in many browsers. This API is now primarily used as the underlying mechanism for Google Pay, Apple Pay, and Samsung Pay.*

```javascript
const supportedInstruments = [
  {
    supportedMethods: 'https://google.com/pay',
    data: {
      // Google Pay specific configuration
      environment: 'TEST',
      apiVersion: 2,
      apiVersionMinor: 0,
      merchantInfo: {
        merchantName: 'Example Merchant'
      },
      allowedPaymentMethods: [/* ... */]
    }
  }
];
```

### Step 2: Define Payment Details
Define the total amount and line items.

```javascript
const details = {
  displayItems: [
    {
      label: 'Original T-Shirt',
      amount: { currency: 'USD', value: '25.00' }
    }
  ],
  total: {
    label: 'Total',
    amount: { currency: 'USD', value: '25.00' }
  }
};
```

### Step 3: Create and Show Request

```javascript
// 1. Create the request
const request = new PaymentRequest(supportedInstruments, details);

// 2. Check if payment is possible
request.canMakePayment().then(result => {
  if (result) {
    // Show the payment button
  }
});

// 3. Show the UI (on button click)
async function onCheckout() {
  try {
    const paymentResponse = await request.show();
    
    // 4. Process payment with your backend
    // Send paymentResponse.details to your server
    console.log(paymentResponse.details);
    
    // 5. Complete the UI
    await paymentResponse.complete('success');
  } catch (err) {
    console.error('Payment cancelled or failed:', err);
  }
}
```

[[programming/javascript/vanilla/javascript]]
[[programming/javascript/vanilla/promises-async-await]]
[[programming/javascript/vanilla/events]]