Payment Request API
Hello everyone, it’s been long time from my last blog but the topic today is HOT or you can say TRENDING one. You won’t be able to find the use of web payment request api in many of the websites or in general in PWA apps as well. The reason being, it is under lot of development processes. so we can say the future of payments can/must be done via web payment request API.
On later half of the post you will find a nice example of implementing web payment request api
So lets get started, the very first question is What is web payment request api?
The Payment Request API is a new W3C web standard being introduced to make payments easier on a merchant website. It is inbuilt in browsers and It replaces the traditional billing address, shipping address and credit card forms with a browser dialog to efficiently get data from the user to the merchant.
It can be quite frustrating to mobile users in eCommerce to fill up billing, shipping and so many required details to purchase a product.
Although there is no drawback in the current flow but as time passes we build better solutions for the problems. So there is enough of the article now, lets get started in coding.
<html>
<title>Web Payment Request Api</title>
<style>
.button{
font-size: 18px;
background-color: #2149f3;
padding: 10px 25px;
border: none;
color: #fff;
font-weight: 700;
text-transform: uppercase;
margin: 20px 10px;
cursor: pointer;
}
i{
display: block;
margin-left: 10px;
}
a{
/* text-decoration: none;
color: #000000; */
}
</style>
<body>
<button class="button" onclick="processPayment();">Buy Now</button>
<i>Click on buy now button to process payment via web payment request api</i>
<i>Check our Progressive web application for<a href="https://pwa-wc.webkul.com/pwa-for-woocommerce/" target="_blank" rel="noopener noreferrer">
WooCommerce</a></i>
<script>
function processPayment() {
if (window.PaymentRequest) {
console.log("Yep, we can go ahead! Our code goes here.");
const creditCardPaymentMethod = {
supportedMethods: 'basic-card',
data: {
supportedNetworks: ['visa', 'mastercard', 'amex'],
supportedTypes: ['credit', 'debit'],
},
};
const supportedPaymentMethods = [creditCardPaymentMethod];
const allDisplayItems = [{
label: 'Subtotal',
amount: {
currency: 'USD',
value: 101.00,
},
}, {
label: 'Discount (10%)',
amount: {
currency: 'USD',
value: -1,
},
}, {
label: 'Tax',
amount: {
currency: 'USD',
value: 0.68,
},
}, ];
const paymentDetails = {
total: {
label: "Total",
amount: {
currency: "USD",
value: 100.68
}
},
displayItems: allDisplayItems,
};
const options = {
requestPayerName: true,
requestPayerPhone: true,
requestPayerEmail: true
};
const paymentRequest = new PaymentRequest(
supportedPaymentMethods, paymentDetails, options
);
paymentRequest.show().then((paymentResponse) => {
console.log(paymentResponse);
return paymentResponse.complete().then(() => {
// Get the payment details from paymentResponse object.
// Process payment
});;
}).catch((error) => {
console.log("Payment Request API error: ", error);
});
} else {
// Fallback to traditional checkout
let otherUrl = ''; // general site url for checkout
console.log("No support. Proceed the old school way");
window.location.href = otherUrl;
}
}
</script>
</body>
</html>
Check out the screenshots below
Note – Kindly check the browsers support for this feature, as only the updated browsers support this features right now. look at this beautiful resource for the requirements – https://caniuse.com/#search=payment%20request%20api
Surely we will implementing online payment gateways in future using web payment request api. there is this wonderful resource for depth details https://developers.google.com/web/fundamentals/payments/merchant-guide/deep-dive-into-payment-request
That’s all for today, we will see more of the topics in upcoming series
Have a good day ahead