メインコンテンツへスキップ

​
概要

Astroの最小限のボイラープレートは、Dodo PaymentsをAstroアプリケーションに統合するためのすぐに使える出発点を提供します。このテンプレートには、チェックアウトセッション、Webhook処理、顧客ポータル、迅速に支払いを受け入れるためのモダンなUIコンポーネントが含まれています。
このボイラープレートは、TypeScript、Tailwind CSS 4、および @dodopayments/astro アダプターを使用したAstro 5を使用しています。

​
特徴

  • クイックセットアップ - 5分以内で開始
  • 支払い統合 - @dodopayments/astroを使用した事前設定されたチェックアウトフロー
  • モダンUI - Tailwind CSSを使用したクリーンでダークテーマの価格ページ
  • Webhookハンドラー - 支払いイベント用のすぐに使えるWebhookエンドポイント
  • 顧客ポータル - ワンクリックでのサブスクリプション管理
  • TypeScript - 最小限で焦点を絞った型を持つ完全に型付けされたコード
  • 事前入力されたチェックアウト - UXを向上させるために顧客データを渡すデモ

​
前提条件

始める前に、次のものを用意してください：
  • Node.js LTSバージョン（Astro 5に必要）
  • Dodo Paymentsアカウント（ダッシュボードからAPIおよびWebhookキーにアクセスするため）

​
クイックスタート

1

リポジトリをクローン

git clone https://github.com/dodopayments/dodo-astro-minimal-boilerplate.git
cd dodo-astro-minimal-boilerplate
2

依存関係をインストール

npm install
3

API資格情報を取得

Dodo Paymentsにサインアップし、ダッシュボードから資格情報を取得します：
開発中はテストモードにいることを確認してください！
4

環境変数を設定

ルートディレクトリに .env ファイルを作成します：
cp .env.example .env
Dodo Paymentsの資格情報で値を更新します：
DODO_PAYMENTS_API_KEY=your_api_key_here
DODO_PAYMENTS_WEBHOOK_KEY=your_webhook_signing_key_here
DODO_PAYMENTS_RETURN_URL=http://localhost:4321/
DODO_PAYMENTS_ENVIRONMENT=test_mode
.env ファイルをバージョン管理にコミットしないでください。これはすでに .gitignore に含まれています。
5

製品を追加

Dodo Paymentsからの実際の製品IDで src/lib/products.ts を更新します：
export const products: Product[] = [
  {
    product_id: "pdt_001", // Replace with your product ID
    name: "Basic Plan",
    description: "Get access to basic features and support",
    price: 9999, // in cents
    features: [
      "Access to basic features",
      "Email support",
      "1 Team member",
      "Basic analytics",
    ],
  },
  // ... add more products
];
6

開発サーバーを実行

npm run dev
http://localhost:4321を開いて、価格ページを確認してください！

​
プロジェクト構造

src/
├── components/
│   ├── Footer.astro           # Reusable footer
│   ├── Header.astro           # Navigation header
│   └── ProductCard.astro      # Product pricing card
├── layouts/
│   └── Layout.astro           # Root layout
├── lib/
│   └── products.ts            # Product definitions
├── pages/
│   ├── index.astro            # Pricing page (home)
│   └── api/
│       ├── checkout.ts        # Checkout session handler
│       ├── customer-portal.ts # Customer portal redirect
│       └── webhook.ts         # Webhook event handler
└── styles/
    └── global.css             # Global styles with Tailwind

​
カスタマイズ

​
製品情報の更新

src/lib/products.ts を編集して、以下を変更します：
  • 製品ID（Dodoダッシュボードから）
  • 価格
  • 特徴
  • 説明

​
顧客データの事前入力

src/components/ProductCard.astro で、ハードコーディングされた値を実際のユーザーデータに置き換えます： 
customer: {
  name: "John Doe",
  email: "[email protected]",
},

​
顧客ポータルの更新

src/components/Header.astro で、ハードコーディングされた顧客IDを認証システムまたはデータベースからの実際の顧客IDに置き換えます： 
const CUSTOMER_ID = "cus_001"; // Replace with actual customer ID
テスト用に顧客IDを取得するためにテスト購入を完了できます。

​
Webhookイベント

このボイラープレートは、src/pages/api/webhook.ts でWebhookイベントを処理する方法を示しています：
  • onSubscriptionActive - サブスクリプションがアクティブになるとトリガーされます
  • onSubscriptionCancelled - サブスクリプションがキャンセルされるとトリガーされます
これらのハンドラー内にビジネスロジックを追加します： 
onSubscriptionActive: async (payload) => {
  // Grant access to your product
  // Update user database
  // Send welcome email
},
必要に応じて、さらにWebhookイベントを追加します。 ローカル開発のために、ngrokのようなツールを使用して、ローカルサーバーへの安全なトンネルを作成し、それをWebhook URLとして使用できます。

​
デプロイメント

このボイラープレートは、APIルートのオンデマンドレンダリングを伴う静的出力を使用します。デプロイメントプラットフォーム用のアダプターをインストールする必要があります：
プラットフォームガイド
VercelVercelにデプロイ
NetlifyNetlifyにデプロイ
CloudflareCloudflareにデプロイ
すべてのプラットフォームの詳細については、Astroのデプロイメントガイドを参照してください。

​
Webhook URLの更新

デプロイ後、Dodo PaymentsダッシュボードでWebhook URLを更新します： 
https://your-domain.com/api/webhook
また、デプロイされたドメインのWebhook署名キーに一致するように、プロダクション環境の DODO_PAYMENTS_WEBHOOK_KEY 環境変数を更新することを忘れないでください。

​
トラブルシューティング

node_modules を削除し、依存関係を再インストールします：
rm -rf node_modules package-lock.json
npm install
一般的な原因：
  • 無効な製品ID - Dodoダッシュボードに存在することを確認してください
  • .env のAPIキーまたは環境設定が間違っている
  • エラーのためにブラウザコンソールとターミナルを確認してください
ローカルテストのために、ngrokを使用してサーバーを公開します：
ngrok http 4321
Webhook URLをダッシュボードでngrokのURLに更新します。正しいWebhook検証キーで.envファイルを更新することを忘れないでください。
CUSTOMER_ID を src/components/Header.astro でハードコーディングされたものを、Dodoダッシュボードからの実際の顧客IDに置き換えます。または、認証システムとデータベースを統合して、顧客IDを動的に取得します。
このボイラープレートは、オンデマンドAPIルートを伴う静的出力を使用しています。デプロイメント用のアダプターをインストールする必要があります：詳細については、Astroのデプロイメントガイドを参照してください。

​
詳細を学ぶ

​
サポート

ボイラープレートに関して助けが必要ですか？