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

GitHub Repository

Boilerplate đầy đủ Expo + React Native + Dodo Payments

​
Tổng quan

Một mẫu sẵn sàng cho sản xuất để tích hợp Dodo Payments vào các ứng dụng Expo/React Native. Mẫu này bao gồm việc tạo phiên thanh toán, xử lý thanh toán và cấu hình TypeScript phù hợp để giúp bạn bắt đầu chấp nhận thanh toán trong ứng dụng di động của mình một cách nhanh chóng.
Boilerplate này sử dụng Expo SDK cùng TypeScript và bao gồm các ví dụ triển khai cho phiên thanh toán và xử lý thanh toán.

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

  • Node.js 18+
  • Expo CLI hoặc EAS CLI
  • Tài khoản Dodo Payments (khóa API từ bảng điều khiển)
  • Trình giả lập iOS hoặc Android (hoặc thiết bị vật lý)

​
Bắt đầu nhanh

1

Clone the Repository

Sao chép kho boilerplate và chuyển vào thư mục dự án:
git clone https://github.com/dodopayments/expo-boilerplate.git
cd expo-boilerplate
2

Get Your API Credentials

Lấy thông tin đăng nhập từ bảng điều khiển Dodo Payments ở Chế độ Kiểm tra:
Bắt đầu với Chế độ Kiểm tra để thử nghiệm tích hợp một cách an toàn mà không xử lý thanh toán thật.
3

Configure Environment Variables

Tạo một tập tin .env trong thư mục gốc:
touch .env
Thêm thông tin xác thực Dodo Payments của bạn:
.env
EXPO_PUBLIC_DODO_API_KEY=your_test_api_key_here
Không bao giờ commit tập tin .env vào hệ thống kiểm soát phiên bản. Nó đã được bao gồm trong .gitignore.
4

Install Dependencies

Cài đặt các gói npm cần thiết:
npm install
5

Start the Development Server

Khởi chạy máy chủ phát triển Expo:
npx expo start
Quét mã QR bằng ứng dụng Expo Go trên thiết bị của bạn, hoặc nhấn i cho trình giả lập iOS hoặc a cho trình giả lập Android.
Bạn đã sẵn sàng bắt đầu xây dựng! Boilerplate bao gồm các màn hình và thành phần ví dụ để giúp bạn hiểu cách tích hợp.

​
Những gì được bao gồm

Mẫu này đi kèm với các yếu tố thiết yếu đã được cấu hình sẵn:

Checkout Integration

Ví dụ triển khai cho việc tạo và xử lý phiên thanh toán

Payment Handling

Luồng thanh toán hoàn chỉnh với xử lý thành công và lỗi

TypeScript Support

Cấu hình TypeScript đầy đủ với định nghĩa kiểu phù hợp

Expo Router

Thiết lập điều hướng với Expo Router để chuyển hướng mượt mà

​
Cấu trúc Dự án

expo-boilerplate/
├── app/
│   ├── (tabs)/
│   │   └── index.tsx          # Home screen with examples
│   └── checkout.tsx           # Checkout screen
├── components/
│   └── PaymentButton.tsx      # Payment button component
├── lib/
│   └── dodo.ts                # Dodo Payments client setup
├── .env.example               # Environment variables template
└── package.json

​
Các bước tiếp theo

Khi bạn đã chạy mẫu:
1

Create Your Products

Thêm sản phẩm trong bảng điều khiển Dodo Payments của bạn để bật chức năng thanh toán.
2

Customize the Integration

Điều chỉnh mã ví dụ để phù hợp với nhu cầu và thiết kế ứng dụng của bạn.
3

Test on Real Devices

Kiểm tra luồng thanh toán trên các thiết bị thực để đảm bảo mọi thứ hoạt động đúng.
4

Go Live

Khi sẵn sàng, chuyển sang khóa API ở Chế độ Trực tiếp và xây dựng ứng dụng cho môi trường sản xuất.

​
Xây dựng cho Sản xuất

1

Install EAS CLI

npm install -g eas-cli
2

Configure EAS

eas build:configure
3

Build Your App

Đối với iOS:
eas build --platform ios
Đối với Android:
eas build --platform android

​
Tài nguyên Bổ sung

Mobile Integration Guide

Hướng dẫn chi tiết cho việc triển khai thanh toán trong ứng dụng di động

React Native Integration

Tài liệu tích hợp dành riêng cho React Native

Integration Guide

Hướng dẫn chi tiết cho việc triển khai thanh toán một lần

API Reference

Tìm hiểu toàn bộ tài liệu API Dodo Payments

​
Hỗ trợ

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