> ## 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 ボイラープレート

> Dodo Paymentsを使用してReact Nativeモバイルアプリを構築するためのExpoボイラープレートです。チェックアウト統合、支払い処理、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>
  このボイラープレートは TypeScript を使用した Expo SDK を利用し、チェックアウトセッションと支払い処理の例を含んでいます。
</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)の**Developer → API Keys**に移動します。

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

    QR コードを Expo Go アプリでスキャンするか、iOS シミュレーター用に `i`、Android エミュレーター用に `a` を押します。

    <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 dashboard](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)にお問い合わせください