Slice · AI prompt

Storefront Checkout — guest cart + checkout composition

Keranjang guest (localStorage) + sheet + ringkasan checkout. Host re-prices server-side; pasangkan dengan doku-payment untuk step bayar.

Resource detail View source

Copy this prompt into Claude / Codex / Cursor

storefront-checkout.prompt.mdmarkdown

# Install `storefront-checkout` — Storefront Checkout — guest cart + checkout composition

> Keranjang guest (localStorage) + sheet + ringkasan checkout. Host re-prices server-side; pasangkan dengan doku-payment untuk step bayar.

📚 Knowledge base : https://resource.rahmanef.com/llms.txt
📦 Slice detail   : https://resource.rahmanef.com/slices/storefront-checkout
🧠 JSON catalog   : https://resource.rahmanef.com/api/knowledge?slice=storefront-checkout
🔗 Source         : https://github.com/rahmanef63/resource-site/tree/main/frontend/slices/storefront-checkout

## 1. Install

```bash
npx rahman-resources add storefront-checkout
# alias: npx rr add storefront-checkout
```

The CLI copies `frontend/slices/storefront-checkout/` into your project + augments `.env.example` + installs npm deps automatically. Run it from your project root.

## 2. What it ships

- shadcn primitives: `badge`, `button`, `card`, `separator`, `sheet`
- peer slices (cascade install):
  - `payment` — Optional payment step — checkout page composes DokuDirectForm + DokuPaymentInstructions (or swap midtrans-payment).

## 3. Wire it up

Run `npx rr add storefront-checkout`. Wrap your public layout once with `<CartProvider storageKey="my-shop-cart">` and mount `<CartWidget checkoutHref="/checkout" />` in the header extras. On product surfaces call `useCart().add({ slug, name, price, priceLabel, emoji })` with a host-resolved NUMERIC price. Build a /checkout route composing `<CheckoutSummary />` + a payment form (doku-payment's DokuDirectForm): its onSubmit calls YOUR Convex place-order action which re-prices each {slug, qty} from your catalog table server-side, generates an unguessable orderId, calls api.features.payment.actions.doku.createDirectPayment, records your domain order row, and returns { ok, orderId, instructions, expiresAt } ({ ok:false, notice } when DOKU creds are unset — surface it in the form and offer a contact fallback). After success render DokuPaymentInstructions + reactive status via api.features.payment.query.getOrderByOrderId. Reference: template-wirausaha-os convex/checkout.ts + slices/checkout/CheckoutPage.tsx.

## Rules of engagement

- shadcn-only UI primitives. No raw `<button>` / `<dialog>` / native date or file inputs.
- 200-line hard cap per source file (extract neighbours when over).
- All Convex queries hit an index (`.withIndex(...)`); never bare `.collect()`.
- Public mutations/queries declare `args:` validators + authz.
- Full ruleset: https://resource.rahmanef.com/best-practice

The agent will fetch /llms.txt for the full ruleset and use /api/knowledge for the JSON catalog.

# Install `storefront-checkout` — Storefront Checkout — guest cart + checkout composition > Keranjang guest (localStorage) + sheet + ringkasan checkout. Host re-prices server-side; pasangkan dengan doku-payment untuk step bayar. 📚 Knowledge base : https://resource.rahmanef.com/llms.txt 📦 Slice detail : https://resource.rahmanef.com/slices/storefront-checkout 🧠 JSON catalog : https://resource.rahmanef.com/api/knowledge?slice=storefront-checkout 🔗 Source : https://github.com/rahmanef63/resource-site/tree/main/frontend/slices/storefront-checkout ## 1. Install ```bash npx rahman-resources add storefront-checkout # alias: npx rr add storefront-checkout ``` The CLI copies `frontend/slices/storefront-checkout/` into your project + augments `.env.example` + installs npm deps automatically. Run it from your project root. ## 2. What it ships - shadcn primitives: `badge`, `button`, `card`, `separator`, `sheet` - peer slices (cascade install): - `payment` — Optional payment step — checkout page composes DokuDirectForm + DokuPaymentInstructions (or swap midtrans-payment). ## 3. Wire it up Run `npx rr add storefront-checkout`. Wrap your public layout once with `<CartProvider storageKey="my-shop-cart">` and mount `<CartWidget checkoutHref="/checkout" />` in the header extras. On product surfaces call `useCart().add({ slug, name, price, priceLabel, emoji })` with a host-resolved NUMERIC price. Build a /checkout route composing `<CheckoutSummary />` + a payment form (doku-payment's DokuDirectForm): its onSubmit calls YOUR Convex place-order action which re-prices each {slug, qty} from your catalog table server-side, generates an unguessable orderId, calls api.features.payment.actions.doku.createDirectPayment, records your domain order row, and returns { ok, orderId, instructions, expiresAt } ({ ok:false, notice } when DOKU creds are unset — surface it in the form and offer a contact fallback). After success render DokuPaymentInstructions + reactive status via api.features.payment.query.getOrderByOrderId. Reference: template-wirausaha-os convex/checkout.ts + slices/checkout/CheckoutPage.tsx. ## Rules of engagement - shadcn-only UI primitives. No raw `<button>` / `<dialog>` / native date or file inputs. - 200-line hard cap per source file (extract neighbours when over). - All Convex queries hit an index (`.withIndex(...)`); never bare `.collect()`. - Public mutations/queries declare `args:` validators + authz. - Full ruleset: https://resource.rahmanef.com/best-practice