Razorpay Client Checkout Integration

Razorpay is a popular payment gateway in India that enables businesses to accept payments through multiple payment methods, including credit cards, debit cards, UPI, net banking, and wallets.

Frappe provides a client-side checkout integration that simplifies the process of creating Razorpay orders, launching the payment window, and verifying successful transactions.

Integration Steps

1. Include the Checkout Script

Add the following script to your webpage:

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

This script loads the Razorpay Checkout library and provides a simplified wrapper around the Razorpay API.

2. Create the Order Controller

Implement a get_razorpay_order method in your server-side controller to generate a payment order.

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)

The controller prepares the payment details and creates a Razorpay order that will later be used during checkout.

3. Initialize the Checkout

Use the Frappe Checkout API to launch the Razorpay payment window from the client.

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>",
        "docname": "<REFERENCE DOCNAME>"
    };

    razorpay = new frappe.checkout.razorpay(options);

    razorpay.on_open = () => {
        // Runs when the checkout opens
    }

    razorpay.on_success = () => {
        // Runs after successful payment
    }

    razorpay.on_fail = () => {
        // Runs if payment fails
    }

    razorpay.init();
}

Payment Lifecycle

Step 1: Create an Order

Calling razorpay.init() sends a request to the server, which invokes the get_razorpay_order controller.

The controller:

• Determines the payment amount.
• Creates a unique receipt identifier.
• Calls the Razorpay payment gateway controller.
• Creates an Integration Request.
• Sends a request to the Razorpay Orders API.

The generated Razorpay Order ID is stored in the Integration Request for later verification.

Step 2: Process the Checkout

After the order is successfully created, the generated Order ID is returned to the client.

The checkout modal opens, allowing the customer to complete the payment.

When the transaction finishes:

• on_success is triggered for successful payments.
• on_fail is triggered if the payment fails.

The payment identifier returned by Razorpay is passed to the appropriate callback.

Step 3: Verify the Payment

After receiving the payment ID, Frappe stores the transaction details in the Integration Request.

The authorize_payment controller then verifies the payment with the Razorpay API.

If verification succeeds:

• The payment status is confirmed.
• The Integration Request is marked as Completed.
• The payment success hook of the reference DocType is executed.

Integration Flow Summary

1. Create a payment order on the server.
2. Launch the Razorpay Checkout window.
3. Complete the payment.
4. Receive the payment identifier.
5. Verify the payment with Razorpay.
6. Mark the Integration Request as completed and execute the success workflow.