Seamless Payment Journey!

Published in

Engineering at Bajaj Health

8 min readApr 10, 2024

This is interesting journey of how we increased Pay-in success rate by more than 5% at Bajaj Finserv Health.

How you can also increase pay-in success rate in your platforms and spot increase in your revenue? — this is tried and tested way to improve this!

First thing first

What is a Payment Gateway?

Payment gateways are software that allow online stores to conduct electronic transactions for the business. They can be easily integrated into e-commerce websites and even m-commerce apps. The payment gateways also ease processing of online transactions between a business and its customers. They are the essential mediators that bring together customers and sellers who want to indulge in a business transaction through a mobile app or website. Payment gateways omit the need for direct interaction between the app and payment processors using encryption to ensure the secure processing of sensitive customer’s data. Most payment gateways are compatible with popular financial systems like Visa, MasterCard and American Express etc. These gateways are well equipped with the ability to verify user data with great accuracy. While payment gateway solutions ease the payment processing a great deal, they are an optional component of a mobile app. They need to be used for the security features they bring to the app which prevent frauds and extend the online payment functionalities.

Payment gateways are built in all shapes and sizes, and there are a wide variety of payment gateways to choose from, usually categorized between local and international payment gateways. This is to be expected as in the dynamic and ever-changing era of eCommerce, payment gateways and payment methods evolve at a rapid pace, and thus it is to the benefit of the discerning eCommerce merchant to keep abreast about such trends and developments.

How common man uses PG (Payment Gateways)?

User Journey:

All mobile apps that feature payment gateways depend on sturdy internet connectivity.

Step I: A user adds items/services to his e-cart which is linked to a payment gateway provider.

Step II: The user completes the purchase using the ‘Pay’ button, the app leads you to a page that requires some financial details.

Step III: The users are then required to fill in a bank account or card details.

Step IV: Once the user fills in the details and submits them, the gateway sends a request to the bank that issued the user’s credit or debit card.

Step V: The bank approves the payment request through the payment system after thorough analysis and verification. It sends back an approval code.

Step VI: After the transaction gets accepted by the system, an authorized code is sent by the bank issuer to the seller.

Step VII: Finally, all this lead to a debit on the customer’s account which is reflected as a credit on the seller’s account.

One such aspect of payment gateways that is important to bear in mind is the differences between hosted payment gateways and native payment gateways, and how their differences impact the eCommerce businesses.

Types of Payment Gateways

Hosted Payment Gateway
Native Payment Gateway

What is a Hosted (Redirected) Payment Gateway?

A hosted payment gateway is one that redirects the user to the payment service provider’s (PSP) page, and usually handles the entire transaction process along with the provision of enhanced security and data protection for a fee¹. They are known to be simple to set up and are maintenance-free due to the aforementioned fact that the PSP handles and controls the transaction process¹.

What is a Native Payment Gateway?

A native payment gateway, or non-hosted payment gateway, allows the user to complete the checkout process on the merchant’s own web page¹. Unlike with a hosted payment gateway, a native payment gateway grants the merchant full control over the entire transaction process and allows them to craft the customer experience as they see fit¹. This gives the merchant a much higher level of customer data tracking, allowing them to improve future marketing efforts¹.

Benefits and Drawbacks of Using Hosted Payment Gateways and Native Payment Gateways

Everyone has there pros and cons

Nothing is perfect and that applies to the realm of eCommerce. So, here are the benefits and drawbacks of both hosted and native payment gateways:

Integrate with Razorpay React Native Standard SDK to accept payments from customers on your app built using React Native. The React Native Standard SDK acts as a wrapper around the Razorpay Standard SDK to build a dynamic and responsive Checkout interface for your iOS or Android application.

Let’s compare

Hosted Payment Gateways

Pros

No Need to Handle Transactions: The PSP handles all of the burden in the transaction process, with some input from the merchant in customizing the UX.
Easy Setup and Maintenance-Free: Due to the fact that the PSP is responsible for the whole checkout process and also the maintenance of the payment gateway, setting up is not only simple, but technical knowledge is also not a requirement on the merchant’s part.

Cons

Limited Customisation: The merchant’s ability to shape the customer’s UX is often limited by any options provided by the PSP.
Fee Required: Since the PSP bears the burden of both processing transactions and maintaining the payment gateway, the merchant is required to pay a recurring fee to keep using the payment gateway.
Increased Risk: The merchant runs a heightened drop-off risk due to the fact that hosted payment gateways redirect buyers to a different page entirely to complete the checkout process.

Native Payment Gateways

Pros

Full Control over Checkout Process: The PSP handles all of the burden in the transaction process, with some input from the merchant in customizing the UX.
Total UX Customisation Freedom: Due to the fact that the PSP is not responsible here for the UX part of the checkout process, technical knowledge is required not just for the integration part but also the maintenance of the payment gateway.
Direct Access to Customer Data: Native payment gateways allow the merchant to have the greatest degree of control over their checkout process, and this includes tracking customer data. This allows them a much better opportunity to create future marketing efforts.

Cons

Merchant’s Responsibility: With great power, comes great responsibility. Total control over the customer UX and the checkout process also means that everything related to the payment gateway is the merchant’s responsibility along with the PG used, including the maintenance of the payment gateway.
Technical Skill Required: Some degree of technical skill and knowledge is required to make full use of the features that native payment gateways possess. This also means that if a merchant lacks either the skill or knowledge, they would have to resort to paying an expert to set it up for them.

Now that you know the differences between hosted and native payment gateways, you can now make a more informed decision in choosing between them that suits your business use-cases best.

After all this,

Why we Migrated to Native Payment Page?

Downtime Handling
To access installed UPI apps
Payment Failure Scenarios handling
Customised UI
More and relevant info on same page
Less steps for payment completion
Current journey is below for reference

Now moving to most important part

Integration

The native payment journey with Razorpay involves integrating the Razorpay Standard Checkout into your React Native application. Here are the steps to test if the integration was successful:

1. Make sure you have completed the prerequisites mentioned in the documentation. This includes signing up as a partner, completing KYC, getting the co-branded UI capability enabled, and registering your application on Razorpay.

2. Once you have completed the prerequisites, you can proceed with the integration. Follow the integration steps mentioned in the documentation to integrate the Razorpay Standard Checkout into your React Native application.

3. After integrating the Standard Checkout, you can test the payment flow by creating a test payment. Use the test API keys provided by Razorpay to initiate a payment and complete the payment flow.

4. During the payment flow, you can test various scenarios such as successful payments, failed payments, and cancelled payments to ensure that the integration is working correctly.

5. Monitor the payment status and verify that the payment is reflected correctly in your Razorpay Dashboard.

If you encounter any issues during the testing process, you can refer to the troubleshooting section in the documentation or reach out to the Razorpay support team for assistance.

For more detailed information on the test integration process, you can refer to the Razorpay React Native Integration documentation.

Once you have successfully tested the integration, you can proceed to the next steps mentioned in the documentation to go live with your application.

Please note that the provided information is based on the context of Razorpay’s React Native integration. If you have any specific questions or need further assistance, feel free to ask.

Code snippets

Use the Razorpay Payments API to fetch specific payment (the resource) details. The API response returns the payment state, including payment amount, currency, payment method and more. The representation of the state can be in a JSON format.

https://razorpay.com/docs/api/basics/

What we achieved?

The Native OTP feature in the Payment Gateway allows customers to enter their one-time passwords (OTPs) directly at the Checkout itself, without being redirected to the ACS page of their respective issuing banks. This feature offers several advantages:

1. Increased success rates: By allowing customers to enter OTPs directly at the Checkout, the Native OTP feature can increase success rates by up to 4%. This is because it eliminates the need for customers to navigate to external bank pages, reducing the chances of payment failures.

2. Reduced payment failures due to low internet speeds: In cases where customers have low internet speeds, redirecting them to external bank pages for OTP verification can result in payment failures. With the Native OTP feature, customers can enter OTPs directly at the Checkout, reducing the dependency on internet speed and minimizing payment failures.

3. Avoidance of failures due to redirects to bank pages: Redirecting customers to external bank pages for OTP verification can sometimes lead to failures, especially if there are any issues with the bank’s authentication system. By eliminating the need for redirects, the Native OTP feature helps avoid such failures and provides a smoother payment experience.

4. Consistent experience on mobile and web checkout: The Native OTP feature ensures a consistent experience for customers across both mobile and web checkout. Customers can enter OTPs directly at the Checkout, regardless of the device they are using, without being redirected to external bank pages.

Overall, the Native OTP feature in the Payment Gateway offers a convenient and seamless payment experience for customers, while also improving success rates and reducing payment failures.