Razorpay - Fintech
Razorpay Checkout is a ready made, PCI compliant payment overlay that pops up on your site, lets customers choose from 100+ Indian payment methods (cards, UPI, wallets, EMI, Pay Later), and then hands you a signed success payload all without redirecting users or exposing you to card data.
My Role
UX Designer — Interaction Design, Visual Design, User Flows, Wireframing, User Research,
Timeline & Status
April 2022 to May 2022
Tools
Problem
Gift Card Flow for Razorpay Checkout
When Saregama wanted to let fans buy or redeem value gift cards without breaking Razorpay’s trusted checkout, I retro fitted a two step flow directly inside the gateway. I mapped the existing payment IA, found an unused side panel, and introduced:
Generate card – choose occasion ➜ optional name ➜ Generate Gift Card
Redeem card – enter 16 digit code ➜ Verify & Redeem
The solution respects Razorpay brand tokens, keeps the left hand price summary untouched, and adds zero extra clicks for non-gift-card users.
Result: frictionless upsell option and a unified post payment success web hook for engineering.
Solution
Occasion first personalisation
A chip switcher (Casual • Birthday • Anniversary) swaps pre-rendered card art, creating an emotional hook before payment.
Dual-path architecture
A new “Gift Card” item in the left nav reveals a segmented control that flips between Generate and Redeem states—one mental model, two clear outcomes.
Visual fidelity
I re-used Razorpay’s radius, colour tokens, and CTA hierarchy (solid primary, outline secondary) to avoid brand drift.
Robust states
Masked code input (1234-XXXXXX), real-time validation, and success messaging that re-uses Razorpay’s default receipt reduced engineering effort.
