Start the transaction
The loader creates the payment from the booking on the server. The amount can't be changed in the browser.
Try it in checkout →
Lumen Bay · Seaside hotel
Stay by the sea. Pay with certainty.
A working demo of the 3-D Secure payment loader, running inside a hotel booking site. Book a room, pass the bank's OTP check, and watch the reservation update the moment the bank answers.
Your requirements, working
Every point from your post, live on this page.
Each requirement below links to the part of the demo where you can try it yourself. Nothing here is a mock-up screenshot. It all runs.
Bank challenge and OTP
The guest is sent to the bank's 3-D Secure page, receives an OTP by SMS and confirms. The loader captures the bank's result.
Open the bank page →Every outcome handled
Success, wrong OTP, expired OTP, cancellation, decline and gateway timeout. Each has its own screen and rule.
Pick a test scenario →Retry or abort by the gateway's rules
Up to 3 attempts per booking. After that, or when the room hold ends, the loader stops and releases the room.
See the attempt counter →Booking updates instantly
The status goes back to the booking engine as soon as it's verified. The front desk table updates live.
Watch the front desk →Secure, stable, clean errors
Signed notifications, server-side checks, duplicate protection and clear messages. Verified by 8 automatic tests.
Run the tests →
The hotel
Built for long evenings by the water.
Lumen Bay is a fictional seaside hotel made for this demo, so the payment flow can be shown inside a real-looking booking site.
Step 1 · Choose a room
Three rooms, one quiet coastline.
Choose any room to start a booking. It's saved as Pending payment and held for 10 minutes while the guest pays.
How the loader works
One payment, six frames.
The full 3-D Secure flow, frame by frame. Scroll to move through it. The demo below runs exactly this sequence.
The guest books
The booking is saved as pending and the room is held for 10 minutes.
POST /loader/payments
booking: "LB-24817"
amount: from server
idempotency_key: "9f2c…"
201 Created · TXN-58C1
booking: "LB-24817"
amount: from server
idempotency_key: "9f2c…"
201 Created · TXN-58C1
The payment starts
The loader creates the transaction with the gateway, using the booking amount saved on the server.
482913
The bank asks for the OTP
The guest types the code on the bank's secure page. The hotel never sees it.
WEBHOOK payment.authorised
signature: HMAC-SHA256 ✓ valid
GET /gateway/txn/58C1
status: AUTHORISED · eci: 05
signature: HMAC-SHA256 ✓ valid
GET /gateway/txn/58C1
status: AUTHORISED · eci: 05
The gateway confirms
The loader checks the signature, then asks the gateway API for the final status.
Pending payment↓Confirmed
The booking updates
Payment and reservation are saved together, once, in real time.
The guest arrives
Paid, confirmed and expected at the front desk.
Security by layers
Three layers between a card and your hotel.
- Card details stay with the gatewayTyped into the gateway's hosted fields. Your server never receives the card number or CVV.
- The OTP stays with the bank3-D Secure runs on the bank's page. The loader only receives the result.
- Every answer is verified twiceSigned notifications are checked, then the final status is fetched from the gateway API.
- No double charges, no double bookingsIdempotency keys and a strict status engine. A repeated signal is ignored.
Card details never touch the hotel's servers. The OTP never leaves the bank.How every payment in this demo works
The live demo
Pay securely, and watch the loader work.
On the left is what the guest sees. On the right is what the loader does behind the scenes, step by step, as it happens.
01Guest details
02Payment
03Bank check
04Result
Who's staying?
The booking is created as soon as you continue. Example details are filled in for the demo.
Payment
Choose a sandbox scenario. Each one fills in a test card that makes the bank or gateway respond a certain way.
Test scenarioAttempt 1 of 3
Visa
•••• •••• •••• ••••
Card holderSARA HADDAD
Expires12/29
•••
Sandbox card. Only test numbers are accepted.In production these fields come from your gateway. Card data never reaches the hotel's server.
Front desk view
Your staff see the truth, live.
Every payment from the demo above lands here instantly with its real status. Refunds and export are part of Option 2
Collected$0
Confirmed0
Pending0
Failed or released0
| Booking | Guest | Room | Amount | 3-D Secure | Payment | Booking | Time | Action |
|---|
Rows marked "example" are sample data. Your demo payments appear at the top.
Quality check
Eight scenarios, tested on every build.
These tests run the same status engine the checkout uses. Press run to watch each one pass.
0 / 8scenarios passed
Sandbox test suite