GitHub Repository
Boilerplate cho Expo, React Native và Dodo Payments.
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
Một máy chủ mẫu tạo các phiên checkout và một app service yêu cầu rồi mở các phiên đó.
Payment Handling
Màn hình kết quả đọc
status từ deep link dodoexpo://payment/result và hiển thị trạng thái thành công hoặc thất bại.TypeScript Support
Cấu hình TypeScript với các type cho request và response checkout.
Expo Router
Điều hướng dựa trên file với Expo Router, bao gồm bố cục tab và route kết quả thanh toán.
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
Các mobile checkout SDK, thiết lập deep link và cài đặt mobile checkout.
Integration Guide
Các phiên checkout, payment link và webhook.
API Reference
Mọi endpoint API của Dodo Payments.
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ợ.