How do I install the Frontend Next Checkout skill?

Run npx skillmds@latest add xmuhameed/frontend-next-checkout in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Frontend Next Checkout safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Frontend Next Checkout?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Frontend Next Checkout free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Frontend Next Checkout?

xmuhameed (@xmuhameed) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Frontend Next Checkout by xmuhameed

Name: Frontend Next Checkout
Author: xmuhameed

Frontend Next Checkout

Next.js e-commerce checkout: CheckoutClient, persisted draft store, RHF+Zod form, shipping, delivery slots, Stripe/Tabby/Tamara payments, order creation. Use when building or modifying checkout flow, payment, or order creation.

xmuhameed Updated Sep 21, 2026

File contents

Checkout Flow

Routes

Route	Mode
`/[locale]/checkout`	`CheckoutClient mode="cart"`
`/[locale]/checkout/[orderId]`	`CheckoutClient mode="order"` (resume draft)

SiteChrome hides header/footer on checkout paths.

Architecture

features/checkout/  (or app/[locale]/checkout/)
├── CheckoutClient.tsx
├── store/checkout.store.ts      # Zustand persist: diaflower_new_checkout_draft
├── hooks/useCheckoutForm.ts     # RHF + Zod
├── hooks/useCheckoutPersistence.ts  # Debounced server sync
├── components/shipping/
├── components/delivery/
├── components/payment/
└── utils/payment-providers.ts

Form (RHF + Zod)

const form = useForm({
  resolver: zodResolver(checkoutFormSchema),
  mode: 'onBlur',
});
// Conditional refinements: recipient vs sender, address modes

Persisted Draft Store

// Zustand persist — form state, draftOrderId, payment method, shipping costs
persist(..., { name: 'diaflower_new_checkout_draft' })

Auto-save: debounced 1.5s → OrderService.createNewCheckoutDraft / updateNewCheckoutDraft

Checkout Sections (order)

Express checkout (Stripe Apple/Google Pay)
Login prompt (guest checkout allowed)
Sender / Recipient info
Address picker (existing or new)
Delivery date + slot
Payment method selector
Order summary + promo code

Payment Providers

Provider	Files
Stripe card	`StripeCardSection.tsx`, `PayNowButton.tsx`
Stripe Express	`ExpressCheckoutButtons.tsx`
Tabby BNPL	`services/tabby.service.ts`, `useBnplEligibility`
Tamara BNPL	`services/tamara.service.ts`
COD	`utils/cod.ts` — region-gated

usePaymentProviders merges server config + env fallbacks.

Order Creation

const result = await OrderService.createOrder(payload);
// Returns clientSecret (Stripe) or redirect URL (BNPL)

Order Success

/order-success — clears cart, coupon, checkout draft; fires trackPurchase with dedup event ID.

Region Checks

shipping-compatibility.ts — remove incompatible cart items before order. RegionConflictValidator — block intl locale with local-only products.

Env

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY, NEXT_PUBLIC_TABBY_*, NEXT_PUBLIC_API_BASE_URL

---name: frontend-next-checkoutdescription: Next.js e-commerce checkout: CheckoutClient, persisted draft store, RHF+Zod form, shipping, delivery slots, Stripe/Tabby/Tamara payments, order creation. Use when building or modifying checkout flow, payment, or order creation.---# Checkout Flow## Routes| Route | Mode ||-------|------|| `/[locale]/checkout` | `CheckoutClient mode="cart"` || `/[locale]/checkout/[orderId]` | `CheckoutClient mode="order"` (resume draft) |`SiteChrome` hides header/footer on checkout paths.## Architecture```features/checkout/ (or app/[locale]/checkout/)├── CheckoutClient.tsx├── store/checkout.store.ts # Zustand persist: diaflower_new_checkout_draft├── hooks/useCheckoutForm.ts # RHF + Zod├── hooks/useCheckoutPersistence.ts # Debounced server sync├── components/shipping/├── components/delivery/├── components/payment/└── utils/payment-providers.ts```## Form (RHF + Zod)```typescriptconst form = useForm({ resolver: zodResolver(checkoutFormSchema), mode: 'onBlur',});// Conditional refinements: recipient vs sender, address modes```## Persisted Draft Store```typescript// Zustand persist — form state, draftOrderId, payment method, shipping costspersist(..., { name: 'diaflower_new_checkout_draft' })```Auto-save: debounced 1.5s → `OrderService.createNewCheckoutDraft` / `updateNewCheckoutDraft`## Checkout Sections (order)1. Express checkout (Stripe Apple/Google Pay)2. Login prompt (guest checkout allowed)3. Sender / Recipient info4. Address picker (existing or new)5. Delivery date + slot6. Payment method selector7. Order summary + promo code## Payment Providers| Provider | Files ||----------|-------|| Stripe card | `StripeCardSection.tsx`, `PayNowButton.tsx` || Stripe Express | `ExpressCheckoutButtons.tsx` || Tabby BNPL | `services/tabby.service.ts`, `useBnplEligibility` || Tamara BNPL | `services/tamara.service.ts` || COD | `utils/cod.ts` — region-gated |`usePaymentProviders` merges server config + env fallbacks.## Order Creation```typescriptconst result = await OrderService.createOrder(payload);// Returns clientSecret (Stripe) or redirect URL (BNPL)```## Order Success`/order-success` — clears cart, coupon, checkout draft; fires `trackPurchase` with dedup event ID.## Region Checks`shipping-compatibility.ts` — remove incompatible cart items before order.`RegionConflictValidator` — block intl locale with local-only products.## Env`NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY`, `NEXT_PUBLIC_TABBY_*`, `NEXT_PUBLIC_API_BASE_URL`

Frequently asked questions