跳转到主要内容

GitHub 仓库

完整的 Expo + React Native + Dodo Payments 模板

​
概述

一个适用于将 Dodo Payments 集成到 Expo/React Native 应用程序的生产就绪模板。该模板包括结账会话创建、支付处理和适当的 TypeScript 配置，帮助您快速开始在移动应用中接受支付。
此模板使用带 TypeScript 的 Expo SDK，并包括结账会话和支付处理的示例实现。

​
先决条件

  • Node.js 18+
  • Expo CLI 或 EAS CLI
  • Dodo Payments 账户（来自仪表板的 API 密钥）
  • iOS 模拟器或 Android 模拟器（或物理设备）

​
快速开始

1

克隆仓库

克隆模板仓库并导航到项目目录：
git clone https://github.com/dodopayments/expo-boilerplate.git
cd expo-boilerplate
2

获取您的 API 凭据

从 Dodo Payments 仪表板的测试模式中获取您的凭据：
  • API 密钥：在您的 仪表板 中导航到 开发者 → API 密钥
从测试模式开始，以安全地测试您的集成，而无需处理真实支付。
3

配置环境变量

在根目录中创建一个.env文件：
touch .env
添加您的 Dodo Payments 凭据：
.env
EXPO_PUBLIC_DODO_API_KEY=your_test_api_key_here
切勿将您的.env文件提交到版本控制中。它已包含在.gitignore中。
4

安装依赖项

安装所需的 npm 包：
npm install
5

启动开发服务器

启动 Expo 开发服务器：
npx expo start
使用设备上的Expo Go应用扫描二维码，或按i以在iOS模拟器中运行，或按a以在Android模拟器中运行。
您已准备好开始构建！该模板包括示例屏幕和组件，以帮助您理解集成。

​
包含内容

该模板附带预配置的基本内容：

结账集成

创建和处理结账会话的示例实现

支付处理

完整的支付流程，包括成功和错误处理

TypeScript 支持

完整的 TypeScript 配置，带有适当的类型定义

Expo 路由

使用 Expo Router 进行无缝路由的导航设置

​
项目结构

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

​
下一步

一旦您运行了模板：
1

创建您的产品

在您的 Dodo Payments 仪表板 中添加产品以启用结账功能。
2

自定义集成

调整示例代码以匹配您应用的需求和设计。
3

在真实设备上测试

在物理设备上测试支付流程，以确保一切正常工作。
4

上线

准备好后，切换到实时模式 API 密钥并为生产构建您的应用。

​
为生产构建

1

安装 EAS CLI

npm install -g eas-cli
2

配置 EAS

eas build:configure
3

构建您的应用

对于 iOS：
eas build --platform ios
对于 Android：
eas build --platform android

​
其他资源

移动集成指南

在移动应用中实现支付的详细指南

React Native 集成

React Native 特定的集成文档

集成指南

实现一次性支付的详细指南

API 参考

探索完整的 Dodo Payments API 文档

​
支持

需要有关模板的帮助吗？