Skip to content

masatonaut/next-tokushoho

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

next-tokushoho

Drop-in 特定商取引法に基づく表記 (Tokushoho) page generator for Next.js. Stripe-審査-pass ready, bilingual JP/EN, zero styling lock-in.

npm License: MIT Built by Kyren

🇯🇵 日本語版


What

If you're a Japan-based indie hacker selling SaaS via Stripe, you need a 特定商取引法に基づく表記 page. Otherwise:

  • Stripe rejects your account
  • Your credit card processor pulls you off
  • Customers can't legally identify you

Writing this page from scratch is annoying, easy to under-include fields, and gets nitpicked by Stripe support. next-tokushoho is a battle-tested template, extracted from production Kyren products that passed Stripe audit.

Features

  • ✅ All 14 fields required by 特定商取引法 §11 + Stripe-審査 additional asks
  • ✅ Bilingual JP / EN / both (Stripe要件は JP 必須)
  • ✅ "Address on request" pattern for indie hackers (Stripe-accepted)
  • ✅ Subscription / one-time / free pricing modes
  • ✅ Refund policy presets (7-day, 14-day, none, custom)
  • ✅ Zero CSS dependency — pure inline styles, override via classNames prop
  • ✅ TypeScript-first, fully typed config
  • ✅ React 19 / Next.js App Router compatible

Install

npm install next-tokushoho
# or
pnpm add next-tokushoho
# or
bun add next-tokushoho

Usage (Next.js App Router)

app/tokushoho/page.tsx:

import { Tokushoho, type TokushohoConfig } from "next-tokushoho";

const config: TokushohoConfig = {
  productName: "MyApp",
  seller: { name: "山田 太郎", representative: "山田 太郎" },
  contact: {
    email: "support@example.com",
    address: "on_request",
    phone: "on_request",
  },
  pricing: {
    type: "subscription",
    tiers: [{ name: "Pro", priceJpy: 500, interval: "monthly" }],
  },
  payment: { methods: ["credit_card"], processor: "Stripe" },
  cancellation: { inApp: true },
  refund: { policy: "7days_full" },
  lastUpdated: "2026-04-28",
  locale: "ja",
};

export default function TokushohoPage() {
  return <Tokushoho config={config} />;
}

export const metadata = {
  title: "特定商取引法に基づく表記 | MyApp",
};

That's it. The component renders all 14 required rows with sensible defaults pulled from your config.

Tailwind / custom styling

The component ships with minimal inline styles. To restyle, pass classNames:

<Tokushoho
  config={{
    ...config,
    classNames: {
      root: "max-w-3xl mx-auto px-6 py-12",
      title: "text-3xl font-bold mb-2",
      lastUpdated: "text-sm text-gray-500 mb-8",
      table: "w-full border-collapse",
      row: "border-b border-gray-200",
      th: "text-left py-4 pr-4 font-medium align-top w-1/3",
      td: "py-4 text-gray-700",
    },
  }}
/>

Configuration

See src/types.ts for the full type. Key options:

Field Type Notes
seller.name string 個人事業主は本名
contact.address "on_request" | string Indie default: "on_request"
contact.phone "on_request" | string Indie default: "on_request"
pricing subscription | one_time | free discriminated union
payment.methods ("credit_card" | "bank_transfer" | "convenience_store")[]
payment.processor string e.g. "Stripe"
cancellation.inApp boolean true → 「設定画面から解約」
refund.policy "7days_full" | "14days_full" | "none" | "custom" 7days = Stripe-friendly
locale "ja" | "en" | "both" JP required for compliance

Stripe-審査 checklist (battle-tested)

Real audit asks Stripe sent us, and how this template handles each:

  • 販売業者: full legal/personal name. Anonymous handles rejected.
  • 代表者名: same as seller for sole proprietorships.
  • 所在地: on_request accepted as long as the disclosure is clear and SLA stated.
  • 電話番号: on_request accepted, same caveat.
  • メールアドレス: must be reachable.
  • 販売価格: tax-inclusive, JPY, all tiers listed.
  • 販売価格以外の必要料金: explicit (internet/comm fees).
  • 支払方法: methods + processor.
  • 支払時期: subscription auto-renew clearly stated.
  • サービス提供時期: instant for digital.
  • 契約期間: auto-renewal terms.
  • 解約方法: in-app with billing-period-end clarity.
  • 返品・キャンセル: 7-day full refund preset is the easiest审查通过 path.
  • 動作環境: modern browsers list.

Why open source this

Built by Masato at Kyren for KASHITE, Phrasely, and other products. Every Japanese SaaS indie hacker rebuilds this — that's wasted work. Take it, ship faster.

Disclaimer

This is not legal advice. The template encodes Stripe-friendly defaults and field coverage required by 特定商取引法, but you are responsible for reviewing the rendered page with your own legal counsel before publishing. The author makes no warranty that any particular merchant processor will accept the output.

License

MIT — see LICENSE.

About

Drop-in 特定商取引法に基づく表記 (Tokushoho) page generator for Next.js. Stripe-friendly, bilingual JP/EN, zero styling lock-in.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors