Astro Minimal Boilerplate

​

Tổng quan

​

Tính năng

• Thiết lập nhanh: Từ lúc clone đến khi có trang định giá đang chạy trong khoảng năm phút.
• Checkout: Luồng checkout được cấu hình sẵn, xây dựng trên @dodopayments/astro.
• Trang định giá: Trang định giá với giao diện tối, được tạo kiểu bằng Tailwind CSS.
• Trình xử lý Webhook: Endpoint xác minh chữ ký của từng webhook và chạy code của bạn cho sự kiện đó.
• Customer Portal: Liên kết trong header mở Customer Portal, nơi khách hàng quản lý các subscription của họ.
• TypeScript: Định nghĩa product và handler có kiểu.
• Checkout điền sẵn: Truyền tên và email của khách hàng đến checkout để khách hàng không phải nhập lại.

​

Điều kiện tiên quyết

• Một phiên bản Node.js LTS, phiên bản mà Astro 5 yêu cầu.
• Một tài khoản Dodo Payments, để tạo API key và webhook signing secret trong dashboard.

​

Bắt đầu nhanh

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

npm install

cp .env.example .env

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

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
];

npm run dev

​

Cấu trúc dự án

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

​

Tùy chỉnh

​

Cập nhật thông tin product

• Product IDs, lấy từ Products trong dashboard Dodo Payments của bạn
• Prices
• Features
• Descriptions

​

Điền sẵn dữ liệu khách hàng

customer: {
  name: "John Doe",
  email: "john@example.com",
},

​

Cập nhật Customer Portal

const CUSTOMER_ID = "cus_001"; // Replace with actual customer ID

​

Webhook Events

• onSubscriptionActive chạy khi một subscription trở thành active (subscription.active).
• onSubscriptionCancelled chạy khi một subscription bị cancelled (subscription.cancelled).

onSubscriptionActive: async (payload) => {
  // Grant access to your product
  // Update user database
  // Send welcome email
},

​

Triển khai

​

Cập nhật Webhook URL

https://your-domain.com/api/webhook

​

Khắc phục sự cố

rm -rf node_modules package-lock.json
npm install

ngrok http 4321

​

Tìm hiểu thêm

• Tài liệu Dodo Payments
• Tài liệu Checkout Sessions
• Tài liệu Webhooks
• Astro Adaptor: các tùy chọn cho các handler Checkout, CustomerPortal và Webhooks
• Tài liệu Astro

​

Hỗ trợ

• Đặt câu hỏi trong cộng đồng Discord.
• Báo cáo vấn đề và theo dõi cập nhật trong repository GitHub.
• Gửi email cho đội ngũ hỗ trợ.