> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Expo 模板

> 使用我们的 Expo 模板构建 React Native 移动应用程序与 Dodo Payments 集成。包括结账集成、支付处理和 TypeScript 支持。

<Card title="GitHub Repository" icon="github" href="https://github.com/dodopayments/expo-boilerplate">
  完整的 Expo + React Native + Dodo Payments 样板
</Card>

## 概述

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

<Info>
  该样板使用 Expo SDK 和 TypeScript，并包含用于结账会话和支付处理的示例实现。
</Info>

<Frame>
  <iframe className="w-full aspect-video rounded-md" src="https://www.youtube.com/embed/78N1qw14m0Y" title="Expo Boilerplate Demo | Dodo Payments" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
</Frame>

## 先决条件

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

## 快速开始

<Steps>
  <Step title="Clone the Repository">
    克隆样板仓库并进入项目目录：

    ```bash theme={null}
    git clone https://github.com/dodopayments/expo-boilerplate.git
    cd expo-boilerplate
    ```
  </Step>

  <Step title="Get Your API Credentials">
    在测试模式下从 Dodo Payments 仪表板获取凭证：

    * **API 密钥**：在您的 [仪表板](https://app.dodopayments.com) 中导航到 **开发者 → API 密钥**

    <Tip>
      从测试模式开始，安全地测试集成而无需处理真实支付。
    </Tip>
  </Step>

  <Step title="Configure Environment Variables">
    在根目录下创建 `.env` 文件：

    ```bash theme={null}
    touch .env
    ```

    添加您的 Dodo Payments 凭据：

    ```bash .env theme={null}
    EXPO_PUBLIC_DODO_API_KEY=your_test_api_key_here
    ```

    <Warning>
      切勿将 `.env` 文件提交到版本控制。它已包含在 `.gitignore` 中。
    </Warning>
  </Step>

  <Step title="Install Dependencies">
    安装所需的 npm 包：

    ```bash theme={null}
    npm install
    ```
  </Step>

  <Step title="Start the Development Server">
    启动 Expo 开发服务器：

    ```bash theme={null}
    npx expo start
    ```

    使用 Expo Go 应用扫描二维码，或按 `i` 以在 iOS 模拟器上运行，或 `a` 以在 Android 模拟器上运行。

    <Check>
      你已经可以开始构建了！该样板包含示例屏幕和组件，帮助你理解集成过程。
    </Check>
  </Step>
</Steps>

## 包含内容

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

<CardGroup cols={2}>
  <Card title="Checkout Integration" icon="shopping-cart">
    创建和处理结账会话的示例实现
  </Card>

  <Card title="Payment Handling" icon="credit-card">
    完整的支付流程，包含成功与错误处理
  </Card>

  <Card title="TypeScript Support" icon="code">
    完整的 TypeScript 配置，附带正确的类型定义
  </Card>

  <Card title="Expo Router" icon="route">
    使用 Expo Router 的导航设置，实现无缝路由
  </Card>
</CardGroup>

## 项目结构

```
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
```

## 下一步

一旦您运行了模板：

<Steps>
  <Step title="Create Your Products">
    在你的 [Dodo Payments 仪表板](https://app.dodopayments.com) 中添加产品以启用结账功能。
  </Step>

  <Step title="Customize the Integration">
    根据你的应用需求和设计调整示例代码。
  </Step>

  <Step title="Test on Real Devices">
    在实体设备上测试支付流程，以确保一切正常。
  </Step>

  <Step title="Go Live">
    准备就绪后，将 API 密钥切换到实时模式并构建你的生产应用。
  </Step>
</Steps>

## 为生产构建

<Steps>
  <Step title="Install EAS CLI">
    ```bash theme={null}
    npm install -g eas-cli
    ```
  </Step>

  <Step title="Configure EAS">
    ```bash theme={null}
    eas build:configure
    ```
  </Step>

  <Step title="Build Your App">
    对于 iOS：

    ```bash theme={null}
    eas build --platform ios
    ```

    对于 Android：

    ```bash theme={null}
    eas build --platform android
    ```
  </Step>
</Steps>

## 其他资源

<CardGroup cols={2}>
  <Card title="Mobile Integration Guide" icon="mobile" href="/developer-resources/mobile-integration">
    移动应用中实现支付的详细指南
  </Card>

  <Card title="React Native Integration" icon="react" href="/developer-resources/react-native-integration">
    React Native 专用集成文档
  </Card>

  <Card title="Integration Guide" icon="book" href="/developer-resources/integration-guide">
    一次性支付实现的详细指南
  </Card>

  <Card title="API Reference" icon="brackets-curly" href="/api-reference/introduction">
    探索完整的 Dodo Payments API 文档
  </Card>
</CardGroup>

## 支持

需要有关模板的帮助吗？

* 加入我们的 [Discord 社区](https://discord.gg/bYqAp4ayYh) 进行提问和讨论
* 查看 [GitHub 仓库](https://github.com/dodopayments/expo-boilerplate) 以获取问题和更新
* 联系我们的 [支持团队](mailto:support@dodopayments.com) 寻求帮助