Card payment

Add it to your project

The command installs only the module; the page is your call. Your choices below prepare the prompt and the page code.

Add the checkout-card module to my ViraStack Start project.

1. Run `npx virastack add checkout-card` in the project root. It installs only the `src/features/checkout-card` folder and its packages, and creates no page. If you get a conflict error, delete nothing and tell me.
2. Confirm from `package.json` and the folder structure that the project uses Next.js. If it does not, stop and ask me.
3. Create `src/app/checkout-card/page.tsx` with the code below. If the file exists, do not overwrite it; add `CheckoutCard` to the existing page.

```tsx
import { CheckoutCard } from "@/features/checkout-card/components/CheckoutCard"

export default function Page() {
  return (
    <main className="mx-auto w-full max-w-4xl flex-1 px-4 py-6 sm:px-6">
      <CheckoutCard />
    </main>
  )
}
```

4. If I gave you my API address, set it in `NEXT_PUBLIC_API_URL` on Next.js or `VITE_API_URL` on TanStack Start. If the response shape differs, adapt what needs changing inside `src/features/checkout-card`.
5. Run the `typecheck`, `test` and `lint:ci` scripts with the project's package manager and report the result.

What's in the module?

• Only the chosen card shows on the page; the Change button lists saved cards in a popup. A saved card has no edit, so you add a new one instead. The starting cards use the last four digits of iyzico sandbox test cards.
• The card form uses React Hook Form, Zod and shadcn/ui. ViraStack Mask formats the name on the card, checks the number with Luhn, checks that the expiry date hasn't passed, and sizes the CVV to 3 or 4 digits by card network.
• The card number and CVV never reach the network. tokenizeCard makes a dummy token in the browser, and the request carries only that token, the brand, the last four digits, the expiry month and year and the name on the card, named after iyzico's card storage. Zustand keeps the choice, and the useCheckoutCard hook returns order-ready data.
• Tests use Vitest, Testing Library and MSW; 2 test files come ready.

What lands in your project?

Based on your choices above, npx virastack add checkout-card adds these files to your project.

No page is created; add the module to your own page with the steps above.

How do you use it?

Moving to your payment provider

Call your payment provider's SDK in tokenize-card.ts. In .env.local, set your API's address in NEXT_PUBLIC_API_URL on Next.js or VITE_API_URL on TanStack Start, and the card endpoint path in CARDS_PATH. get-cards.api.ts returns the dummy cards for now, so turn it into a request; change save-card.api.ts for your API. Never send the card number or CVV to your server.

The code is yours

The module is copied into your project, so you don't depend on a package. Change it however you like; if you don't want it, run npx virastack remove checkout-card.

More modules in this area

• Shipping and billing address

  The chosen address shows on the page; listing, adding and editing happen in a popup. Shipping and billing can differ.