Chuyển đến nội dung chính

​
Tổng quan

Mẫu Astro tối giản cung cấp một điểm khởi đầu sẵn sàng để tích hợp Dodo Payments với ứng dụng Astro của bạn. Mẫu này bao gồm các phiên thanh toán, xử lý webhook, cổng khách hàng và các thành phần UI hiện đại để giúp bạn bắt đầu chấp nhận thanh toán nhanh chóng.
Mẫu này sử dụng Astro 5 với TypeScript, Tailwind CSS 4, và @dodopayments/astro adapter.

​
Tính năng

  • Cài đặt nhanh - Bắt đầu trong vòng chưa đầy 5 phút
  • Tích hợp thanh toán - Quy trình thanh toán được cấu hình sẵn sử dụng @dodopayments/astro
  • UI hiện đại - Trang giá sạch sẽ, chủ đề tối với Tailwind CSS
  • Xử lý Webhook - Điểm cuối webhook sẵn sàng sử dụng cho các sự kiện thanh toán
  • Cổng khách hàng - Quản lý đăng ký chỉ với một cú nhấp chuột
  • TypeScript - Được định kiểu hoàn toàn với các kiểu tối thiểu, tập trung
  • Thanh toán được điền sẵn - Minh họa việc truyền dữ liệu khách hàng để cải thiện UX

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

Trước khi bắt đầu, hãy đảm bảo bạn đã có:
  • Phiên bản Node.js LTS (cần thiết cho Astro 5)
  • Tài khoản Dodo Payments (để truy cập API và Webhook Keys từ bảng điều khiển)

​
Bắt đầu nhanh

1

Nhân bản kho lưu trữ

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

Cài đặt các phụ thuộc

npm install
3

Lấy thông tin xác thực API

Đăng ký tại Dodo Payments và lấy thông tin xác thực của bạn từ bảng điều khiển:
Hãy chắc chắn rằng bạn đang ở Chế độ thử nghiệm trong khi phát triển!
4

Cấu hình biến môi trường

Tạo một .env file trong thư mục gốc:
cp .env.example .env
Cập nhật các giá trị với thông tin xác thực Dodo Payments của bạn:
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
Không bao giờ cam kết file .env của bạn vào kiểm soát phiên bản. Nó đã được bao gồm trong .gitignore.
5

Thêm sản phẩm của bạn

Cập nhật src/lib/products.ts với các ID sản phẩm thực tế của bạn từ Dodo Payments:
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

Chạy máy chủ phát triển

npm run dev
Mở http://localhost:4321 để xem trang giá của bạn!

​
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 sản phẩm

Chỉnh sửa src/lib/products.ts để sửa đổi:
  • ID sản phẩm (từ bảng điều khiển Dodo của bạn)
  • Giá cả
  • Tính năng
  • Mô tả

​
Điền trước dữ liệu khách hàng

Trong src/components/ProductCard.astro, thay thế các giá trị cứng bằng dữ liệu người dùng thực tế của bạn: 
customer: {
  name: "John Doe",
  email: "[email protected]",
},

​
Cập nhật cổng khách hàng

Trong src/components/Header.astro, thay thế ID khách hàng cứng bằng ID khách hàng thực tế từ hệ thống xác thực hoặc cơ sở dữ liệu của bạn: 
const CUSTOMER_ID = "cus_001"; // Replace with actual customer ID
Bạn có thể hoàn thành một giao dịch thử nghiệm để lấy ID khách hàng cho việc thử nghiệm.

​
Sự kiện Webhook

Mẫu này minh họa việc xử lý các sự kiện webhook trong src/pages/api/webhook.ts:
  • onSubscriptionActive - Được kích hoạt khi một đăng ký trở nên hoạt động
  • onSubscriptionCancelled - Được kích hoạt khi một đăng ký bị hủy
Thêm logic kinh doanh của bạn bên trong các trình xử lý này: 
onSubscriptionActive: async (payload) => {
  // Grant access to your product
  // Update user database
  // Send welcome email
},
Thêm nhiều sự kiện webhook nếu cần. Đối với phát triển cục bộ, bạn có thể sử dụng các công cụ như ngrok để tạo một đường hầm bảo mật đến máy chủ cục bộ của bạn và sử dụng nó làm URL webhook của bạn.

​
Triển khai

Mẫu này sử dụng đầu ra tĩnh với việc kết xuất theo yêu cầu cho các tuyến API. Bạn sẽ cần cài đặt một adapter cho nền tảng triển khai của bạn:
Nền tảngHướng dẫn
VercelTriển khai lên Vercel
NetlifyTriển khai lên Netlify
CloudflareTriển khai lên Cloudflare
Xem hướng dẫn triển khai của Astro cho tất cả các nền tảng.

​
Cập nhật URL Webhook

Sau khi triển khai, hãy cập nhật URL webhook của bạn trong Bảng điều khiển Dodo Payments: 
https://your-domain.com/api/webhook
Cũng nhớ cập nhật biến môi trường DODO_PAYMENTS_WEBHOOK_KEY trong môi trường sản xuất của bạn để khớp với khóa ký webhook cho miền đã triển khai của bạn.

​
Khắc phục sự cố

Xóa node_modules và cài đặt lại các phụ thuộc:
rm -rf node_modules package-lock.json
npm install
Nguyên nhân phổ biến:
  • ID sản phẩm không hợp lệ - xác minh rằng nó tồn tại trong bảng điều khiển Dodo của bạn
  • Khóa API sai hoặc cài đặt môi trường trong .env
  • Kiểm tra bảng điều khiển trình duyệt và terminal để tìm lỗi
Đối với thử nghiệm cục bộ, sử dụng ngrok để phơi bày máy chủ của bạn:
ngrok http 4321
Cập nhật URL webhook trong bảng điều khiển Dodo thành URL ngrok. Nhớ cập nhật file .env của bạn với khóa xác minh webhook chính xác.
Thay thế CUSTOMER_ID cứng trong src/components/Header.astro bằng một ID khách hàng thực tế từ bảng điều khiển Dodo của bạn.Hoặc tích hợp hệ thống xác thực và cơ sở dữ liệu của bạn để lấy ID khách hàng một cách động.
Mẫu này sử dụng đầu ra tĩnh với các tuyến API theo yêu cầu. Bạn cần cài đặt một adapter cho việc triển khai:Xem hướng dẫn triển khai của Astro để biết chi tiết.

​
Tìm hiểu thêm

​
Hỗ trợ

Cần giúp đỡ với mẫu này?