メインコンテンツへスキップ
すべてのシステムが正常に動作しています変更履歴v1
ログイン
SDKs

React Native SDK

DEUNA React Native SDKをインストールし、ウィジェット、ネイティブウォレット、リダイレクト、および不正検知デバイスフローを統合します。

最終更新日 October 5, 2026
このページで

DEUNA React Native SDK を使用して、Payment Widget、Payment Vault、Click to Pay、次アクション、バウチャー、およびネイティブウォレットの統合を iOS および Android で共有します。

インストール#

SDK とその WebView 依存関係をインストールします。

npm install @deuna/react-native-sdk react-native-webview

React Native CLI

Autolinking はネイティブモジュールを登録します。パッケージを追加またはアップグレードした後、iOS Pod をインストールしてください:

Shell
npx pod-install

2.1 以降のリリースには、ネイティブの Apple Pay、Google Pay、および不正行為モジュールが含まれています。リポジトリの ネイティブ設定に関する注記 現在のXcodeおよびAndroidの依存関係互換性ブロックに必要な、 bare React Nativeプロジェクトの要件。

Expo

設定プラグインを追加します。 アプリケーションで使用するウォレットと不正行為防止プロバイダーのみを指定してください。

app.jsonJSON
{
  "expo": {
    "plugins": [
      [
        "@deuna/react-native-sdk",
        {
          "merchantIdentifiers": ["merchant.com.example"],
          "googlePay": true,
          "fraudProviders": []
        }
      ]
    ]
  }
}

設定プラグインを変更した後、ネイティブプロジェクトを再生成します。

Shell
npx expo prebuild

SDKにはネイティブモジュールが含まれているため、Expo Goではなく、開発ビルドでテストしてください。

レンダラーの初期化とマウント#

1つのSDKインスタンスを作成し、レンダリング時に保持します。 DeunaWidget そのインスタンスに対して、1つだけマウントします。このコンポーネントは、モーダルと埋め込みWebViewの両方のフローをレンダリングします。初期化呼び出しは、そのコントローラーのみを設定します。

JavaScript
import {useMemo} from 'react';
import {DeunaSDK, DeunaWidget} from '@deuna/react-native-sdk';

export function CheckoutScreen() {
  const deunaSDK = useMemo(
    () =>
      DeunaSDK.initialize({
        publicApiKey: 'YOUR_PUBLIC_API_KEY',
        environment: 'sandbox',
      }),
    []
  );

  return (
    <>
      <CheckoutContent deunaSDK={deunaSDK} />
      <DeunaWidget instance={deunaSDK} />
    </>
  );
}

Payment Widget の起動#

使用する Mode.MODAL SDKが所有するモーダルの場合、 DeunaWidget は初期化されたコントローラーに反応します。

JavaScript
import {Mode} from '@deuna/react-native-sdk';

await deunaSDK.initPaymentWidget({
  orderToken,
  mode: Mode.MODAL,
  language: 'en',
  callbacks: {
    onSuccess: async (order) => {
      await deunaSDK.close();
      navigation.navigate('PaymentSuccess', {order});
    },
    onError: (error) => showRetry(error),
    onClosed: (action) => navigation.goBack(),
    onPaymentProcessing: () => disablePayButton(),
    onEventDispatch: (event, payload) => {
      analytics.track(event, payload);
    },
  },
});

コールバックを使用してインターフェースを更新します。検証されたWebhookから最終的な注文を確認し、アプリケーションの状態のみに依存しないようにします。

決済ウィジェットの埋め込み#

初期化 Mode.EMBEDDED およびレンダリング DeunaWidget 画面のレイアウト内に配置するのではなく、画面の横に配置するのではなく。

JavaScript
await deunaSDK.initPaymentWidget({
  orderToken,
  mode: Mode.EMBEDDED,
  callbacks,
});
JavaScript
<View style={{flex: 1}}>
  <DeunaWidget instance={deunaSDK} />
</View>

同じ SDK インスタンスを両方の場所で使用しないでください。アンマウント DeunaWidget アクティブなコントローラーを停止します。

アプリケーションが決済ボタンを所有している場合は、 hidePayButton: true次に、呼び出し isValid() および submit() ボタンのアクションから。

JavaScript
const handlePay = async () => {
  if (!(await deunaSDK.isValid())) return;
  const result = await deunaSDK.submit();
  if (result.status === 'error') showRetry(result);
};

利用可能な機能#

体験メソッド重要な入力
決済ウィジェットinitPaymentWidget(...)orderToken、コールバック、オプション mode
支払いVaultinitElements(...)コールバック; types 省略可能
クリック・トゥ・ペイinitElements(...)types: [{name: 'click_to_pay'}]
次のアクションinitNextAction(...)注文トークン、コールバック、および mode
バウチャーinitVoucherWidget(...)注文トークン、コールバック、および mode

SDKは、以下の機能も提供します。 setCustomStyle(...), refetchOrder(), getWidgetState(), isValid(), submit(), および close() アクティブなコントローラーに対して。

Payment Vault と Click to Pay#

Payment Vault は、標準の Elements の体験です。 認証された userToken または userInfo 顧客向け。

JavaScript
await deunaSDK.initElements({
  orderToken,
  userInfo: {email: 'ada@example.com'},
  types: [{name: 'vault'}],
  mode: Mode.MODAL,
  callbacks: {
    onSuccess: (credential) => useSavedCredential(credential),
    onError: (error) => showRetry(error),
    onClosed: (action) => showPaymentMethods(action),
  },
});

使用する {name: 'click_to_pay'} Click to Pay 用。

ネイティブなApple PayおよびGoogle Pay#

ウォレットボタンを表示する前に、商人の設定とデバイスのサポートを確認してください。 戻り値は apple_pay および google_pay.

JavaScript
const userInfo = {email: 'ada@example.com'};
const wallets = await deunaSDK.getWalletsAvailable({
  orderToken,
  userInfo,
});

setShowApplePay(wallets.includes('apple_pay'));
setShowGooglePay(wallets.includes('google_pay'));

可用性確認後、ボタン操作でネイティブのシートを起動します。Apple Payの場合、この呼び出しをユーザーのジェスチャーに直接含めます。

JavaScript
const launchWallet = (provider: 'apple_pay' | 'google_pay') => {
  const type = provider === 'apple_pay' ? 'APPLE_PAY' : 'GOOGLE_PAY';

  deunaSDK.initElements({
    orderToken,
    userInfo,
    types: [{name: type}],
    callbacks: {
      onSuccess: (credential) => useSavedCredential(credential),
      onError: (error) => showRetry(error),
      onClosed: () => showPaymentMethods(),
    },
  });
};

Apple Payには、iOSの権限と商人の識別子が必要です。Google Payには、商人の有効化と、対応するAndroidデバイスが必要です。詳細は、 Apple Pay の統合について説明します および Google Pay.

保留中の操作を続行#

DEUNA が支払いに対してサポートされている 3DS チャレンジまたはリダイレクトが必要であると報告した場合、同じ注文トークンを使用してください。

JavaScript
await deunaSDK.initNextAction({
  orderToken,
  mode: Mode.MODAL,
  callbacks: {
    onSuccess: (order) => showConfirmation(order),
    onError: (error) => showRetry(error),
    onClosed: () => showPaymentMethods(),
  },
});

クーポンを開く#

JavaScript
await deunaSDK.initVoucherWidget({
  orderToken,
  mode: Mode.MODAL,
  callbacks: {
    onSuccess: (order) => showVoucherInstructions(order),
    onError: (error) => showRetry(error),
    onClosed: () => showPaymentMethods(),
    onDownloadFile: (file) => saveVoucher(file),
  },
});

外部リダイレクトの処理#

デフォルトのアダプターは、React Nativeを使用して外部URLを開きます。 LinkingChrome Custom Tabsまたは SFSafariViewController が必要な支払い方法 InAppBrowserAdapter 初期化時に提供されます。

JavaScript
const deunaSDK = DeunaSDK.initialize({
  publicApiKey: 'YOUR_PUBLIC_API_KEY',
  environment: 'sandbox',
  inAppBrowserAdapter: myInAppBrowserAdapter,
});

アダプターは、 openUrl(url) を実装し、外部ブラウザが閉じられた後に解決する必要があります。詳細は、リポジトリの アダプターの移行例.

不正利用デバイスデータ#

顧客が決済を行う前に、関連するプロバイダーを事前に初期化し、必要に応じて結合された識別子を生成します。

JavaScript
await deunaSDK.initializeFraudProviders({
  MERCADOPAGO: {},
});

const fraudId = await deunaSDK.generateFraudId({
  MERCADOPAGO: {},
});

Expoプロジェクトでは、小文字でプロバイダー名を構成プラグインに記載する必要があります。例： fraudProviders: ['mercadopago'], 再実行 expo prebuild. 独立プロジェクトは、対応するネイティブ依存関係をリンクする必要があります。 詳細は参照してください。 デバイスフィンガープリントを統合.

コールバックとライフサイクル参照を参照してください。#

コールバックまたはメソッドこれを使用してください
onSuccess体験が成功した場合にインターフェースを更新します。
onError読み取り type および metadata および、再試行の動作を説明します。
onClosed顧客とSDKによって制御されたクローズを区別します。
onEventDispatchサポートされている決済または Elements のライフサイクルイベントを監視する。
onCardBinDetectedカードのBIN（銀行識別番号）を検出した場合の対応
onInstallmentSelected分割払いプランの選択に応答します。
onPaymentProcessing重複した決済アクションを防止します。
onDownloadFileURL または Base64 形式で返されたバウチャーファイルを処理する。
close()アクティブなコントローラーと外部ビューの状態を閉じる。

公式の例とソースコード#

React NativeソースTypeScript API、ネイティブブリッジ、リリース、および変更ログ。例：アプリケーションReact Native CLI および Expo の例は、共有の統合コードに基づいています。統合フック初期化、ウィジェット、コールバック、不正行為プロバイダー、およびプレゼンテーションモード。

詳細は ModalScreen.tsx, EmbeddedScreen.tsx, および WalletsScreen.tsx 完全な実行可能なフローを実現するため。