Sapphire: 3D Card Checkout Page

Sapphire puts the customer's card at the heart of the payment step. A glossy sapphire-blue bank card sits beside a clean payment form and updates in real time as the shopper types their name, number and expiry. Focus the CVV and the card turns over to its signature strip; press Pay and the form fades away while the card slides to centre stage for a processing spinner and a hand-drawn success tick.

A card that reacts to every field

Cardholder name, card number and expiry date are mirrored onto the 3D card as they are typed. Focusing the CVV flips the card in 3D, and it flips back automatically once three digits are entered.

A calm, confident payment moment

A three-step progress header (Cart, Shipping, Payment), SSL and PCI-DSS trust badges and a single bold Pay button keep users oriented; on submit, a spring-animated processing state hands over to an animated success tick and confirmation message.

Features

• ✓Realistic 3D bank card with chip, contactless icon and magnetic strip
• ✓Live mirroring of cardholder name, number and expiry onto the card
• ✓3D flip to the card back when the CVV field is focused, auto-flip back after 3 digits
• ✓Automatic 4-4-4-4 card-number spacing and MM/YY expiry formatting with month clamping
• ✓HTML5 validation with aria-invalid sync on blur
• ✓Three-step checkout progress header
• ✓256-bit SSL and PCI-DSS trust badges
• ✓Processing spinner and animated drawn-tick success state (Framer Motion)
• ✓Lucide icons, single component file plus one stylesheet

What's included
Full JavaScript source code, package.json with locked dependencies, Vite config, RVT.ai README with setup and customisation guide, LICENSE and THIRD-PARTY-NOTICES.md. No node_modules: run npm install once.

Requirements
Node.js 20.19+ and npm 10+ to develop and build. The production build is static HTML, CSS and JavaScript that runs on any static host. No backend, API keys or paid services required.

Perfect for

• E-commerce and digital-goods checkouts
• SaaS plan upgrades and billing pages
• Banking and fintech card-onboarding demos
• UX portfolio and pitch prototypes

From download to production

1. Download Sapphire: 3D Card Checkout Page from your account and unzip it.
2. Run npm install, then npm run dev to open it locally.
3. Swap in your brand colours, copy and data (see the README customisation guide).
4. Run npm run build and deploy the dist/ folder to any static host.

Support and updates
Includes free updates and six months of RVT.ai support. Ask pre-purchase questions in the product Q&A, or open a ticket at https://rvt.ai/support with your order number.

Choose the license for your project

A Regular license covers a single end product that is not sold to end users. Choose Extended for a single end product that is sold to end users, including SaaS products and paid applications. Review the full license terms before checkout.