メインコンテンツへスキップ

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ダッシュボードから資格情報を取得します:
テストモードから始めて、実際の支払いを処理せずに統合を安全にテストしてください。
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アプリでQRコードをスキャンするか、iOSシミュレーター用に i を押すか、Androidエミュレーター用に a を押します。
ビルドを開始する準備が整いました！ボイラープレートには、統合を理解するための例の画面とコンポーネントが含まれています。

​
含まれているもの

ボイラープレートには、事前に設定された必須項目が含まれています:

チェックアウト統合

チェックアウトセッションの作成と処理のための例実装

支払い処理

成功とエラー処理を含む完全な支払いフロー

TypeScriptサポート

適切な型定義を持つ完全なTypeScript構成

Expoルーター

シームレスなルーティングのためのExpoルーターによるナビゲーション設定

​
プロジェクト構造

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ドキュメントの全容を探る

​
サポート

ボイラープレートに関して助けが必要ですか？