Step-by-Step Developer Guide: Integrating Razorpay Client Checkout

Developers
1

Introduction

Welcome to this comprehensive, developer-centric guide on integrating Razorpay Client Checkout in Empress. Razorpay is a widely used payments solution in India, providing businesses with the ability to accept, process and disburse payments. This guide will delve into the depth of technical details, mirroring Apple’s sophistication in presentation, and providing an in-depth understanding of the backend functionality, code integration, and technical details of the Razorpay Client Checkout feature.

Razorpay Client Checkout: A Technical Rundown

At its core, Razorpay Client Checkout provides a seamless method for integrating diverse payment methods like Credit Cards, Debit Cards, and Netbanking. The feature focuses on simplifying the process of payment acceptance, processing, and disbursement, adding significant value to your business solutions.

Step 1: Incorporate the Checkout Script

The first step towards integrating the Razorpay Client Checkout is to incorporate the checkout script in your code. This is achieved by inserting the following script on your page:

<script type="text/javascript" src="/assets/js/checkout.min.js"></script>

The checkout script automatically fetches the Razorpay checkout script and wraps their API for some syntactic sugar.

Step 2: Establish the Order Controller in Your Backend

The next step involves creating the Order controller in your backend. Here is a code snippet demonstrating how this can be done:

def get_razorpay_order(self):
    controller = get_payment_gateway_controller("Razorpay")

    payment_details = {
        "amount": 30000,
        ...
        "reference_doctype": "Conference Participant",
        "reference_docname": self.name,
        ...
        "receipt": self.name
    }

    return controller.create_order(**payment_details)

Step 3: Initiate the Payment on the Client-side

The final step is to initiate the payment on the client-side by leveraging the Razorpay Checkout API, as illustrated in this code snippet:

function make_payment(ticket) {
    var options = {
        "name": "<CHECKOUT MODAL TITLE>",
        "description": "<CHECKOUT MODAL DESCRIPTION>",
        "image": "<CHECKOUT MODAL LOGO>",
        "prefill": {
            "name": "<CUSTOMER NAME>",
            "email": "<CUSTOMER EMAIL>",
            "contact": "<CUSTOMER PHONE>"
        },
        "theme": {
            "color": "<MODAL COLOR>"
        },
        "doctype": "<REFERENCE DOCTYPE>", // Mandatory
        "docname": "<REFERENCE DOCNAME" // Mandatory
    };

    razorpay = new frappe.checkout.razorpay(options)
    razorpay.on_open = () => {
        // SCRIPT TO RUN WHEN MODAL OPENS
    }
    razorpay.on_success = () => {
        // SCRIPT TO RUN ON PAYMENT SUCCESS
    }
    razorpay.on_fail = () => {
        // SCRIPT TO RUN ON PAYMENT FAILURE
    }
    razorpay.init() // Creates the order and opens the modal
}

Understanding the Lifecycle of Razorpay Client Checkout

  • The process begins with the creation of an order in your backend, triggered by razorpay.init(). This requires a get_razorpay_order controller for the doctype. The server method sets the amount to be charged and a unique receipt id for Razorpay APIs to consume.
  • Next, the checkout process takes place at the client-side. A successful creation of the order returns the order_id, which is then passed to the client to trigger the Razorpay modal. Depending on the status, the success or failure API method is invoked, and the payment ID is passed to it.
  • Lastly, the payment is verified. The transaction details are saved in the integration request. If successful, the authorize_payment controller is called, which verifies the payment status from Razorpay API using the Payment ID.

Conclusion

The Razorpay Client Checkout feature is a highly valuable tool for developers working on business solutions that require a seamless, reliable, and efficient payment processing mechanism. Understanding and effectively implementing this feature can significantly contribute to the development and customization of business solutions, providing a robust and versatile payments solution integration.