Jade: Mobile Add-Card Payment

Adding a card is the moment users decide whether they trust your app. Jade makes it effortless: a bold card preview at the top fills in as the user types, numeric-only inputs format themselves, the card flips to show the CVV, and the sticky Pay Now bar sends everything into a smooth processing sequence that ends in a celebratory success tick.

Choreographed from tap to tick

On Pay Now the header fades, the white sheet rises to fill the screen, the bottom bar slides away and the card drops into place inside an animated processing border, which turns green with a bounce when the payment succeeds.

Inputs that behave

Card number and expiry accept digits only and format automatically, the name field accepts letters only and upper-cases itself, and the CVV is masked on both the field and the back of the card.

Features

• ✓Live card preview: number, expiry and cardholder name
• ✓3D flip to the card back while the CVV is focused
• ✓Digits-only card number and MM/YY expiry with auto-formatting
• ✓Letters-only, auto-uppercase name field
• ✓Masked CVV on input and card back
• ✓"Securely save card" custom checkbox
• ✓Accepted-cards badge row
• ✓Sticky amount and Pay Now bar
• ✓Processing border animation and green success state
• ✓Framer Motion transitions, plain CSS styling

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

• Banking and wallet apps
• Food-delivery and ride-hailing checkouts
• Subscription and in-app purchase flows
• Mobile UX case studies

From download to production

1. Download Jade: Mobile Add-Card Payment 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.