DEV Community

Ethern Myth
Ethern Myth

Posted on

Payment Request API

This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature.


Payment Request API simplifies online payments by offering a standard browser interface for collecting payment details. It smoothens checkout processes, reduces manual input, and supports various payment methods, enhancing user experience and speeding up web transactions.

Additional Context

Usage example:

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Payment Request Example</title>
  <button id="buyButton">Buy Now</button>

    // Check if Payment Request API is supported
    if (window.PaymentRequest) {
      const supportedPaymentMethods = [
          supportedMethods: 'basic-card',
          data: {
            supportedNetworks: ['visa', 'mastercard'],
            supportedTypes: ['debit', 'credit']

      const paymentDetails = {
        total: {
          label: 'Total',
          amount: {
            currency: 'USD',
            value: '10.00'

      const options = {};

      // Create Payment Request object
      const paymentRequest = new PaymentRequest(supportedPaymentMethods, paymentDetails, options);

      // Handle buy button click event
      document.getElementById('buyButton').addEventListener('click', async () => {
        try {
          // Show payment request
          const paymentResponse = await;

          // Process payment response
          console.log('Payment method:', paymentResponse.methodName);
          console.log('Payment details:', paymentResponse.details);

          // Complete payment
          await paymentResponse.complete('success');
        } catch (error) {
          console.error('Payment failed:', error);
    } else {
      console.error('Payment Request API is not supported.');

Enter fullscreen mode Exit fullscreen mode

Top comments (0)