2

💳 Choose payment method

📱 UPI
Google Pay
💳 Card
Or pay with:
📱 PhonePe
💛 Paytm
🔵 BHIM
3
🔒
Card payment rendered by Razorpay / Stripe SDK
This form is rendered entirely by the payment gateway's JavaScript SDK. Card details never pass through our servers — compliant with PCI DSS requirements.
[ Gateway-rendered card input form ]
PCI DSS · FR-64 3DS · FR-22 Idempotency · FR-21
4 5
3DS Flow (FR-22): For eligible card transactions, the payment gateway renders a 3DS authentication challenge in an overlay modal. Our platform shows a waiting spinner state and does not intercept the 3DS flow.
Idempotency Key (FR-21): Each payment initiation is assigned a unique idempotency key. If the user retries after a network failure, the same key is reused — preventing duplicate charges at the gateway level.
6

✅ Confirm before paying

Powered by Razorpay (India) / Stripe (Global) · No card data stored on our servers · SRS §8.4 FR-64
7

⚡ Payment Status States (all 3 states from FR-23)

(a) Initiated
Processing...

Full-screen spinner overlay shown. "Do not refresh this page." Pay Now button disabled. Booking ID assigned in pending state.
(b) Success
✅ Payment confirmed!

Green confirmation banner shown. Auto-redirect to SCR-10 (Booking Confirmation) after 2 seconds. Booking ID and OTP generated.
(c) Failed
❌ Payment failed

Red error with gateway message. "Retry Payment" button (same idempotency key reused). "Contact Support" link. User can try different method.
1
FR-85 Payment Entity Fields (Developer Annotation):
bookingId · gatewayRef · amount · status (initiated / success / failed / refunded) · timestamps (createdAt / updatedAt)
Logged at every state transition · SRS §9.1 FR-85

Order Summary Edit ←

🏪
Rajesh Storage Hub
📅 Jun 5 10:00 AM → Jun 7 6:00 PM IST
🎒 2 Regular + 1 Small · 2 days
2 Regular × 2 days × ₹120₹480
1 Small × 2 days × ₹80₹160
Platform fee (40%)₹256
GST (18%)₹115
Total₹1,011
BOOKING ID: PENDING #LSM-2026-XXXXXX
Refund Policy
✅ Full refund · Cancel before Jun 4, 10:00 AM IST
❌ No refund · Cancel after Jun 4, 10:00 AM IST
View full refund policy

Wireframe Annotations — SCR-09 · Payment Page

P
Persona: Guest (Completing Payment) — Has confirmed booking configuration at SCR-08. This is the final transactional step. Security, cost transparency, and trust signals are the highest priority on this screen. SRS §6.1 Guest Journey; §7.6
1
Order Summary Panel (Read-Only) — Listing / dates / bags / price breakdown from SCR-08. Read-only: "Edit" link routes back to SCR-08. Booking ID shown as "PENDING" until payment succeeds. Prevents last-minute surprises about the total. SRS §7.5 FR-15; §9.1 FR-84; FR-85
2
Payment Method Tabs — UPI / Google Pay / Card. Default tab by location: India defaults to UPI; global defaults to Card. Each tab shows the relevant gateway input. Gateway: Razorpay (India) or Stripe (international) per FR-20. SRS §7.6 FR-16; §9.2 FR-90
3
PCI-Compliant Gateway Widget — Card form rendered entirely by Razorpay/Stripe JavaScript SDK. Card data never passes through our servers. PCI DSS compliance guaranteed at gateway level. "Secured by [Gateway]" badge shown. SRS §7.6 FR-20; §8.4 FR-64
4
3DS Flow (Annotation — Backend) — For eligible card transactions: 3DS authentication challenge is rendered by the gateway in an overlay. Platform shows a waiting/spinner state and does not intercept the 3DS challenge flow. SRS §7.6 FR-22
5
Idempotency Key (Annotation — Backend) — Each payment initiation carries a unique idempotency key. Retry button on failure reuses the same key — prevents duplicate charges at the gateway level. Developer reference annotation. SRS §7.6 FR-21
6
T&C + Refund Policy Checkboxes — Two required checkboxes before Pay button: (a) Terms & Conditions; (b) Refund Policy acceptance (Full ≥24h / 0% <24h). Both must be ticked. SRS §7.6 FR-16; §7.10 FR-41; §9.4 FR-101
7
Payment Status States (All 3 from FR-23) — (a) Initiated: full-screen spinner, "Do not refresh" message; (b) Success: green banner, auto-redirect to SCR-10 in 2 seconds; (c) Failed: red error with gateway message, Retry button (same idempotency key), Contact Support link. SRS §7.6 FR-23
8
FR-85 Entity Field Annotation (Developer) — Payment entity fields logged at each state transition: bookingId / gatewayRef / amount / status (initiated/success/failed/refunded) / timestamps (createdAt/updatedAt). Backend reference annotation. SRS §9.1 FR-85