recur-skills 0.0.7 → 0.0.8

package/.claude-plugin/marketplace.json

@@ -6,7 +6,7 @@
   },
   "metadata": {
     "description": "Claude Code skills for integrating Recur - Taiwan's subscription payment platform",
-    "version": "0.0.7"
+    "version": "0.0.8"
   },
   "plugins": [
     {

package/dist/cli.mjs

@@ -76,8 +76,10 @@ function getSkillsDir() {
 
 //#endregion
 //#region src/cli.ts
-const SKILLS_SOURCE = join(dirname(fileURLToPath(import.meta.url)), "..", "skills");
-program.name("recur-skills").description("Claude Code skills for Recur payment integration").version("0.0.1");
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const SKILLS_SOURCE = join(__dirname, "..", "skills");
+const { version } = JSON.parse(readFileSync(join(__dirname, "..", "package.json"), "utf8"));
+program.name("recur-skills").description("Claude Code skills for Recur payment integration").version(version);
 program.command("list").description("List all available skills").action(() => {
 	const skills = getAllSkills();
 	if (skills.length === 0) {

package/dist/cli.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cli.mjs","names":["data: Record<string, string>","skills: Skill[]","targetDir: string","toInstall: string[]"],"sources":["../src/index.ts","../src/cli.ts"],"sourcesContent":["import { readFileSync, readdirSync, existsSync } from 'node:fs'\nimport { join, dirname } from 'node:path'\nimport { fileURLToPath } from 'node:url'\n\nconst __dirname = dirname(fileURLToPath(import.meta.url))\nconst SKILLS_DIR = join(__dirname, '..', 'skills')\n\nexport interface SkillMetadata {\n  name: string\n  description: string\n}\n\nexport interface Skill extends SkillMetadata {\n  slug: string\n  content: string\n  path: string\n}\n\n/**\n * Parse SKILL.md frontmatter\n */\nfunction parseFrontmatter(content: string): { data: Record<string, string>; content: string } {\n  const match = content.match(/^---\\n([\\s\\S]*?)\\n---\\n([\\s\\S]*)$/)\n  if (!match) {\n    return { data: {}, content }\n  }\n\n  const data: Record<string, string> = {}\n  const lines = match[1].split('\\n')\n  for (const line of lines) {\n    const colonIndex = line.indexOf(':')\n    if (colonIndex > 0) {\n      const key = line.slice(0, colonIndex).trim()\n      const value = line.slice(colonIndex + 1).trim()\n      data[key] = value\n    }\n  }\n\n  return { data, content: match[2] }\n}\n\n/**\n * Get all available skills\n */\nexport function getAllSkills(): Skill[] {\n  if (!existsSync(SKILLS_DIR)) {\n    return []\n  }\n\n  const skillDirs = readdirSync(SKILLS_DIR, { withFileTypes: true })\n    .filter(dirent => dirent.isDirectory())\n    .map(dirent => dirent.name)\n\n  const skills: Skill[] = []\n\n  for (const dir of skillDirs) {\n    const skillPath = join(SKILLS_DIR, dir, 'SKILL.md')\n    if (!existsSync(skillPath)) continue\n\n    const rawContent = readFileSync(skillPath, 'utf-8')\n    const { data, content } = parseFrontmatter(rawContent)\n\n    skills.push({\n      slug: dir,\n      name: data.name || dir,\n      description: data.description || '',\n      content,\n      path: skillPath,\n    })\n  }\n\n  return skills\n}\n\n/**\n * Get a single skill by slug\n */\nexport function getSkill(slug: string): Skill | null {\n  const skillPath = join(SKILLS_DIR, slug, 'SKILL.md')\n  if (!existsSync(skillPath)) return null\n\n  const rawContent = readFileSync(skillPath, 'utf-8')\n  const { data, content } = parseFrontmatter(rawContent)\n\n  return {\n    slug,\n    name: data.name || slug,\n    description: data.description || '',\n    content,\n    path: skillPath,\n  }\n}\n\n/**\n * Get skill names only (for listing)\n */\nexport function getSkillNames(): string[] {\n  if (!existsSync(SKILLS_DIR)) {\n    return []\n  }\n\n  return readdirSync(SKILLS_DIR, { withFileTypes: true })\n    .filter(dirent => dirent.isDirectory())\n    .filter(dirent => existsSync(join(SKILLS_DIR, dirent.name, 'SKILL.md')))\n    .map(dirent => dirent.name)\n}\n\n/**\n * Get the path to skills directory\n */\nexport function getSkillsDir(): string {\n  return SKILLS_DIR\n}\n","import { program } from 'commander'\nimport pc from 'picocolors'\nimport { existsSync, mkdirSync, cpSync, readdirSync } from 'node:fs'\nimport { join, dirname } from 'node:path'\nimport { fileURLToPath } from 'node:url'\nimport { getAllSkills, getSkill, getSkillsDir } from './index.js'\n\nconst __dirname = dirname(fileURLToPath(import.meta.url))\nconst SKILLS_SOURCE = join(__dirname, '..', 'skills')\n\nprogram\n  .name('recur-skills')\n  .description('Claude Code skills for Recur payment integration')\n  .version('0.0.1')\n\nprogram\n  .command('list')\n  .description('List all available skills')\n  .action(() => {\n    const skills = getAllSkills()\n\n    if (skills.length === 0) {\n      console.log(pc.yellow('No skills found.'))\n      return\n    }\n\n    console.log(pc.bold('\\n📦 Available Recur Skills\\n'))\n\n    for (const skill of skills) {\n      console.log(pc.cyan(`  ${skill.name}`))\n      console.log(pc.dim(`     ${skill.description}\\n`))\n    }\n\n    console.log(pc.dim(`Total: ${skills.length} skills\\n`))\n  })\n\nprogram\n  .command('info <skill>')\n  .description('Show detailed information about a skill')\n  .action((skillName: string) => {\n    const skill = getSkill(skillName)\n\n    if (!skill) {\n      console.log(pc.red(`Skill \"${skillName}\" not found.`))\n      console.log(pc.dim('\\nRun `recur-skills list` to see available skills.'))\n      process.exit(1)\n    }\n\n    console.log(pc.bold(`\\n📦 ${skill.name}\\n`))\n    console.log(pc.dim('Description:'))\n    console.log(`  ${skill.description}\\n`)\n    console.log(pc.dim('Path:'))\n    console.log(`  ${skill.path}\\n`)\n  })\n\nprogram\n  .command('install [skills...]')\n  .description('Install skills to your Claude Code skills directory')\n  .option('-g, --global', 'Install to global ~/.claude/skills/', false)\n  .option('-p, --project', 'Install to project .claude/skills/', false)\n  .option('-a, --all', 'Install all skills', false)\n  .action((skillNames: string[], options: { global: boolean; project: boolean; all: boolean }) => {\n    // Determine target directory\n    let targetDir: string\n    if (options.global) {\n      targetDir = join(process.env.HOME || '~', '.claude', 'skills')\n    } else if (options.project) {\n      targetDir = join(process.cwd(), '.claude', 'skills')\n    } else {\n      // Default to global\n      targetDir = join(process.env.HOME || '~', '.claude', 'skills')\n    }\n\n    // Determine which skills to install\n    let toInstall: string[]\n    if (options.all) {\n      toInstall = readdirSync(SKILLS_SOURCE, { withFileTypes: true })\n        .filter(d => d.isDirectory())\n        .map(d => d.name)\n    } else if (skillNames.length === 0) {\n      console.log(pc.yellow('Please specify skills to install or use --all'))\n      console.log(pc.dim('\\nExamples:'))\n      console.log(pc.dim('  recur-skills install recur-quickstart'))\n      console.log(pc.dim('  recur-skills install recur-checkout recur-webhooks'))\n      console.log(pc.dim('  recur-skills install --all'))\n      process.exit(1)\n    } else {\n      toInstall = skillNames\n    }\n\n    // Create target directory\n    if (!existsSync(targetDir)) {\n      mkdirSync(targetDir, { recursive: true })\n    }\n\n    console.log(pc.bold(`\\n📦 Installing skills to ${targetDir}\\n`))\n\n    let installed = 0\n    for (const skillName of toInstall) {\n      const sourcePath = join(SKILLS_SOURCE, skillName)\n      const destPath = join(targetDir, skillName)\n\n      if (!existsSync(sourcePath)) {\n        console.log(pc.red(`  ✗ ${skillName} - not found`))\n        continue\n      }\n\n      try {\n        cpSync(sourcePath, destPath, { recursive: true })\n        console.log(pc.green(`  ✓ ${skillName}`))\n        installed++\n      } catch (error) {\n        console.log(pc.red(`  ✗ ${skillName} - ${error}`))\n      }\n    }\n\n    console.log(pc.dim(`\\nInstalled ${installed}/${toInstall.length} skills\\n`))\n\n    if (installed > 0) {\n      console.log(pc.cyan('Skills are now available in Claude Code!'))\n      console.log(pc.dim('Claude will automatically use them when relevant,'))\n      console.log(pc.dim('or you can invoke them directly with /skill-name\\n'))\n    }\n  })\n\nprogram\n  .command('path')\n  .description('Show the path to the skills directory')\n  .action(() => {\n    console.log(getSkillsDir())\n  })\n\nprogram.parse()\n"],"mappings":"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"}
+{"version":3,"file":"cli.mjs","names":["data: Record<string, string>","skills: Skill[]","targetDir: string","toInstall: string[]"],"sources":["../src/index.ts","../src/cli.ts"],"sourcesContent":["import { readFileSync, readdirSync, existsSync } from 'node:fs'\nimport { join, dirname } from 'node:path'\nimport { fileURLToPath } from 'node:url'\n\nconst __dirname = dirname(fileURLToPath(import.meta.url))\nconst SKILLS_DIR = join(__dirname, '..', 'skills')\n\nexport interface SkillMetadata {\n  name: string\n  description: string\n}\n\nexport interface Skill extends SkillMetadata {\n  slug: string\n  content: string\n  path: string\n}\n\n/**\n * Parse SKILL.md frontmatter\n */\nfunction parseFrontmatter(content: string): { data: Record<string, string>; content: string } {\n  const match = content.match(/^---\\n([\\s\\S]*?)\\n---\\n([\\s\\S]*)$/)\n  if (!match) {\n    return { data: {}, content }\n  }\n\n  const data: Record<string, string> = {}\n  const lines = match[1].split('\\n')\n  for (const line of lines) {\n    const colonIndex = line.indexOf(':')\n    if (colonIndex > 0) {\n      const key = line.slice(0, colonIndex).trim()\n      const value = line.slice(colonIndex + 1).trim()\n      data[key] = value\n    }\n  }\n\n  return { data, content: match[2] }\n}\n\n/**\n * Get all available skills\n */\nexport function getAllSkills(): Skill[] {\n  if (!existsSync(SKILLS_DIR)) {\n    return []\n  }\n\n  const skillDirs = readdirSync(SKILLS_DIR, { withFileTypes: true })\n    .filter(dirent => dirent.isDirectory())\n    .map(dirent => dirent.name)\n\n  const skills: Skill[] = []\n\n  for (const dir of skillDirs) {\n    const skillPath = join(SKILLS_DIR, dir, 'SKILL.md')\n    if (!existsSync(skillPath)) continue\n\n    const rawContent = readFileSync(skillPath, 'utf-8')\n    const { data, content } = parseFrontmatter(rawContent)\n\n    skills.push({\n      slug: dir,\n      name: data.name || dir,\n      description: data.description || '',\n      content,\n      path: skillPath,\n    })\n  }\n\n  return skills\n}\n\n/**\n * Get a single skill by slug\n */\nexport function getSkill(slug: string): Skill | null {\n  const skillPath = join(SKILLS_DIR, slug, 'SKILL.md')\n  if (!existsSync(skillPath)) return null\n\n  const rawContent = readFileSync(skillPath, 'utf-8')\n  const { data, content } = parseFrontmatter(rawContent)\n\n  return {\n    slug,\n    name: data.name || slug,\n    description: data.description || '',\n    content,\n    path: skillPath,\n  }\n}\n\n/**\n * Get skill names only (for listing)\n */\nexport function getSkillNames(): string[] {\n  if (!existsSync(SKILLS_DIR)) {\n    return []\n  }\n\n  return readdirSync(SKILLS_DIR, { withFileTypes: true })\n    .filter(dirent => dirent.isDirectory())\n    .filter(dirent => existsSync(join(SKILLS_DIR, dirent.name, 'SKILL.md')))\n    .map(dirent => dirent.name)\n}\n\n/**\n * Get the path to skills directory\n */\nexport function getSkillsDir(): string {\n  return SKILLS_DIR\n}\n","import { program } from 'commander'\nimport pc from 'picocolors'\nimport { existsSync, mkdirSync, cpSync, readdirSync, readFileSync } from 'node:fs'\nimport { join, dirname } from 'node:path'\nimport { fileURLToPath } from 'node:url'\nimport { getAllSkills, getSkill, getSkillsDir } from './index.js'\n\nconst __dirname = dirname(fileURLToPath(import.meta.url))\nconst SKILLS_SOURCE = join(__dirname, '..', 'skills')\nconst { version } = JSON.parse(\n  readFileSync(join(__dirname, '..', 'package.json'), 'utf8')\n) as { version: string }\n\nprogram\n  .name('recur-skills')\n  .description('Claude Code skills for Recur payment integration')\n  .version(version)\n\nprogram\n  .command('list')\n  .description('List all available skills')\n  .action(() => {\n    const skills = getAllSkills()\n\n    if (skills.length === 0) {\n      console.log(pc.yellow('No skills found.'))\n      return\n    }\n\n    console.log(pc.bold('\\n📦 Available Recur Skills\\n'))\n\n    for (const skill of skills) {\n      console.log(pc.cyan(`  ${skill.name}`))\n      console.log(pc.dim(`     ${skill.description}\\n`))\n    }\n\n    console.log(pc.dim(`Total: ${skills.length} skills\\n`))\n  })\n\nprogram\n  .command('info <skill>')\n  .description('Show detailed information about a skill')\n  .action((skillName: string) => {\n    const skill = getSkill(skillName)\n\n    if (!skill) {\n      console.log(pc.red(`Skill \"${skillName}\" not found.`))\n      console.log(pc.dim('\\nRun `recur-skills list` to see available skills.'))\n      process.exit(1)\n    }\n\n    console.log(pc.bold(`\\n📦 ${skill.name}\\n`))\n    console.log(pc.dim('Description:'))\n    console.log(`  ${skill.description}\\n`)\n    console.log(pc.dim('Path:'))\n    console.log(`  ${skill.path}\\n`)\n  })\n\nprogram\n  .command('install [skills...]')\n  .description('Install skills to your Claude Code skills directory')\n  .option('-g, --global', 'Install to global ~/.claude/skills/', false)\n  .option('-p, --project', 'Install to project .claude/skills/', false)\n  .option('-a, --all', 'Install all skills', false)\n  .action((skillNames: string[], options: { global: boolean; project: boolean; all: boolean }) => {\n    // Determine target directory\n    let targetDir: string\n    if (options.global) {\n      targetDir = join(process.env.HOME || '~', '.claude', 'skills')\n    } else if (options.project) {\n      targetDir = join(process.cwd(), '.claude', 'skills')\n    } else {\n      // Default to global\n      targetDir = join(process.env.HOME || '~', '.claude', 'skills')\n    }\n\n    // Determine which skills to install\n    let toInstall: string[]\n    if (options.all) {\n      toInstall = readdirSync(SKILLS_SOURCE, { withFileTypes: true })\n        .filter(d => d.isDirectory())\n        .map(d => d.name)\n    } else if (skillNames.length === 0) {\n      console.log(pc.yellow('Please specify skills to install or use --all'))\n      console.log(pc.dim('\\nExamples:'))\n      console.log(pc.dim('  recur-skills install recur-quickstart'))\n      console.log(pc.dim('  recur-skills install recur-checkout recur-webhooks'))\n      console.log(pc.dim('  recur-skills install --all'))\n      process.exit(1)\n    } else {\n      toInstall = skillNames\n    }\n\n    // Create target directory\n    if (!existsSync(targetDir)) {\n      mkdirSync(targetDir, { recursive: true })\n    }\n\n    console.log(pc.bold(`\\n📦 Installing skills to ${targetDir}\\n`))\n\n    let installed = 0\n    for (const skillName of toInstall) {\n      const sourcePath = join(SKILLS_SOURCE, skillName)\n      const destPath = join(targetDir, skillName)\n\n      if (!existsSync(sourcePath)) {\n        console.log(pc.red(`  ✗ ${skillName} - not found`))\n        continue\n      }\n\n      try {\n        cpSync(sourcePath, destPath, { recursive: true })\n        console.log(pc.green(`  ✓ ${skillName}`))\n        installed++\n      } catch (error) {\n        console.log(pc.red(`  ✗ ${skillName} - ${error}`))\n      }\n    }\n\n    console.log(pc.dim(`\\nInstalled ${installed}/${toInstall.length} skills\\n`))\n\n    if (installed > 0) {\n      console.log(pc.cyan('Skills are now available in Claude Code!'))\n      console.log(pc.dim('Claude will automatically use them when relevant,'))\n      console.log(pc.dim('or you can invoke them directly with /skill-name\\n'))\n    }\n  })\n\nprogram\n  .command('path')\n  .description('Show the path to the skills directory')\n  .action(() => {\n    console.log(getSkillsDir())\n  })\n\nprogram.parse()\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "recur-skills",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Claude Code skills for Recur - Taiwan's subscription payment platform",
   "keywords": [
     "recur",
@@ -45,6 +45,7 @@
     "dev": "tsdown --watch",
     "lint": "eslint src/",
     "typecheck": "tsc --noEmit",
+    "check:examples": "node scripts/typecheck-examples.mjs",
     "prepublishOnly": "pnpm build",
     "version": "node scripts/sync-version.js && git add .claude-plugin/marketplace.json skills/*/SKILL.md"
   },
@@ -53,7 +54,15 @@
     "picocolors": "^1.1.1"
   },
   "devDependencies": {
+    "@types/express": "^5.0.6",
     "@types/node": "^22.0.0",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "express": "^5.2.1",
+    "next": "^16.2.10",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "recur-tw": "^0.16.1",
     "tsdown": "^0.18.4",
     "typescript": "^5.7.3"
   },

package/skills/recur-checkout/SKILL.md

@@ -1,249 +1,294 @@
 ---
 name: recur-checkout
-description: Implement Recur checkout flows including embedded, modal, and redirect modes. Use when adding payment buttons, checkout forms, subscription purchase flows, or when user mentions "checkout", "結帳", "付款按鈕", "embedded checkout".
+description: Implement Recur checkout flows including hosted, embedded, and modal modes. Use when adding payment buttons, checkout forms, subscription purchase flows, or when user mentions "checkout", "結帳", "付款按鈕", "embedded checkout".
 license: MIT
 metadata:
   author: recur
-  version: "0.0.7"
+  version: "0.0.8"
+  verified-against: recur-tw@0.16.1
 ---
 
 # Recur Checkout Integration
 
 You are helping implement Recur checkout flows. Recur supports multiple checkout modes for different use cases.
 
-## Checkout Modes
+## Choosing a Checkout Mode
 
-| Mode | Best For | User Experience |
-|------|----------|-----------------|
-| `embedded` | SPA apps | Form renders inline in your page |
-| `modal` | Quick purchases | Form appears in a dialog overlay |
-| `redirect` | Simple integration | Full page redirect to Recur |
+| Mode | API | Works on localhost | Best for |
+|------|-----|--------------------|----------|
+| **Hosted Checkout** (recommended) | `redirectToCheckout()` | ✅ Yes | Most apps — simplest, works on any domain |
+| On-page (embedded/modal) | `checkout()` | ❌ No — requires a registered domain | Polished production UX on your own domain |
+| Payment Link | `recur.paymentLinks.create()` (server) | ✅ Yes | No-frontend flows: emails, DMs, invoices |
 
-## Basic Implementation
+**Default to Hosted Checkout.** The on-page `checkout()` renders the card
+form via the PAYUNi SDK and only works on domains registered with Recur —
+it will fail during local development.
 
-### Using useRecur Hook
+## Hosted Checkout (recommended)
+
+Redirects to `checkout.recur.tw`; the customer pays and is redirected back
+to your `successUrl`.
 
 ```tsx
+'use client'
+
 import { useRecur } from 'recur-tw'
 
-function CheckoutButton({ productId }: { productId: string }) {
-  const { checkout, isLoading } = useRecur()
+export function SubscribeButton({ productId }: { productId: string }) {
+  const { redirectToCheckout, isCheckingOut } = useRecur()
 
   const handleClick = async () => {
-    await checkout({
-      productId,
-      // Or use productSlug: 'pro-plan'
-
-      // Optional: Pre-fill customer info
+    await redirectToCheckout({
+      productId, // or productSlug: 'pro-plan'
+      successUrl: `${window.location.origin}/dashboard?welcome=1`,
+      cancelUrl: `${window.location.origin}/pricing`,
+      // Optional: pre-fill and link to your user system
       customerEmail: 'user@example.com',
-      customerName: 'John Doe',
-
-      // Optional: Link to your user system
       externalCustomerId: 'user_123',
-
-      // Callbacks
-      onPaymentComplete: (result) => {
-        console.log('Success!', result)
-        // result.id - Subscription/Order ID
-        // result.status - 'ACTIVE', 'TRIALING', etc.
-      },
-      onPaymentFailed: (error) => {
-        console.error('Failed:', error)
-        return { action: 'retry' } // or 'close' or 'custom'
-      },
-      onPaymentCancel: () => {
-        console.log('User cancelled')
-      },
     })
   }
 
   return (
-    <button onClick={handleClick} disabled={isLoading}>
-      {isLoading ? 'Processing...' : 'Subscribe'}
+    <button onClick={handleClick} disabled={isCheckingOut}>
+      {isCheckingOut ? '處理中…' : '訂閱'}
     </button>
   )
 }
 ```
 
-### Using useSubscribe Hook (with state management)
+There are no client-side success callbacks in this mode — handle success on
+the `successUrl` page (and authoritatively via webhooks / entitlements).
+
+To control the redirect yourself (e.g. open in a new tab):
 
 ```tsx
-import { useSubscribe } from 'recur-tw'
+'use client'
+
+import { useRecur } from 'recur-tw'
 
-function SubscribeButton({ productId }: { productId: string }) {
-  const { subscribe, isLoading, error, subscription } = useSubscribe()
+export function OpenCheckoutInNewTab({ productId }: { productId: string }) {
+  const { createCheckoutSession } = useRecur()
 
-  const handleClick = () => {
-    subscribe({
+  const handleClick = async () => {
+    const session = await createCheckoutSession({
       productId,
-      onPaymentComplete: (sub) => {
-        // Subscription created successfully
-        router.push('/dashboard')
-      },
+      successUrl: `${window.location.origin}/success`,
+      cancelUrl: `${window.location.origin}/pricing`,
     })
+    window.open(session.url, '_blank')
   }
 
-  if (subscription) {
-    return <p>Subscribed! ID: {subscription.id}</p>
+  return <button onClick={handleClick}>前往結帳</button>
+}
+```
+
+## On-page Checkout (embedded / modal)
+
+⚠️ Requires a domain registered with Recur. Does NOT work on localhost —
+use Hosted Checkout for local development.
+
+```tsx
+'use client'
+
+import { useRecur } from 'recur-tw'
+
+export function CheckoutButton({ productId }: { productId: string }) {
+  const { checkout, isCheckingOut } = useRecur()
+
+  const handleClick = async () => {
+    await checkout({
+      productId, // or productSlug: 'pro-plan'
+      customerEmail: 'user@example.com',
+      externalCustomerId: 'user_123',
+      onPaymentComplete: (subscription) => {
+        // subscription.id, subscription.status,
+        // subscription.currentPeriodEnd, subscription.trialEndsAt
+        console.log('Payment successful!', subscription.id)
+      },
+      onPaymentFailed: (error) => {
+        console.error('Failed:', error.message)
+        return { action: 'retry' } // or 'close' or 'custom'
+      },
+      onPaymentCancel: () => {
+        console.log('User cancelled')
+      },
+    })
   }
 
   return (
-    <>
-      <button onClick={handleClick} disabled={isLoading}>
-        Subscribe
-      </button>
-      {error && <p className="error">{error.message}</p>}
-    </>
+    <button onClick={handleClick} disabled={isCheckingOut}>
+      {isCheckingOut ? 'Processing...' : 'Subscribe'}
+    </button>
   )
 }
 ```
 
-## Embedded Mode Setup
+### Embedded mode container
 
-For embedded mode, you need a container element:
+Embedded mode renders the card form into a container element on your page:
 
-```tsx
+```tsx no-check
 // In RecurProvider config
 <RecurProvider
   config={{
     publishableKey: process.env.NEXT_PUBLIC_RECUR_PUBLISHABLE_KEY,
-    checkoutMode: 'embedded',
+    checkoutMode: 'embedded', // 'embedded' (default) | 'modal'
     containerElementId: 'recur-checkout-container',
   }}
 >
   {children}
 </RecurProvider>
+```
 
-// In your checkout page
-function CheckoutPage() {
+```tsx
+export function CheckoutPage() {
   return (
     <div>
       <h1>Complete Your Purchase</h1>
-      {/* Recur will render the payment form here */}
+      {/* Recur renders the payment form here */}
       <div id="recur-checkout-container" />
     </div>
   )
 }
 ```
 
-## Handling 3D Verification
+### Payment failure handling
 
-Recur handles 3D Secure automatically. For mobile apps or specific flows:
+Failure details live in `error.details` (`failure_code`, `can_retry`):
 
 ```tsx
-await checkout({
-  productId,
-  // These URLs are used when 3D verification requires redirect
-  successUrl: 'https://yourapp.com/checkout/success',
-  cancelUrl: 'https://yourapp.com/checkout/cancel',
-})
+'use client'
+
+import { useRecur, type PaymentFailureDetails } from 'recur-tw'
+
+export function CheckoutWithErrorHandling({ productId }: { productId: string }) {
+  const { checkout } = useRecur()
+
+  const handleClick = () =>
+    checkout({
+      productId,
+      onPaymentFailed: (error) => {
+        const details = error.details as PaymentFailureDetails | undefined
+        switch (details?.failure_code) {
+          case 'INSUFFICIENT_FUNDS':
+            return {
+              action: 'custom' as const,
+              customTitle: '餘額不足',
+              customMessage: '請使用其他付款方式',
+            }
+          case 'NETWORK_ERROR':
+          case 'TIMEOUT':
+            return { action: 'retry' as const }
+          default:
+            // undefined = use the SDK's default handling
+            return undefined
+        }
+      },
+    })
+
+  return <button onClick={handleClick}>Subscribe</button>
+}
 ```
 
-## Product Types
+## useSubscribe Hook (with state management)
 
-Recur supports different product types:
+`useSubscribe()` returns `{ subscribe, isLoading, error, reset }` — success
+is reported through the `onPaymentComplete` option, not a return value.
 
 ```tsx
-// Subscription (recurring)
-checkout({ productId: 'prod_subscription_xxx' })
+'use client'
 
-// One-time purchase
-checkout({ productId: 'prod_onetime_xxx' })
+import { useState } from 'react'
+import { useSubscribe, type SubscriptionResult } from 'recur-tw'
 
-// Credits (prepaid wallet)
-checkout({ productId: 'prod_credits_xxx' })
+export function SubscribeWithState({ productId }: { productId: string }) {
+  const [subscription, setSubscription] = useState<SubscriptionResult | null>(null)
+  const { subscribe, isLoading, error } = useSubscribe({
+    onPaymentComplete: (sub) => {
+      setSubscription(sub)
+    },
+  })
+
+  if (subscription) {
+    return <p>Subscribed! ID: {subscription.id}</p>
+  }
 
-// Donation (variable amount)
-checkout({ productId: 'prod_donation_xxx' })
+  return (
+    <>
+      <button onClick={() => subscribe({ productId })} disabled={isLoading}>
+        Subscribe
+      </button>
+      {error && <p className="error">{error.message}</p>}
+    </>
+  )
+}
 ```
 
 ## Listing Products
 
+`useProducts()` returns `{ data, isLoading, error, refetch }`. Prices are in
+the smallest currency unit (`29900` = NT$299).
+
 ```tsx
+'use client'
+
 import { useProducts } from 'recur-tw'
 
-function PricingPage() {
-  const { products, isLoading } = useProducts({
-    type: 'SUBSCRIPTION', // Filter by type
+export function PricingPage() {
+  const { data: products, isLoading } = useProducts({
+    type: 'SUBSCRIPTION', // 'SUBSCRIPTION' | 'ONE_TIME' | 'CREDITS' | 'DONATION'
   })
 
   if (isLoading) return <div>Loading...</div>
 
   return (
     <div className="pricing-grid">
-      {products.map(product => (
-        <PricingCard key={product.id} product={product} />
+      {products?.map((product) => (
+        <div key={product.id}>
+          <h2>{product.name}</h2>
+          <p>
+            NT${(product.price / 100).toLocaleString('zh-TW')}
+            {product.billingPeriod === 'MONTHLY' && ' / 月'}
+            {product.billingPeriod === 'YEARLY' && ' / 年'}
+          </p>
+          {product.trialDays ? <p>免費試用 {product.trialDays} 天</p> : null}
+        </div>
       ))}
     </div>
   )
 }
 ```
 
-## Payment Failed Handling
+Product types: `SUBSCRIPTION` (recurring), `ONE_TIME`, `CREDITS` (prepaid
+wallet), `DONATION` (variable amount). All check out the same way.
 
-```tsx
-onPaymentFailed: (error) => {
-  // error.code tells you what went wrong
-  switch (error.code) {
-    case 'CARD_DECLINED':
-      return { action: 'retry' }
-    case 'INSUFFICIENT_FUNDS':
-      return {
-        action: 'custom',
-        customTitle: '餘額不足',
-        customMessage: '請使用其他付款方式',
-      }
-    default:
-      return { action: 'close' }
-  }
-}
-```
+## Payment Links (server-side, no frontend needed)
 
-## Server-Side Checkout (API)
-
-For server-rendered apps or custom flows:
+Generate a shareable checkout URL from the server:
 
 ```typescript
-// Create checkout session
-const response = await fetch('https://api.recur.tw/v1/checkouts', {
-  method: 'POST',
-  headers: {
-    'X-Recur-Secret-Key': process.env.RECUR_SECRET_KEY,
-    'Content-Type': 'application/json',
-  },
-  body: JSON.stringify({
-    productId: 'prod_xxx',
-    customerEmail: 'user@example.com',
-    successUrl: 'https://yourapp.com/success',
-    cancelUrl: 'https://yourapp.com/cancel',
-  }),
-})
+import { Recur } from 'recur-tw/server'
 
-const { checkoutUrl } = await response.json()
-// Redirect user to checkoutUrl
-```
-
-## Checkout Result Structure
+const recur = new Recur(process.env.RECUR_SECRET_KEY!)
 
-```typescript
-interface CheckoutResult {
-  id: string              // Subscription or Order ID
-  status: string          // 'ACTIVE', 'TRIALING', 'PENDING'
-  productId: string
-  amount: number          // In cents (e.g., 29900 = NT$299)
-  billingPeriod?: string  // 'MONTHLY', 'YEARLY' for subscriptions
-  currentPeriodEnd?: string  // ISO date
-  trialEndsAt?: string    // ISO date if trial
+export async function createLink() {
+  const link = await recur.paymentLinks.create({
+    productSlug: 'pro-plan',
+    successUrl: 'https://yourapp.com/success',
+  })
+  return link.url // share via email, DM, invoice, ...
 }
 ```
 
 ## Best Practices
 
-1. **Always handle all callbacks** - onPaymentComplete, onPaymentFailed, onPaymentCancel
-2. **Show loading states** - Use isLoading to disable buttons during checkout
-3. **Pre-fill customer info** - Reduces friction if you already have user data
-4. **Use externalCustomerId** - Links Recur customers to your user system
-5. **Test in sandbox first** - Use `pk_test_` keys during development
+1. **Default to Hosted Checkout** — on-page `checkout()` fails outside
+   registered domains, including localhost.
+2. **Success is confirmed by the server, not the browser** — treat the
+   `successUrl` page as UX only; gate access via webhooks/entitlements.
+3. **Show loading states** — use `isCheckingOut` to disable buttons.
+4. **Use `externalCustomerId`** — links Recur customers to your user system.
+5. **Test in sandbox first** — use `pk_test_` keys during development.
 
 ## Related Skills