GitHub Repository
Tổng quan
Expo boilerplate là một ứng dụng Expo hoạt động được, dùng để bán gói đăng ký thông qua hosted checkout của Dodo Payments. Ứng dụng gồm hai phần: một ứng dụng Expo Router viết bằng TypeScript và một máy chủ Express nhỏ trongserver/, có nhiệm vụ tạo các phiên checkout bằng API key của bạn. Ứng dụng yêu cầu máy chủ cung cấp URL checkout, mở URL đó trong trình duyệt hệ thống bằng expo-web-browser và nhận kết quả thông qua deep link.
Boilerplate sử dụng Expo SDK 54, Expo Router và TypeScript. API key được lưu trên máy chủ. Ứng dụng chỉ biết URL của máy chủ.
Điều kiện tiên quyết
- Node.js 18 trở lên.
- Expo CLI hoặc EAS CLI.
- Tài khoản Dodo Payments có sản phẩm. Tạo sản phẩm trong Products trên dashboard.
- iOS Simulator, Android Emulator hoặc thiết bị vật lý.
Bắt đầu nhanh
1
Clone the Repository
Clone repository boilerplate và chuyển đến thư mục dự án:
2
Get Your API Credentials
Lấy API key từ dashboard của Dodo Payments ở test mode:
- API Key: Truy cập Developer → API Keys trong dashboard.
3
Configure Environment Variables
Ứng dụng và máy chủ mỗi bên đọc tệp Trong Trong tệp
.env riêng. Sao chép cả hai tệp mẫu:server/.env, thêm API key của bạn. DODOPAYMENTS_RETURN_URL phải sử dụng scheme từ app.json, tức là dodoexpo trong boilerplate:server/.env
.env ở thư mục gốc, đặt EXPO_PUBLIC_BACKEND_URL thành URL của máy chủ, chẳng hạn http://localhost:3000. Ứng dụng gửi các yêu cầu checkout đến EXPO_PUBLIC_BACKEND_URL/checkout.Sau đó mở server/server.js và thay your-product-id bằng ID sản phẩm của bạn. ID sản phẩm bắt đầu bằng pdt_.4
Install Dependencies
Cài đặt các package cho ứng dụng và máy chủ:
5
Start the Development Server
Khởi động backend trong một terminal, sau đó khởi động Expo trong terminal thứ hai:Nhấn
i cho iOS Simulator hoặc a cho Android Emulator, hoặc quét mã QR trên thiết bị của bạn. Dự án bao gồm expo-dev-client, và liên kết quay lại dodoexpo:// cần scheme riêng của ứng dụng, vì vậy hãy chạy ứng dụng trong bản development build (npx expo run:ios hoặc npx expo run:android) thay vì Expo Go.Thiết bị vật lý không thể truy cập localhost trên máy tính của bạn. Để kiểm thử trên thiết bị, đặt EXPO_PUBLIC_BACKEND_URL thành địa chỉ mạng cục bộ của máy tính, chẳng hạn http://192.168.1.10:3000.Màn hình chính hiển thị thẻ gói có nút checkout. Nhấn vào nút này để mở checkout, thanh toán bằng thẻ kiểm thử
4242 4242 4242 4242, rồi ứng dụng sẽ mở màn hình kết quả thanh toán.Có gì trong boilerplate
Boilerplate bao gồm:Checkout Integration
Payment Handling
TypeScript Support
Expo Router
Cấu trúc dự án
Đây là các tệp chính trong repository:Các bước tiếp theo
Sau khi boilerplate chạy được:1
Create Your Products
Thêm sản phẩm trong dashboard Dodo Payments, rồi sử dụng ID của chúng trong
server/server.js.2
Customize the Integration
Thay đổi nội dung gói trong
config/product.ts, đồng thời thay đổi tên ứng dụng, scheme và bundle identifiers trong app.json. Nếu thay đổi scheme, hãy cập nhật DODOPAYMENTS_RETURN_URL cho khớp.3
Test on Real Devices
Kiểm thử quy trình thanh toán và việc quay lại qua deep link trên các thiết bị iOS và Android vật lý.
4
Go Live
Thay máy chủ mẫu bằng backend của riêng bạn, có chức năng xác thực người dùng và cấp quyền truy cập từ webhooks. Sau đó chuyển sang live mode API key và build ứng dụng cho môi trường production.
Build cho môi trường production
Build các binary sẵn sàng đưa lên store bằng EAS Build:1
Install EAS CLI
2
Configure EAS
Repository không có
eas.json. Lệnh này sẽ tạo tệp đó:3
Build Your App
Đối với iOS:Đối với Android:
Tài nguyên bổ sung
Mobile Integration Guide
Integration Guide
API Reference
Hỗ trợ
Nếu cần trợ giúp về boilerplate:- Đặt câu hỏi trong cộng đồng Discord.
- Báo cáo sự cố trong repository GitHub.
- Gửi email cho đội ngũ hỗ trợ.