iblai-vibe-monetization-checkoutlisted

Build the buyer-facing PaywallModal, access-check gate, Stripe checkout flow, and public/guest buy surface for ibl.ai's item-level monetization. Use when the user mentions paywall, checkout, gate content, access check, 402, hard paywall, locked content, PaywallModal, redirect to Stripe, success_url / cancel_url, guest checkout, anonymous buy, public pricing, or selling a single item to logged-out visitors. See /iblai-vibe-monetization for the family index, /iblai-vibe-monetization-configure for the prerequisite paywall + price setup, /iblai-vibe-monetization-onboard for the Connect-ready Platform requirement, /iblai-vibe-monetization-subscription for the post-purchase My Purchases tab, and /iblai-vibe-auth for token wiring.
iblai/vibe · ★ 15 · AI & Automation · score 76

Install: claude install-skill iblai/vibe

# /iblai-vibe-monetization-checkout Build the buyer surface: gate a page with `useCheckAccessQuery`, render `PaywallModal` when locked, redirect to Stripe Checkout on tier select, and ship a public/guest buy page for anonymous landing-page traffic. Do NOT add custom styles, colors, or CSS overrides to ibl.ai SDK components. They ship with their own styling. Keep the components as-is. Do NOT implement dark mode unless the user explicitly asks for it. When building custom UI around SDK components, use the ibl.ai brand (primary `#0058cc`, button `bg-gradient-to-r from-[#2563EB] to-[#93C5FD] text-white`, shadcn/ui new-york variant). Component hierarchy: ibl.ai SDK (`@iblai/iblai-js`) first, then shadcn/ui (`npx shadcn@latest add <c>`); do NOT write custom components when an SDK or shadcn equivalent exists. Full brand reference: [BRAND.md](https://raw.githubusercontent.com/iblai/vibe/refs/heads/main/BRAND.md). You MUST run `/iblai-vibe-ops-test` before telling the user the work is ready. After all work is complete, start a dev server (`pnpm dev`) so the user can see the result at http://localhost:3000. `iblai.env` is NOT a `.env.local` replacement — it only holds the 3 shorthand variables (`DOMAIN`, `PLATFORM`, `TOKEN`). Next.js still reads its runtime env vars from `.env.local`. Use `pnpm` as the default package manager. Fall back to `npm` if pnpm is not installed. The generated app should live in the current directory, not in a subdirectory. > **Common setup (brand, conv