What is Payment Request API in WEB API?

The Payment Request API provides a consistent user experience for both merchants and users. The Payment Request API provides a way to select a payment method for goods and services to a payment gateway. This API provides a consistent way to provide payment details to different merchants without the user inputting the details over and over again.

It provides information to the merchant, such as billing address, shipping address, card details, etc.

Note: This API doesn’t bring a new payment method to the table, but rather provides user payment details.

Let’s see a demo on how we can use the Payment Request API to accept a credit card payment:

<body>
    <header>
        <h2>Web APIs<h2>
    </header>
    <div>

        <div>
            <div>
                Demo - Credit Card Payment
            </div>
            <div>
                <div id="error"></div>
                <div>
                    <button onclick="buy()">Buy</button>
                </div>

            </div>
        </div>

    </div>
</body>

<script>
    const networks = ["visa", "amex"]
    const types = ["debit", "credit"]

    const supportedInstruments = [
        {
            supportedMethods: "basic-card",
            data: {
                supportedNetworks: networks,
                supportedTypes: types
            }
        }
    ]

    const details = {
        total: {
            label: "Total",
            amount: {
                currency: "USD",
                value: "100"
            }
        },
        displayItems: [
            {
                label: "Item 1",
                amount: {
                    currency: "USD",
                    value: "50"
                }
            },
            {
                label: "Item 2",
                amount: {
                    currency: "USD",
                    value: "50"
                }
            },
        ]
    }

    try {
        var paymentRequest = new PaymentRequest(supportedInstruments,details)
    } catch(e) {
        error.innerHTML = "PaymentRequest API not supported in this device."
        error.classList.remove("close")
    }

    function buy() {
        paymentRequest.show().then(response => {
            log(instrument)
        })
    }
</script>

  • networks, types, and supportedTypes all describe the method of payment.

  • details lists our purchases and the total cost.

  • Now, instantiate PaymentRequest with supportedTypes and the details passed to the PaymentRequest constructor.

  • paymentRequest.show() displays the browser payment UI. Then, we handle the data that the user provides when the promise is resolved.

There are many configurations for payment with the Payment API, and hopefully, the example above clarifies how the Payment Request API is used and how it works.

Free Resources

Attributions:
  1. undefined by undefined