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

React Native SDK

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

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

DEUNA React Native SDKを使用して、Payment Widget、Payment Vault、Click to Pay、next-action、voucher、およびnative-walletの統合をiOSおよびAndroidアプリケーション間で共有します。

要件#

DEUNAのReact Native SDKを使用するには、以下が必要です:

  • Node.js: 20以上
  • パッケージマネージャー: Yarnまたはnpm
  • React: 18.2.0以上
  • React Native: 0.73.0以上
  • React Native WebView: 13.15.0以上
  • Expo SDK: 50以上（Expoを使用するアプリの場合）
  • DEUNA認証情報: アクティブなアカウントと有効なDEUNA認証情報（遅延が発生した場合は support@deuna.com にお問い合わせください）
  • Androidプロジェクト: minSdkVersion 24 以上
  • Huaweiデバイス: HarmonyOS 2.0以上

SDKのインストール#

SDKの初期化を開始します。

1. 依存関係の追加

プロジェクトにDEUNA SDKを追加します:

yarn add @deuna/react-native-sdk

必要な react-native-webview （≥ 13.15.0）ピア依存関係を追加します:

yarn add react-native-webview

2. リンク

バージョン2.1.0以降、SDKにはネイティブのGoogle PayおよびApple Pay支払いシートを有効にするネイティブモジュールが含まれています。

React Native CLI

実行 pod install iOSでネイティブモジュールをリンクするには:

Shell
cd ios && pod install

Expo（マネージドワークフロー）

設定プラグインを app.jsonに追加します。アプリケーションが使用するウォレット権利と不正検知プロバイダーのみを指定してください:

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

ネイティブ ios/ および android/ ディレクトリをモジュール登録済みで再生成するためにprebuildを実行します:

Shell
npx expo prebuild

3. 1.xから2.x.xへの移行ガイド

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

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 の起動#

Payment Widgetは、顧客に複数の支払い方法を提供できる統合コンポーネントです：

  • クレジットカードおよびデビットカード：Visa、Mastercard、American Express、およびコブランドカード。
  • 代替支払い方法（APM）：OXXO、KueskiPay、Aplazo、Daviplata、Nequiなど。
  • デジタルウォレット：PayPal、Apple Pay、Google Pay。

モーダル表示

使用する Mode.MODAL （デフォルト）SDK管理のモーダルシート用。マウントされた <DeunaWidget instance={deunaSDK} /> は自動的に画面の上に表示されます：

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

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

パラメータリファレンス

属性Typeモーダル埋め込み説明
orderTokenstring✅✅必須。DEUNA APIで作成された注文の一意トークン。

重要：DEUNA APIで注文を作成する際、 redirect_url を定義しないでください（ onSuccess コールバックをモバイルアプリ内で実行したい場合）。
callbacksobject✅✅必須。ウィジェットイベントを処理するコールバック関数（onSuccess, onError, onClosed, onCardBinDetected, onInstallmentSelected, onPaymentProcessing, onDownloadFile, onEventDispatch).
modeMode✅✅Mode.MODAL （デフォルト）または Mode.EMBEDDED.
userTokenstring✅✅任意。顧客のDEUNAベアラートークン。

重要：保存済みカードを表示するには、注文作成時に渡された userToken 必須要件 billing_address.email にリンクされたメールアドレス。
styleFilestring✅✅任意。カスタムテーマブランディング（色、タイポグラフィ、ロゴ）を適用するためのDEUNA提供のUUID。
paymentMethodsobject[]✅✅任意。フォームフローに直接起動する単一支払い方法を定義する配列（例： [{ paymentMethod: 'bnpl', processors: ['kueski'] }]）。ウィジェットは方法セレクターを表示せず、その方法のフォームに直接開きます。注：内部チェックアウトシステムは現在1要素のみサポート。
languagestring✅✅任意。言語コード（"es", "en", "pt"）。加盟店のデフォルト設定を上書きします。
behaviorobject✅✅任意。フローカスタマイズ（例： behavior: { paymentMethods: { flowType: "twoStep" } } PayPal用）。
fraudCredentialsobject✅✅任意。不正防止プロバイダー認証情報（例： { RISKIFIED: { storeDomain: 'example.com' } }).
domainstring✅✅任意。デフォルトのベースホスト（https://pay.deuna.io).
hidePayButtonboolean❌✅任意。埋め込みモードで、アプリケーションがネイティブの支払いボタンをレンダリングする場合、組み込みの支払いボタンを非表示にします。

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

ウィジェットを画面レイアウト内に直接表示するには、 mode: Mode.EMBEDDED.

JavaScript
import { useEffect } from 'react';
import { View, Button } from 'react-native';
import { DeunaSDK, DeunaWidget, Mode } from '@deuna/react-native-sdk';

export function EmbeddedCheckoutScreen({ deunaSDK, orderToken }) {
  // Release widget resources on unmount
  useEffect(() => {
    return () => {
      deunaSDK.close();
    };
  }, [deunaSDK]);

  const handleOpenEmbedded = async () => {
    await deunaSDK.initPaymentWidget({
      orderToken,
      mode: Mode.EMBEDDED,
      callbacks: {
        onSuccess: async (order) => {
          await deunaSDK.close();
          navigateToReceipt(order);
        },
        onError: (error) => handlePaymentError(error),
      },
    });
  };

  return (
    <View style={{ flex: 1 }}>
      <View style={{ flex: 1, width: '100%' }}>
        <DeunaWidget instance={deunaSDK} />
      </View>
      <Button title="支払いフォームの読み込み" onPress={handleOpenEmbedded} />
    </View>
  );
}

カスタム支払いボタン（hidePayButton)

アプリが独自の支払いボタンをレンダリングする場合、 hidePayButton: true を渡し、検証と送信を手動で実行します：

JavaScript
await deunaSDK.initPaymentWidget({
  orderToken,
  mode: Mode.EMBEDDED,
  hidePayButton: true,
  callbacks,
});

const handleCustomSubmit = async () => {
  // 1. Validate entered card/payment fields
  const isValid = await deunaSDK.isValid();
  if (!isValid) return;

  // 2. Submit payment
  const result = await deunaSDK.submit();
  if (result.status === 'error') {
    console.error('Submit failed:', result.message);
  }
};
メソッド説明戻り値
deunaSDK.isValid()アクティブな支払いフォームのユーザー入力を検証します。Promise<boolean>
deunaSDK.submit()ウィジェットボタンをクリックするのと同等の支払いを送信します。Promise<{ status: 'success' | 'error', message?: string }>

支払い方法のフィルタリングと設定#

ダイレクトフォームフロー (paymentMethods)

DEUNAのチェックアウトアーキテクチャ (checkout-base および modular-checkout) は、個別の支払いフォームに直接起動することをサポートします。これは フォームフロー.

と呼ばれるパターンです。 paymentMethods SDKパラメータ は配列として型付けされていますが、内部のチェックアウトエンジンは現在 このリスト内の要素を1つのみ

JavaScript
await deunaSDK.initPaymentWidget({
  orderToken,
  paymentMethods: [
    { paymentMethod: 'bnpl', processors: ['kueski'] },
  ],
  callbacks,
});

設定の優先順位解決

表示する支払い方法とフォームを決定する際、DEUNAは以下の順序で設定を解決します：

優先度ソース動作
1 (最高)paymentMethods を返します .initPaymentWidget()ダイレクトフォームフロー：指定された単一の支払い方法フォーム（例：Kueski）に直ちに開き、方法セレクターをバイパスします。
2include_payment_options 注文作成時複数方法選択：注文作成時に指定され、かつアカウントで有効な支払い方法のみを表示します。
3 (フォールバック)マーチャントレベル設定 (/payment-methods)フルセレクター：SDK呼び出しと注文ペイロードの両方で省略された場合、マーチャントアカウントに設定されたすべての有効な支払い方法を表示します。

PayPal設定

フロータイプ (flowType)

PayPalが支払い前に注文サマリーを表示するか、直接認証に進むかを制御します：

JavaScript
await deunaSDK.initPaymentWidget({
  orderToken,
  behavior: {
    paymentMethods: {
      flowType: 'twoStep', // 'twoStep' (order summary first) or 'singleStep' (direct payment)
    },
  },
  callbacks,
});

自動購入 (express)

顧客が以前にPayPalでクイック支払いを承認している場合、即時処理を有効にします：

JavaScript
await deunaSDK.initPaymentWidget({
  orderToken,
  paymentMethods: [
    {
      paymentMethod: 'wallet',
      processors: ['paypal_wallet'],
      configuration: {
        express: true, // Default: true. Set false to prompt user account confirmation.
      },
    },
  ],
  callbacks,
});

動的スタイリングと注文更新#

外観を動的にカスタマイズ (setCustomStyle)

ウィジェットの色、ロゴ、フォントを動的に更新します（例：カードBIN検出時のヘッダーブランディング変更）：

JavaScript
await deunaSDK.setCustomStyle({
  theme: {
    colors: {
      primaryTextColor: '#023047',
      buttonPrimaryFill: '#FFB703',
      buttonPrimaryText: '#000000',
    },
  },
});

注文合計を更新 (refetchOrder)

フランチャイズ固有のプロモーション（例：「Mastercardで15%オフ」）を提供する場合、 onCardBinDetectedをリッスンし、バックエンドで注文合計を再計算してウィジェットに通知します：

JavaScript
callbacks: {
  onCardBinDetected: async (metadata) => {
    if (metadata?.cardBrand === 'Mastercard') {
      // 1. Notify your backend to apply discount to order
      await applyDiscountOnBackend(orderId, 'MASTERCARD_15');

      // 2. Refresh widget to display updated totals
      const updatedOrder = await deunaSDK.refetchOrder();
      console.log('Order refreshed with discount:', updatedOrder);
    }
  },
}

利用可能な機能#

体験メソッド重要な入力
支払いウィジェット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#

Card VaultとElementsソリューションは、即時の支払いトランザクションを必要とせずに、カードトークン化、顧客ウォレット管理、Click to Payを統合します：

  • Card Vault：顧客がクレジットカードとデビットカードを安全に追加、保存、管理し、将来の購入に利用できます。
  • クリック・トゥ・ペイ：グローバルネットワークトークン（Visa、Mastercardなど）を活用した摩擦のないチェックアウト体験を提供します。

モーダル表示

Card VaultまたはElementsウィジェットをモーダルで表示するには、以下の手順に従います：

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

const onShowVaultModal = async () => {
  await deunaSDK.initElements({
    userToken: '<DEUNA_USER_TOKEN>', // Optional
    userInfo: {
      firstName: 'Ada',
      lastName: 'Lovelace',
      email: 'ada@example.com', // Required
    },
    types: [{ name: 'vault' }], // Default experience
    mode: Mode.MODAL,
    callbacks: {
      onSuccess: async (data) => {
        await deunaSDK.close(); // Close modal and release resources
        console.log('Card tokenized successfully:', data);
      },
      onError: async (error) => {
        console.error('Vault error:', error);
        await deunaSDK.close();
      },
      onClosed: (action) => {
        console.log('Vault closed:', action);
      },
      onEventDispatch: (type, response) => {
        console.log('Vault event:', type, response);
      },
    },
    widgetExperience: {
      userExperience: {
        showSavedCardFlow: true, // Optional: toggle for saving card
        defaultCardFlow: false,  // Optional: toggle for saving card as default
      },
    },
  });
};

埋め込みモードで表示

VaultまたはClick to Payフォームを画面レイアウト内に埋め込むには、以下を渡します： mode: Mode.EMBEDDED。以下の点を確認してください： <DeunaWidget /> は、その寸法を定義するコンテナでラップされていること：

JavaScript
import { useEffect } from 'react';
import { View, Button } from 'react-native';
import { DeunaSDK, DeunaWidget, Mode } from '@deuna/react-native-sdk';

export function EmbeddedVaultScreen({ deunaSDK }) {
  useEffect(() => {
    return () => {
      deunaSDK.close(); // Release resources on screen unmount
    };
  }, [deunaSDK]);

  const handleOpenEmbeddedVault = async () => {
    await deunaSDK.initElements({
      mode: Mode.EMBEDDED,
      userInfo: {
        email: 'ada@example.com',
      },
      callbacks: {
        onSuccess: async (data) => {
          await deunaSDK.close();
          console.log('Tokenization successful:', data);
        },
        onError: (error) => console.error(error),
      },
    });
  };

  return (
    <View style={{ flex: 1 }}>
      <View style={{ flex: 1, width: '100%' }}>
        <DeunaWidget instance={deunaSDK} />
      </View>
      <Button title="保存済みカードを追加" onPress={handleOpenEmbeddedVault} />
    </View>
  );
}

パラメータリファレンス initElements

パラメータType説明
callbacksobject必須用 onSuccess, onError, onClosed, onCardBinDetected, および onEventDispatch.
userInfoobject顧客情報のイベントリスナー email 経由で提供されます。 必須 （ userToken). firstName および lastName を渡す場合でも）は、 userToken が提供されている場合はオプションです。
userTokenstring任意. DEUNAユーザーBearerトークン。

重要: 両方を渡す場合 userToken および orderToken、セキュリティ上の理由から保存済みカードを表示するために注文の userToken 必須要件 billing_address.email にリンクされたメールアドレス。
orderTokenstring任意. 既存のチェックアウト注文のコンテキストでトークン化する際の注文トークン。
typesobject[]任意. レンダリングするウィジェットエクスペリエンス： [{ name: 'vault' }] （デフォルト）または [{ name: 'click_to_pay' }]. 省略した場合、デフォルトはVault。
modeModeMode.MODAL （デフォルト）または Mode.EMBEDDED.
widgetExperienceobject任意. マーチャント設定を上書き： userExperience.showSavedCardFlow （カード保存トグルを表示）および userExperience.defaultCardFlow （デフォルトとしてカードを保存するトグルを表示）。
styleFilestring任意. DEUNAで設定されたカスタムスタイルシート/テーマのUUID。
languagestring任意。言語コード（"es", "en", "pt"）。マーチャントのデフォルトを上書き。
hidePayButtonboolean任意. 埋め込み時に、 isValid() および submit().
domainstring任意を使用した手動実行のためのアクションボタンを非表示にします。 https://elements.deuna.com/vault をカスタムドメインに置き換えて）ベースホストを上書き。

Click to Pay統合

Click to Payウィジェットを表示するには、設定します types: [{ name: 'click_to_pay' }].

JavaScript
await deunaSDK.initElements({
  userInfo: {
    firstName: 'Ada',
    lastName: 'Lovelace',
    email: 'ada@example.com', // Required for Click to Pay
  },
  types: [
    {
      name: 'click_to_pay',
    },
  ],
  callbacks: {
    onSuccess: async (data) => {
      await deunaSDK.close();
      console.log('Click to Pay success:', data);
    },
    onError: (error) => console.error('Click to Pay error:', error),
    onClosed: (action) => console.log('Widget closed:', action),
  },
});

ネイティブな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),
  },
});

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

以降、 v2.0.0ネイティブブラウザ機能を必要とする支払い方法（例： Mercado Pago Wallet）は、 カスタムタブ（Android） または Safari View Controller（iOS） セキュアなセッション処理とCookieの永続化を確保するためです。これをサポートするには、 inAppBrowserAdapter を提供し、 InAppBrowserAdapter インターフェースを実装した DeunaSDK.initialize.

オプションA: @deuna/react-native-in-app-browser (Metro / Expo) を使用する場合

MetroまたはExpoを使用している場合は、 @deuna/react-native-in-app-browser をインストールし、 ExpoWebBrowserAdapter:

JavaScript
import { DeunaSDK } from '@deuna/react-native-sdk';
import { ExpoWebBrowserAdapter } from '@deuna/react-native-in-app-browser';

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

オプションB: 使用 react-native-inappbrowser-reborn (Webpack / カスタム)

Expoモジュールと互換性のないWebpackまたはカスタムバンドラーを使用する場合は、以下を使用します: react-native-inappbrowser-reborn:

Shell
npm install react-native-inappbrowser-reborn
# or
yarn add react-native-inappbrowser-reborn

アダプターを実装:

JavaScript
import { Linking } from 'react-native';
import InAppBrowser from 'react-native-inappbrowser-reborn';
import { InAppBrowserAdapter, DeunaSDK } from '@deuna/react-native-sdk';

class InAppBrowserRebornAdapter implements InAppBrowserAdapter {
  async openUrl(url: string): Promise<void> {
    try {
      if (await InAppBrowser.isAvailable()) {
        await InAppBrowser.open(url, {
          dismissButtonStyle: 'cancel',
          preferredBarTintColor: '#023047',
          preferredControlTintColor: '#FFFFFF',
          readerMode: false,
          animated: true,
        });
      } else {
        // Fallback to external browser
        await Linking.openURL(url);
      }
    } catch (error) {
      console.error('Error opening in-app browser:', error);
      throw error;
    }
  }
}

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

不正デバイスデータとフィンガープリンティング#

以下の DeunaSDK.initializeFraudProviders(...) プロバイダーをバックグラウンドでウォームアップする静的関数、および統一されたDEUNA不正ペイロードを生成する deunaSDK.generateFraudId(...) インスタンスメソッド（またはウィジェット初期化子の fraudCredentials パラメータ）。

DEUNA React Native SDKは **モジュラーでリフレクションベースのアーキテクチャ（ゼロ肥大化）**を採用しています: デフォルトではサードパーティの不正防止SDKをバンドルしません。 使用する特定のプロバイダーのみを追加してください。 プロバイダーを使用しない場合、アプリサイズのペナルティはゼロです。

サポート対象プロバイダー

プロバイダ説明必須パラメータ
MERCADOPAGOMercado Pagoデバイス行動プロファイリング（不要）
RISKIFIEDRiskified BeaconビーコンstoreDomain
CYBERSOURCECyberSource ThreatMetrixプロファイリングorgId, merchantId （オプション: fpServer)
SIGNIFYDSignifyd ThreatMetrixプロファイリングorgId （オプション: fpServer)
ACCERTIFYAccertify InMobileプロファイリングassets/bundle内の設定ファイル （オプション: locationConsent, phoneConsent)
KOUNTKount Data CollectormerchantId, clientId, dataCollectorUrl, environment
SIFTSift Science デバイスプロファイリングaccountId, beaconKey

依存関係のリンク

プロジェクト環境に対応するセットアップに従ってください (Expo または React Native CLI).

A. Expo (Config Plugin)

Expo プロジェクトで Continuous Native Generation (CNG) または EAS Buildを使用している場合、契約しているプロバイダーのみを有効にします。それらを fraudProviders 配列にリストして app.json:

app.jsonJSON
{
  "expo": {
    "plugins": [
      [
        "@deuna/react-native-sdk",
        {
          "fraudProviders": [
            "mercadopago",
            "riskified"
          ]
        }
      ]
    ]
  }
}

で指定します。 fraudProviders: "mercadopago", "riskified", "cybersource", "signifyd", "accertify", "kount", "sift".

を iOS プロジェクト / バンドルに配置します。 app.jsonを更新した後、ネイティブプロジェクトを再生成します:

Shell
npx expo prebuild --clean

B. React Native CLI

標準の React Native CLI プロジェクトでは、必要なプロバイダーのみのネイティブ依存関係を ホストアプリケーションファイルに追加します: Android 設定

Mercado Pago Maven リポジトリ
  1. : Mercado Pago を使用する場合、Mercado Libre Maven リポジトリが(または android/build.gradle ) に含まれていることを確認します。 settings.gradle):
GROOVY
allprojects {
    repositories {
        google()
        mavenCentral()
        maven { url "https://artifacts.mercadolibre.com/repository/android-releases/" }
    }
}

  1. ベンダー AAR 配置: Cybersource、Signifyd、または Accertify を使用する場合、ベンダー AAR をダウンロードして android/app/libs/:

    • Cybersourceに配置します: AAR ファイルを android/app/libs/cybersource/.
    • Signifydに配置します: AAR ファイルを android/app/libs/signifyd/.
    • AccertifyAccertify 設定アセット inmobile および inmobile-common AARファイル内の android/app/libs/accertify/.

  2. 依存関係: 必要なプロバイダーのみを内部に追加してください android/app/build.gradle をクリック dependencies { ... }:

<｜DSML｜function_callsGROOVY
dependencies {
    // --- Add ONLY the providers you use ---

    // Mercado Pago
    implementation("com.mercadolibre.android.device:sdk:4.0.1")

    // Riskified
    implementation("com.riskified:android-sdk:1.11.0:nogoogle@aar")

    // CyberSource (AARs placed in app/libs/cybersource)
    implementation(fileTree(dir: "libs/cybersource", include: ["*.aar"]))

    // Signifyd (AARs placed in app/libs/signifyd)
    implementation(fileTree(dir: "libs/signifyd", include: ["*.aar"]))

    // Accertify (AARs placed in app/libs/accertify + required transitive dependencies)
    implementation(fileTree(dir: "libs/accertify", include: ["*.aar"]))
    implementation("io.insert-koin:koin-core:3.5.6")
    implementation("androidx.biometric:biometric:1.1.0")
    implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.6.3")

    // Kount
    implementation("com.kount:kount-data-collector:4.1.0")

    // Sift
    implementation("sift-android:sift-android:0.14.0")
}
  1. Accertify アセット:
    • AndroidAccertify 設定アセット server_keys_message_hosted.json および inmobile.properties を返します android/app/src/main/assets/.
    • iOS: 追加 server_keys_message_hosted.json および InMobile.plist を Xcode プロジェクトのアプリの Copy Bundle Resources に追加 target.
iOS設定 (ios/Podfile)

内で、 target 'YourApp' do 必要なプロバイダーのサブスペックのみを追加します：

ios/PodfileRuby
target 'YourApp' do
  # Add ONLY the subspecs you need:
  pod 'DeunaSDK/MercadoPago'
  pod 'DeunaSDK/Riskified'
  pod 'DeunaSDK/Cybersource'
  pod 'DeunaSDK/Signifyd'
  pod 'DeunaSDK/Kount'
  pod 'DeunaSDK/Sift'
  pod 'DeunaSDK/Accertify'
end

次に実行：

Shell
cd ios && pod install

プロバイダーの詳細と制約

RISKIFIED

  • 必須: storeDomain
  • 構成の例:
    JSON
    {
  "RISKIFIED": {
    "storeDomain": "yourdomain.com"
  }
}

CYBERSOURCE

  • 必須: orgId, merchantId
  • 任意: fpServer (デフォルト: h.online-metrix.net)
  • 構成の例:
    JSON
    {
  "CYBERSOURCE": {
    "orgId": "your_org_id",
    "merchantId": "your_merchant_id"
  }
}

SIGNIFYD

  • 必須: orgId
  • 任意: fpServer (デフォルト: imgs.signifyd.com)
  • 構成の例:
    JSON
    {
  "SIGNIFYD": {
    "orgId": "your_org_id"
  }
}

ACCERTIFY

  • 任意: locationConsent (デフォルト: true), phoneConsent (デフォルト: true)
  • 必要なファイル: 公開暗号化キーファイル server_keys_message_hosted.json とエンドポイントプロパティ(inmobile.properties Androidでは src/main/assets/ および InMobile.plist iOSバンドルリソース内)は、マーチャントオンボーディング中にAccertifyから取得する必要があります。
  • 推移的依存関係 (Android): Accertify AARにはKoin DI (io.insert-koin:koin-core:3.5.6)、AndroidX Biometric (androidx.biometric:biometric:1.1.0)、およびKotlinx Serializationが必要です。org.jetbrains.kotlinx:kotlinx-serialization-json:1.6.3).
  • 構成の例:
    JSON
    {
  "ACCERTIFY": {
    "locationConsent": true,
    "phoneConsent": false
  }
}

KOUNT

  • 必須: merchantId, clientId, dataCollectorUrl, environment
  • 構成の例:
    JSON
    {
  "KOUNT": {
    "merchantId": "your_merchant_id",
    "clientId": "your_client_id",
    "dataCollectorUrl": "https://...",
    "environment": "TEST"
  }
}

SIFT

  • 必須: accountId, beaconKey
  • 構成の例:
    JSON
    {
  "SIFT": {
    "accountId": "your_account_id",
    "beaconKey": "your_beacon_key"
  }
}

MERCADOPAGO

  • 必須: なし ({})
  • Android: Mercado Libre Maven リポジトリが必要です (https://artifacts.mercadolibre.com/repository/android-releases/) および依存関係 com.mercadolibre.android.device:sdk:4.0.1.
  • iOS: リンク先 pod 'DeunaSDK/MercadoPago'.
  • 構成の例:
    JSON
    {
  "MERCADOPAGO": {}
}

早期バックグラウンド初期化

なぜなら initializeFraudProviders は 静的メソッドだからです、チェックアウトウィジェットのインスタンス化や起動前にバックグラウンドで実行できます：

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

const CartScreen = () => {
  useEffect(() => {
    // Pre-warm fraud SDKs as soon as the cart or store view mounts
    DeunaSDK.initializeFraudProviders({
      MERCADOPAGO: {},
    });
  }, []);

  return (
    // Your cart UI components
  );
};

実装オプション

オプション1：インスタンスメソッドによる直接呼び出し（generateFraudId)

generateFraudId は初期化済みの DeunaSDK インスタンス。自動的に設定済みの publicApiKey および environment:

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

const deunaSDK = DeunaSDK.initialize({
  publicApiKey: 'YOUR_PUBLIC_API_KEY',
  environment: 'production',
});

async function getFraudToken() {
  const fraudId = await deunaSDK.generateFraudId({
    RISKIFIED: {
      storeDomain: 'yourdomain.com',
    },
    MERCADOPAGO: {},
  });

  // Returns a Base64-encoded JSON string or null
  console.log('Base64 Fraud ID:', fraudId);

  if (fraudId) {
    const decoded = atob(fraudId);
    console.log('Decoded Tokens:', JSON.parse(decoded));
  }
}

オプション2: fraudCredentials をウィジェットに直接渡す

DEUNA支払いウィジェットを使用する際は（initPaymentWidget, initElements, initNextAction, initVoucherWidget）、プロバイダー設定を fraudCredentials経由で直接渡してください。SDKは購入時に内部で generateFraudId を呼び出します：

JavaScript
await deunaSDK.initPaymentWidget({
  orderToken: 'YOUR_ORDER_TOKEN',
  mode: Mode.MODAL,
  callbacks: {
    onSuccess: (data) => console.log('Payment success:', data),
    onError: (error) => console.error('Payment error:', error),
    onClosed: () => console.log('Widget closed'),
  },
  fraudCredentials: {
    RISKIFIED: {
      storeDomain: 'yourdomain.com',
    },
    MERCADOPAGO: {},
  },
});

動作とランタイム特性

  • ゼロ・ブラウト＆クラッシュ・セーフ：JSONリクエストにプロバイダーが含まれていても、そのネイティブ依存関係がアプリに追加されていない場合、ネイティブリフレクションは未処理の例外をスローしたりクラッシュすることなく安全に無視します。
  • 並列実行: 要求されたすべてのプロバイダーのプロファイリングは、バックグラウンドスレッドで同時に実行されます。
  • フォールバック動作: デバイス上で有効なプロバイダーが設定されていないか利用できない場合、 generateFraudId は null.

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

次の initPaymentWidget に解決され、Elementsの初期化子は支払いの進行状況を監視し、UIを更新し、リソースを解放するための型付きコールバックを受け入れます。

コールバックモーダル埋め込みいつトリガーされますか？
onSuccess✅✅支払いが成功しました。注文データのJSONが含まれています。常に await deunaSDK.close() を呼び出してウィジェットリソースを解放してください。
onError✅✅ロードまたはチェックアウト処理中にエラーが発生しました。型指定された PaymentsError.
onClosed✅❌モーダルが閉じました。受信します userAction （顧客による却下）または systemAction （経由でクローズ） close()). 注：埋め込みモードではトリガーされません。
onPaymentProcessing✅✅お客様が支払いボタンをクリックし、処理が開始されました。このイベントを使用してボタンを無効化し、進行状況インジケーターを表示します。
onCardBinDetected✅✅カードのBINが検出またはクリアされたときにトリガーされます（ null お客様が番号を削除したときに返されます）。フランチャイズ割引に使用します。
onInstallmentSelected✅✅お客様が分割払いプランを選択したときにトリガーされます（ null 一括払いのときに返されます）。
onDownloadFile✅✅お客様がバウチャーまたは領収書のダウンロードをリクエストしたときにトリガーされます。
onEventDispatch✅✅すべての基盤となる CheckoutEvent の発生を出力し、カスタムロギングと分析に使用します。

エラーの処理（onError)

エラーを検査して type 初期化の失敗と支払いの拒否を区別します：

JavaScript
onError: async (error) => {
  switch (error.type) {
    case 'INITIALIZATION_FAILED':
      // Widget could not load; release controller and retry or notify user
      await deunaSDK.close();
      showToast('Payment system currently unavailable');
      break;
    case 'PAYMENT_ERROR':
      // Card declined or processor rejection
      showRetryScreen(error.message);
      break;
    default:
      console.warn('Unhandled payment error:', error);
      break;
  }
}

ファイルダウンロードの処理（onDownloadFile)

バウチャーまたは現金支払いの指示で領収書やバーコードが提供される場合：

JavaScript
callbacks: {
  onDownloadFile: (file) => {
    const { type, data } = file;
    if (type === 'url') {
      // Download or open external receipt URL
      Linking.openURL(data);
    } else if (type === 'base64') {
      // Save base64 image or PDF to local file system
      saveBase64ToGallery(data);
    }
  },
}

リソースの解放（close)

次の close() このメソッドは内部のWebViewコントローラーを解放し、イベントサブスクリプションをクリアします。常に呼び出してください。 deunaSDK.close() を返します onSuccess また、埋め込みウィジェットの場合は画面アンマウントフック（useEffect クリーンアップ）で必ず呼び出してください。

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

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

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

このセクションで

開始初期化決済ウィジェット利用可能なエクスペリエンス埋め込みモードElementsとカード保管庫Apple PayとGoogle Pay3DSとNext Actionバウチャーウィジェット外部リダイレクト不正対策デバイスデータレスポンスとコールバックサンプルとソースコードリリースノート