> ## 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.
# React Native
> React NativeアプリからシステムブラウザータブでDodo Paymentsのホスト型チェックアウトを開き、1回の呼び出しで型付きの結果を取得します。
これは公式のDodo Payments React NativeチェックアウトSDKで、`@dodopayments/react-native-checkout`です。Dodoのホスト型チェックアウトをネイティブブラウザビューで開き、型付きの結果を返します。注: `dodopayments-react-native-sdk`（スコープなし）という、APIがまったく異なる古い無関係なパッケージが存在します。このページでは、現在の公式スコープ付きパッケージのみを説明します。
バックエンドから、このSDKが開くcheckout\_urlを作成します。
モバイル決済フロー全体の中での位置付けを確認します。
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が必要です。
## インストール
パッケージは自動リンクされ、Mavenから`com.dodopayments.api:checkout-android`を取得します。
```sh theme={null}
npm i @dodopayments/react-native-checkout
```
追加の設定は不要です。ネイティブ依存関係は自動的に解決されます。
```sh theme={null}
npm i @dodopayments/react-native-checkout
cd ios && pod install
```
Swiftコアはパッケージに含まれており、CocoaPodsを介してインストールされます。
開発ビルドのみ（Expo Goは対象外）。
```sh theme={null}
npm i @dodopayments/react-native-checkout
npx expo install expo-build-properties
```
次に`app.json`を設定します（下記の「コールバックURLスキームの登録」を参照してください）。
アプリでチェックアウトからの戻りURLを受け取るには、URLスキームを登録する必要があります。
`android/app/build.gradle`で:
```kotlin android/app/build.gradle theme={null}
android {
defaultConfig {
manifestPlaceholders["dodoCallbackScheme"] = "myapp"
}
}
```
`"myapp"`をアプリのスキームに置き換えます。
`ios/YourApp/Info.plist`で:
```xml Info.plist theme={null}
CFBundleURLTypes
CFBundleURLName
myapp
CFBundleURLSchemes
myapp
```
Xcodeの**Info → URL Types** UIから追加することもできます。
`app.json`で:
```json app.json theme={null}
{
"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`を編集した後、ネイティブプロジェクトを再ビルドします。
```sh theme={null}
npx expo prebuild --clean
```
これは開発ビルドでのみ動作し、Expo Goでは動作しません。
## 使用方法
```typescript theme={null}
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コアがリダイレクトをネイティブに処理するためです。両プラットフォームでリスナーを無条件に登録しても安全です。
```typescript theme={null}
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を使用して、すべての支払いをバックエンドから確認してください。
`succeeded`、`failed`、`cancelled`、`pending`、`expired`のいずれか。
戻りURLにその値が含まれていた場合に設定されます。UIに表示しますが、アクセス許可には使用しないでください。下記の「支払いの検証」を参照してください。
サブスクリプションのチェックアウトで設定されます。
チェックアウトにlicense key商品が含まれている場合に設定されます。
チェックアウトでメールアドレスを取得した場合に設定されます。
戻りURLに含まれるすべてのquery parameterを、そのまま保持します。
## 支払いの検証
支払いが成功したとき、またはサブスクリプションが有効化されたとき、Dodo Paymentsはバックエンドを呼び出します。
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時に復元し、バックエンドと照合してください。
```typescript theme={null}
import { DodoCheckout } from '@dodopayments/react-native-checkout';
const abandoned = await DodoCheckout.getAbandonedSession();
if (abandoned) {
// reconcile abandoned.sessionId with your backend, then:
await DodoCheckout.clearAbandonedSession();
}
```
## 関連情報
Android、iOS、Flutterで共通のコントラクトです。
チェックアウト統合を含む完全なExpoの例です。