Anuj.Kumar

Back to Main Page

End-to-End Payment Integration Flow

An interactive visualization of the process between a user, a backend, and Razorpay.

Filter by Phase:

1
👤 Browser
User fills form & clicks "Pay"
2
⚙️ Backend
Receives POST /api/create-order
3
⚙️ Backend
Sends Create Order API Call
4
💳 Razorpay
Returns { order_id }
5
⚙️ Backend
Creates 'pending' record in DB
6
👤 Browser
Receives { order_id }
7
👤 Browser
Initializes Razorpay Checkout
8
💳 Razorpay
User completes payment via Modal
9
💳 Razorpay
(Async) After payment, sends webhook
10
⚙️ Backend
Receives POST Webhook (event: 'order.paid')
11
⚙️ Backend
Verifies signature & updates DB record to 'completed'
12
👤 Browser
Redirected to /thank-you page, then polls for status
13
⚙️ Backend
Receives poll & returns final status
14
👤 Browser
Receives 'completed' status & displays "Payment Successful"

Contact

Anuj
Kumar

Full-stack
developer

Site

Handcrafted by ME /

Designed by Anuj /

Powered by NextJs