{"id":1098,"date":"2018-10-16T14:37:25","date_gmt":"2018-10-16T09:07:25","guid":{"rendered":"https:\/\/rzpwp.blog\/?p=1098"},"modified":"2025-04-23T17:44:13","modified_gmt":"2025-04-23T12:14:13","slug":"checkout-page-design","status":"publish","type":"post","link":"https:\/\/razorpay.com\/blog\/checkout-page-design\/","title":{"rendered":"Razorpay Checkout: How We Design for Faster Payments"},"content":{"rendered":"

If there\u2019s something every Indian e-commerce shopper hates, it is complications at the final step of the purchase. A great user experience at the checkout stage is a problem that many payment players in the industry have been trying to solve, for a very long time. <\/span><\/p>\n

Why you ask?<\/em> Because the checkout is the final confirmation of your customer\u2019s intent. We know that CoD orders have a high chance of being cancelled. The aim for every e-commerce business should then be to nudge their customer towards making an online payment. <\/span><\/strong><\/strong><\/p>\n

Sales, offers, cash-backs \u2013 these are some ways of ensuring an online payment. A good checkout design, however, is still paramount.<\/span><\/strong><\/strong><\/p>\n

But it\u2019s not easy designing checkouts for the Indian e-commerce universe!<\/b><\/h3>\n

This is because of the unique characteristics of the Indian payments space. Hundreds of payment methods<\/a>, various modes of authentication<\/a>, the involvement of multiple entities, elaborate policies and regulations, users who are new to online shopping and are still discovering its nuances; and to top it all, slow internet speeds! <\/span><\/p>\n

Jokes aside, the Indian payments industry is as challenging as the Apollo mission was. E-wallets, for instance, are more than a decade old, and at last count, there were about 80 e-wallets in the country. Compare this to our next-door neighbour China where the wallet industry is primarily binary (AliPay and WeChat), and you get the difference!<\/span><\/p>\n

\"razorpay-checkout-design-blog-payments-simplified\"<\/p>\n

But here\u2019s the fact of the matter, as I see it. Digital payments are complex, yes. But, they should be complex for payment providers like us; Razorpay, and not for the end users. For someone looking to order their nightly grub, an online transaction should be as simple as wiping out the universe in the blink of an eye.<\/span><\/p>\n

At Razorpay, it has been the joy and pride of my team of designers and I, to work on simplifying the user journey from desire to purchase. This is what our hard work, <\/span>and design genius<\/em>, has achieved. \u00a0<\/span><\/p>\n

Razorpay Checkout: The Evolution of Simplified Online Payments<\/b><\/h2>\n

Razorpay Checkout is the magical form which converts your money into a late night dessert fix. Also, the form which helps you pay for that Ginger Chai on Chai Point, <\/span>within 30 seconds<\/span><\/i>. In essence, the checkout is a single line of Javascript code in the clients\u2019 website or app that has been simplifying payments for well over the last three years. <\/span><\/p>\n

In its first avatar, the form offered support for Card, NetBanking and Wallets, but did not have an option for EMI<\/a>, or to save cards. <\/span><\/p>\n

Its USP: <\/b>it would open up on the merchant\u2019s native website, without redirecting to another page. This lowered payment failure<\/a> rates by removing one hop in the process, and saved precious moments during checkout \u2013 and we all know how even a split-second delay can change a user\u2019s mind. <\/span><\/p><\/blockquote>\n

The \u2018Retry\u2019 button on our checkout was also aimed at reducing drop-offs. Unlike other payment gateways<\/a> at that time, the Razorpay gateway did not erase the data entered during checkout, and customers could retry a failed transaction with just the press of a button instead of re-entering every piece of information.<\/span><\/p>\n

This version quickly got old, though. And we went on to create newer versions with updated UI elements and the latest online payment modes.<\/span><\/p>\n

\"razorpay-checkout-design-evolution\"<\/p>\n

So, what\u2019s special about this?<\/b><\/h2>\n

Glad you asked! A checkout form looks really easy to design, but the devil – as always – lies in the details. Allow me to take you through a user\u2019s payment journey in detail, and explain how the Razorpay checkout makes every step easy for the customer.<\/span><\/p>\n

Step 1: The checkout form opens.<\/b><\/h3>\n

Think of this scenario. You’re on Chai Point. Everything is their dark green colour. Suddenly, you see a blue-coloured Razorpay checkout while paying. Odd, right?<\/em><\/p>\n

A customer picks their favourite products from an e-commerce website and is then directed to a new site for payment. This redirection on the checkout page creates confusion, lowers the customer\u2019s trust, and leads to drop-offs. The solution: a checkout form that opens natively on the website.<\/p><\/blockquote>\n

What if the checkout form looks closer to Chai Point\u2019s actual website? What if the design makes the user feel that the payment process is part of the website they are buying from? <\/span><\/p>\n

That’s exactly what the colour logic we devised in-house does. It takes the merchant’s colours, adds them to the checkout form, and makes sure everything looks and feels like one cohesive information flow. Since our form uses iFrame, it opens up within the website the user is on; without any redirects.<\/span><\/p>\n

\"razorpay-checkout-design-blog-colour-logic\"<\/p>\n

Step 2: Filling your payment details on our checkout form. <\/b><\/h3>\n

The first rule of good checkout design is: No One Likes to Fill Endless Details!<\/span> And Razorpay\u2019s intuitive checkout design handles multiple user touch points without ever making the experience feel overwhelming. <\/span><\/p>\n

So, while the user has a plethora of payment options to choose from, each of these options has its own UX tweaks to make the experience better. Let me explain these in detail here.<\/span><\/p>\n

Cards:<\/b> Making a payment online<\/a> via cards is simple, right? You fill in the card information, authenticate using an OTP or password and money is out of your pockets, right? <\/span><\/p>\n

Well, it sounds simple but when it comes to the experience, we have done a lot to make it much simpler than it usually is:<\/span><\/p>\n