Checkout that turns into a receipt

The card splits, unrolls into paper and gets stamped PAID.

Get the code · $3React · Tailwind · TypeScript
Receipt Morph Checkout, preview

Use it in Next.js

"use client";
import { CheckoutReceiptMorph } from "@/components/CheckoutReceiptMorph";

export default function Pay() {
  return <CheckoutReceiptMorph onPay={(card) => charge(card)} onComplete={(receipt) => console.log(receipt)} />;
}

Install

  1. Copy from the zipPut react/src/components + react/src/data into src/, then npm i framer-motion.
  2. Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

order
line items and totals
onPay
charge the card, resolve { ok: true }
onComplete
the stamped receipt
accent
brand colour

Questions

Does the checkout work in Next.js?

Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.

Can I use it with Stripe?

Yes. It's the interface; onPay is where your Stripe call goes.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.