Integrate Razorpay Payment Gateway in your React app
Step 1: Customers place an order on your website or app
A customer visits your website or app, selects items they want to purchase and clicks the pay button to place an order. For each order placed by your customer, you create a transaction_id or checkout_id on your server for your reference. For example, #trn-345.
Step 2: You create an order from your server
For each order placed by your customer, use the Razorpay Orders API to create an order from your Server.
Razorpay processes the details sent and returns an order_id to you, for example, order_EKwxwAgItmmXdp. Map this order_id to the transaction_id #trn-345, you had created in the previous step. Know more about order states.
Step 3: Pass Order ID to checkout and collect payment details
Pass the order_id returned by Razorpay to your integration. This invokes the Razorpay Checkout, the client-side UI, which displays various payment methods and enables your customer to complete the payment. The payment details entered by the customer are secured and stored by Razorpay as tokens. The generated tokens are exchanged with your servers for further use.
Step 4: Bank authenticates the payment
Internally, Razorpay sends an authentication request to the customer’s bank. After authentication, Razorpay is authorized to deduct the amount from the customer’s bank account.
For successful payments, the Checkout returns the razorpay_order_id, razorpay_payment_id and razorpay_signature.
Know more about payment states.
Step 5: Capture the payment
Once your customer completes the payment and Razorpay authenticates it, you must capture the payment either automatically or manually. You can also verify the payment signature. This ensures that the payment is received from an authentic source. Know more about payment capture settings.
Step 6: Razorpay settles the amount
After the payment is successfully captured, the amount is settled to your account according to your settlement schedule. Know more about settlements.
About Orders – All about Razorpay Orders, their states and Dashboard actions.
Orders – Create, view and update an Order using Razorpay APIs.