React Native

これは公式のDodo Payments React NativeチェックアウトSDKで、@dodopayments/react-native-checkoutです。Dodoのホスト型チェックアウトをネイティブブラウザビューで開き、型付きの結果を返します。注: dodopayments-react-native-sdk（スコープなし）という、APIがまったく異なる古い無関係なパッケージが存在します。このページでは、現在の公式スコープ付きパッケージのみを説明します。

Checkout Sessions API

バックエンドから、このSDKが開くcheckout_urlを作成します。

Mobile Integration Guide

モバイル決済フロー全体の中での位置付けを確認します。

React Native SDKは、同じネイティブSwiftおよびKotlinコア上に構築された薄いTurbo Moduleラッパーです。iOSではSFSafariViewControllerを、AndroidではChrome Custom Tabを開き、API keyを保持せず、Dodo APIを直接呼び出すこともありません。すべてのチェックアウトロジックはブラウザー内で実行され、SDKはビューのライフサイクルを管理し、戻りURLを取得するだけです。

このSDKにはNew Architectureのみ、React Native 0.76以降、iOS 16以降、およびAndroid minSdk 24が必要です。

インストール

Install the Package

Android
iOS
Expo

パッケージは自動リンクされ、Mavenからcom.dodopayments.api:checkout-androidを取得します。

npm i @dodopayments/react-native-checkout

追加の設定は不要です。ネイティブ依存関係は自動的に解決されます。

npm i @dodopayments/react-native-checkout
cd ios && pod install

Swiftコアはパッケージに含まれており、CocoaPodsを介してインストールされます。

開発ビルドのみ（Expo Goは対象外）。

npm i @dodopayments/react-native-checkout
npx expo install expo-build-properties

次にapp.jsonを設定します（下記の「コールバックURLスキームの登録」を参照してください）。

アプリでチェックアウトからの戻りURLを受け取るには、URLスキームを登録する必要があります。

Android (Gradle)
iOS (Info.plist)
Expo (both platforms)

android/app/build.gradleで:

android/app/build.gradle

android {
    defaultConfig {
        manifestPlaceholders["dodoCallbackScheme"] = "myapp"
    }
}

"myapp"をアプリのスキームに置き換えます。

ios/YourApp/Info.plistで:

Info.plist

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLName</key>
    <string>myapp</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>myapp</string>
    </array>
  </dict>
</array>

XcodeのInfo → URL Types UIから追加することもできます。

app.jsonで:

app.json

{
  "expo": {
    "plugins": [
      [
        "expo-build-properties",
        {
          "android": {
            "manifestPlaceholders": {
              "dodoCallbackScheme": "myapp"
            }
          }
        }
      ]
    ],
    "ios": {
      "infoPlist": {
        "CFBundleURLTypes": [
          {
            "CFBundleURLSchemes": ["myapp"]
          }
        ]
      }
    }
  }
}

パッケージには@dodopayments/react-native-checkout Expo config pluginも含まれていますが、現在はURLスキームもmanifest placeholderも書き込みません。これを追加するだけではコールバックスキームは登録されません。上記のexpo-build-propertiesおよびinfoPlistの設定を使用してください。

app.jsonを編集した後、ネイティブプロジェクトを再ビルドします。

npx expo prebuild --clean

これは開発ビルドでのみ動作し、Expo Goでは動作しません。

使用方法

import { Linking } from 'react-native';
import { DodoCheckout } from '@dodopayments/react-native-checkout';

// Required for iOS's return-URL handling.
Linking.addEventListener('url', ({ url }) => DodoCheckout.handleOpenURL(url));

const result = await DodoCheckout.start({
  checkoutUrl,                          // from your backend's checkout session
  returnUrl: 'myapp://checkout/return', // scheme must be registered (see Installation)
  onEvent: (e) => console.log(e.type),  // logging only
});

switch (result.status) {
  case 'succeeded': showSuccess(result.paymentId); break;
  case 'failed':    showFailure(); break;
  case 'cancelled': dismiss(); break;
  case 'pending':   showPending(); break;
  case 'expired':   showExpired(); break;
}

戻りURLの転送

Linkingリスナーは、iOSでの戻りURL処理に必要です。Androidでは、handleOpenURLはfalseを解決するだけのno-opです。Androidコアがリダイレクトをネイティブに処理するためです。両プラットフォームでリスナーを無条件に登録しても安全です。

import { Linking } from 'react-native';
import { DodoCheckout } from '@dodopayments/react-native-checkout';

Linking.addEventListener('url', ({ url }) => {
  DodoCheckout.handleOpenURL(url);
});

結果の意味

result.statusはUI上のヒントであり、支払いの証明ではありません。payment.succeeded / subscription.active webhookを使用して、すべての支払いをバックエンドから確認してください。

CheckoutStatus

必須

succeeded、failed、cancelled、pending、expiredのいずれか。

string

戻りURLにその値が含まれていた場合に設定されます。UIに表示しますが、アクセス許可には使用しないでください。下記の「支払いの検証」を参照してください。

string

サブスクリプションのチェックアウトで設定されます。

string[]

チェックアウトにlicense key商品が含まれている場合に設定されます。

string

チェックアウトでメールアドレスを取得した場合に設定されます。

Record<string, string>

戻りURLに含まれるすべてのquery parameterを、そのまま保持します。

支払いの検証

Webhooks

支払いが成功したとき、またはサブスクリプションが有効化されたとき、Dodo Paymentsはバックエンドを呼び出します。

Get Payment Detail

secret keyを使用してpaymentIdを検索し、ステータスを直接確認します。

これらのいずれかによって支払いが確認された後にアクセスを許可し、result.statusだけを根拠にしてはいけません。

エラー

startは、誤用またはプラットフォーム障害の場合にのみCheckoutErrorでrejectします。キャンセルまたはdeclinedとなった支払いは常に結果として返され、例外にはなりません。

INVALID_CHECKOUT_URL: checkout.dodopayments.comのsession URLではありません。
INVALID_RETURN_URL: 有効なabsolute URLではありません。
ALREADY_IN_PROGRESS: チェックアウトはすでに実行中です。
PLATFORM_ERROR: 予期しないプラットフォーム障害です。

放棄されたセッション

チェックアウトの途中でアプリまたはJS bundleが終了すると、promiseは失われますが、ネイティブ層はセッションを保持します。次回のmount時に復元し、バックエンドと照合してください。

import { DodoCheckout } from '@dodopayments/react-native-checkout';

const abandoned = await DodoCheckout.getAbandonedSession();
if (abandoned) {
  // reconcile abandoned.sessionId with your backend, then:
  await DodoCheckout.clearAbandonedSession();
}

Mobile Integration Guide

Android、iOS、Flutterで共通のコントラクトです。

Expo Boilerplate

チェックアウト統合を含む完全なExpoの例です。

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

Checkout Sessions API

Mobile Integration Guide

インストール

使用方法

戻りURLの転送

結果の意味

支払いの検証

Webhooks

Get Payment Detail

エラー

放棄されたセッション

関連情報

Mobile Integration Guide

Expo Boilerplate

Checkout Sessions API

Mobile Integration Guide

​インストール

​使用方法

​戻りURLの転送

​結果の意味

​支払いの検証

Webhooks

Get Payment Detail

​エラー

​放棄されたセッション

​関連情報

Mobile Integration Guide

Expo Boilerplate

インストール

使用方法

戻りURLの転送

結果の意味

支払いの検証

エラー

放棄されたセッション

関連情報