Forem

Cover image for Razorpay Payment Flow (One-Time) Payment
Vijay Kumar
Vijay Kumar

Posted on

Razorpay Payment Flow (One-Time) Payment

#razorpay #shopify #react #node

Hello Everyone

Today we will understand the Razorpay Payment flow step by step clearly .

When we click on pay now button the execution starts as

Step -1 (Razorpay order creation)

First of all we have to create order in razorpay before making a payment because each payment in razorpay is tied to an order.

var instance = new Razorpay({ key_id: 'YOUR_KEY_ID', key_secret: 'YOUR_SECRET' })

const order=instance.orders.create({
  amount: 50000,
  currency: "<currency>",
  receipt: "receipt#1",
  notes: {
    key1: "value3",
    key2: "value2"
  }
})
return {order,key_secret}
Enter fullscreen mode Exit fullscreen mode

Step-2 (FRontend recieves order details and key_secret)

Frontend will recieves order details and key_secret and pass these details to razorpay checkout ,because these details like key_secret and order.id and amount will tells the razorpay, for which merchant for which order.id and for what amount this current payment are.

var options = {
    key: "rzp_test_xxxxx",        // Your Razorpay Key ID
    amount: 50000,                // Amount in paise
    currency: "INR",
    name: "Your Company Name",
    description: "Test Transaction",
    order_id: "order_ABC123",     // From backend

    handler: function (response) {
        // Runs after successful payment
        console.log(response.razorpay_payment_id);
        console.log(response.razorpay_order_id);
        console.log(response.razorpay_signature);
    },

    prefill: {
        name: "John Doe",
        email: "john@example.com",
        contact: "9999999999"
    },

    notes: {
        address: "Customer Address"
    },

    theme: {
        color: "#3399cc"
    }
};
var rzp = new Razorpay(options);
rzp.open();
Enter fullscreen mode Exit fullscreen mode

Step-3 (User make the payment)

User will make the payment and razorpay returns a response object with three fields to frontend which contains razorpay_id, razorpay_payment_id , razorpay_signature

{
  "razorpay_payment_id": "pay_29QQoUBi66xm2f",
  "razorpay_order_id": "order_9A33XWu170gUtm",
  "razorpay_signature": "generated_signature"
}
Enter fullscreen mode Exit fullscreen mode

Step-4 (We then pass these details to callback handler for verifiying the payment)

We then pass these details to our callback handler that will generate the signature with razorpay provided orderid and payment_id and then match the razorpay provided signature with generated signature if that matched payment is real otherwise fake payment.

 handler: function (response) {
        // Runs after successful payment
        console.log(response.razorpay_payment_id);
        console.log(response.razorpay_order_id);
        console.log(response.razorpay_signature);
    },
signature == HMAC_SHA256(order_id + "|" + payment_id, SECRET)
Enter fullscreen mode Exit fullscreen mode

Step- 5 (Create the webhook)

We will create a webhook in our razorpay dashboard for payment.capture event and when payment will be captured it will call our endpoint and we will mark the payment completed.

Thankyou

Top comments (0)