Quartz: Receipt Print Checkout

Quartz pairs a calm payment form with a summary panel that shows the customer's card building itself as they type. Choose Wallet, Credit Card or Transfer, fill in the floating-label fields and press Pay: the card lifts out of the summary into the centre of the screen, a contactless signal pulses while it processes, then it glows green and a paper receipt slides out beneath a drawn success tick.

A card that travels

A shared layout animation carries the card from the order summary to the centre of the screen on payment, so the success scene feels like a continuation of the form instead of a new page.

Validation that guides, not scolds

Incomplete fields are highlighted together with a short error banner that clears itself after three seconds; the CVV focus flips the card to its back and the 16-digit number formats in groups of four.

Features

• ✓Payment-method tabs: Wallet, Credit Card, Transfer
• ✓Floating-label inputs with icons
• ✓Live card preview in the order summary (front and back)
• ✓Auto-formatted card number and MM / YY date
• ✓Card flips to show the CVV while it is focused
• ✓Inline validation with error highlight and auto-dismissing banner
• ✓Collapsible summary sections (items, shipping, payment method)
• ✓Animated contactless signal while processing
• ✓Success scene with green glow, drawn tick and printing receipt
• ✓Framer Motion and Lucide icons

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

• Online stores and marketplaces
• Course, event and membership payments
• Invoice and bill-pay portals
• Checkout UX prototypes

From download to production

1. Download Quartz: Receipt Print Checkout 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.