> ## 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.

# Mẫu Expo

> Xây dựng ứng dụng di động React Native với Dodo Payments bằng cách sử dụng mẫu Expo của chúng tôi. Bao gồm tích hợp thanh toán, xử lý thanh toán và hỗ trợ TypeScript.

<Card title="GitHub Repository" icon="github" href="https://github.com/dodopayments/expo-boilerplate">
  Boilerplate đầy đủ Expo + React Native + Dodo Payments
</Card>

## 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.

<Info>
  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.
</Info>

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

## Đ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

<Steps>
  <Step title="Clone the Repository">
    Sao chép kho boilerplate và chuyển vào thư mục dự án:

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

  <Step title="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:

    * **Khóa API**: Điều hướng đến **Nhà phát triển → Khóa API** trong [bảng điều khiển của bạn](https://app.dodopayments.com)

    <Tip>
      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.
    </Tip>
  </Step>

  <Step title="Configure Environment Variables">
    Tạo một tập tin `.env` trong thư mục gốc:

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

    Thêm thông tin xác thực Dodo Payments của bạn:

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

    <Warning>
      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`.
    </Warning>
  </Step>

  <Step title="Install Dependencies">
    Cài đặt các gói npm cần thiết:

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

  <Step title="Start the Development Server">
    Khởi chạy máy chủ phát triển Expo:

    ```bash theme={null}
    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.

    <Check>
      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.
    </Check>
  </Step>
</Steps>

## 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:

<CardGroup cols={2}>
  <Card title="Checkout Integration" icon="shopping-cart">
    Ví dụ triển khai cho việc tạo và xử lý phiên thanh toán
  </Card>

  <Card title="Payment Handling" icon="credit-card">
    Luồng thanh toán hoàn chỉnh với xử lý thành công và lỗi
  </Card>

  <Card title="TypeScript Support" icon="code">
    Cấu hình TypeScript đầy đủ với định nghĩa kiểu phù hợp
  </Card>

  <Card title="Expo Router" icon="route">
    Thiết lập điều hướng với Expo Router để chuyển hướng mượt mà
  </Card>
</CardGroup>

## 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:

<Steps>
  <Step title="Create Your Products">
    Thêm sản phẩm trong [bảng điều khiển Dodo Payments](https://app.dodopayments.com) của bạn để bật chức năng thanh toán.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.
  </Step>
</Steps>

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

<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">
    Đối với iOS:

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

    Đối với Android:

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

## Tài nguyên Bổ sung

<CardGroup cols={2}>
  <Card title="Mobile Integration Guide" icon="mobile" href="/developer-resources/mobile-integration">
    Hướng dẫn chi tiết cho việc triển khai thanh toán trong ứng dụng di động
  </Card>

  <Card title="React Native Integration" icon="react" href="/developer-resources/react-native-integration">
    Tài liệu tích hợp dành riêng cho React Native
  </Card>

  <Card title="Integration Guide" icon="book" href="/developer-resources/integration-guide">
    Hướng dẫn chi tiết cho việc triển khai thanh toán một lần
  </Card>

  <Card title="API Reference" icon="brackets-curly" href="/api-reference/introduction">
    Tìm hiểu toàn bộ tài liệu API Dodo Payments
  </Card>
</CardGroup>

## Hỗ trợ

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

* Tham gia [cộng đồng Discord của chúng tôi](https://discord.gg/bYqAp4ayYh) để đặt câu hỏi và thảo luận
* Kiểm tra [kho lưu trữ GitHub](https://github.com/dodopayments/expo-boilerplate) để biết các vấn đề và cập nhật
* Liên hệ với [đội ngũ hỗ trợ của chúng tôi](mailto:support@dodopayments.com) để được trợ giúp