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

GitHub Repository

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

Clone the Repository

ボイラープレートのリポジトリをクローンし、プロジェクトディレクトリに移動します:
git clone https://github.com/dodopayments/expo-boilerplate.git
cd expo-boilerplate
2

Get Your API Credentials

テストモードの Dodo Payments ダッシュボードから認証情報を取得します:
実際の支払いを処理せずに統合を安全にテストするにはテストモードから始めてください。
3

Configure Environment Variables

ルートディレクトリに .env ファイルを作成します:
touch .env
Dodo Paymentsの資格情報を追加します:
.env
EXPO_PUBLIC_DODO_API_KEY=your_test_api_key_here
.env ファイルをバージョン管理にコミットしないでください。それはすでに .gitignore に含まれています。
4

Install Dependencies

必要な npm パッケージをインストールします:
npm install
5

Start the Development Server

Expo 開発サーバーを起動します:
npx expo start
QR コードを Expo Go アプリでスキャンするか、iOS シミュレーター用に i、Android エミュレーター用に a を押します。
準備ができたら開発を始めましょう！このボイラープレートには統合を理解するための例の画面やコンポーネントが含まれています。

​
含まれているもの

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

Checkout Integration

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

Payment Handling

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

TypeScript Support

適切な型定義を備えた完全な TypeScript 設定

Expo Router

シームレスなルーティングのための 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

Create Your Products

チェックアウト機能を有効にするために Dodo Payments dashboard で商品を追加します。
2

Customize the Integration

サンプルコードをアプリケーションの要件やデザインに合わせて調整してください。
3

Test on Real Devices

実機で支払いフローをテストして、すべてが正しく動作することを確認します。
4

Go Live

準備が整ったら、ライブモードの API キーに切り替えてアプリを本番用にビルドします。

​
本番用ビルド

1

Install EAS CLI

npm install -g eas-cli
2

Configure EAS

eas build:configure
3

Build Your App

iOS の場合:
eas build --platform ios
Androidの場合:
eas build --platform android

​
追加リソース

Mobile Integration Guide

モバイルアプリでの支払い実装の詳細ガイド

React Native Integration

React Native 固有の統合ドキュメント

Integration Guide

単発支払いの実装に関する詳細ガイド

API Reference

Dodo Payments の完全な API ドキュメントを確認する

​
サポート

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