Online payment has really grown tremendously, most especially in this part of the world (Nigeria, Africa), with the fast growth of the Fintech industry i.e improving the user experience of making payments, making it easier for us to spend our money. lol.
Well, payment already works right? But is it accessible?
It hurts to see some platforms requesting your card details with a mere input element with no accessible attribute assigned to it or security applied, like seriously! In fact putting accessibility aside (which you shouldn’t), it is not any better.
The purpose of this write up is to explain how you can handle payments from users efficiently, with a smooth user experience put into consideration. We first of all need to understand the process of how payment should be handled, looking at the image below
https://lh4.googleusercontent.com/MM4V9EnPqrUMFpnsboUXskqqCqLB_E8KI91roLGwKsHgJw1cBn4sgj3FBYXTPjARMkOvytBuE-FLMuFm7-SI54BOuY4doiqHYq9syshBTUlqZxJqCxSUrV2Ov9S73Mk3IclmEgL_
Users add items to their shopping cart on the merchant platform, then the user gets prompted to make payment by asking for their payment details (using an accessible payment handler). On collecting and confirming the payment details (handled easily by the PaymentRequest API), the merchant platform sends the payment details to their preferred Payment Service Provider (PSP) to charge the user's account. On getting response from the PSP, whether payment is successful or not, merchants would let users know the feedback of their payment attempt.
An example of the browser custom UI for accepting user payment details with an appropriate UX
An example of the browser custom UI for accepting user payment details with an appropriate UX
Understanding that payment process, now let’s implement that using the Web Payment Request API. The Payment Request API is meant to reduce the number of steps needed to complete a payment online, potentially doing away with checkout forms. It aims to make the checkout process easier, by remembering a user's details, which are then passed along to a merchant hopefully without an HTML form (🤮).
A payment request can be made with the code below:
const paymentRequest = new PaymentRequest(paymentMethods, paymentDetails, paymentOptions);