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

Kho lưu trữ GitHub

Mẫu hoàn chỉnh 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.
Mẫu này sử dụng Expo SDK với TypeScript và bao gồm các triển khai ví dụ cho các 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

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

Nhân bản kho lưu trữ mẫu và điều hướng đến thư mục dự án:
git clone https://github.com/dodopayments/expo-boilerplate.git
cd expo-boilerplate
2

Lấy Thông tin xác thực API của bạn

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

Cấu hình Biến Môi Trường

Tạo một .env file 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ờ cam kết file .env của bạn vào hệ thống kiểm soát phiên bản. Nó đã được bao gồm trong .gitignore.
4

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

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

Khởi động Máy chủ Phát triển

Khởi động 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! Mẫu này bao gồm các màn hình và thành phần ví dụ để giúp bạn hiểu 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:

Tích hợp Thanh toán

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

Xử lý Thanh toán

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

Hỗ trợ TypeScript

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

Router Expo

Cài đặt điều hướng với Router Expo cho việc định tuyến liền mạch

​
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

Tạo Sản phẩm của Bạn

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

Tùy chỉnh Tích hợp

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

Kiểm tra trên Thiết bị Thực

Kiểm tra luồng thanh toán trên các thiết bị vật lý để đảm bảo mọi thứ hoạt động chính xác.
4

Đi vào Hoạt động

Khi đã sẵn sàng, chuyển sang khóa API Chế độ Hoạt động và xây dựng ứng dụng của bạn cho sản xuất.

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

1

Cài đặt EAS CLI

npm install -g eas-cli
2

Cấu hình EAS

eas build:configure
3

Xây dựng Ứng dụng của Bạn

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

​
Tài nguyên Bổ sung

Hướng dẫn Tích hợp Di động

Hướng dẫn chi tiết để thực hiện thanh toán trong ứng dụng di động

Tích hợp React Native

Tài liệu tích hợp cụ thể cho React Native

Hướng dẫn Tích hợp

Hướng dẫn chi tiết để thực hiện thanh toán một lần

Tài liệu API

Khám phá tài liệu API Dodo Payments đầy đủ

​
Hỗ trợ

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