実装方法を設定する

Stripe Terminal SDK またはサーバー主導型の組み込みを設定して、対面決済の受け付けを開始できるようにします。

注意

Terminal の React Native ライブラリは非公開ベータであり、現在開発中です。問題が発生した場合は、Stripe の Github プロジェクトまでご報告ください。

React Native SDK の使用を開始する際に必要なステップは以下の 4 つです。

アプリに SDK をインストールします。
アプリを設定します。
アプリとバックエンドで接続トークンのエンドポイントを設定します。
アプリで SDK を初期化します。

SDK をインストールする
クライアント側

React Native SDK はオープンソースであり、詳細なドキュメントが提供されています。この内部ではネイティブの iOS SDK および Android SDK が使用されます。以下を実行して SDK をインストールします。

Command Line
npm install @stripe/stripe-terminal-react-native

アプリを設定する
クライアント側

Pod

ネイティブ依存関係をインストールするには、ios ディレクトリーで pod install を実行する必要があります。

権限

アプリが Stripe Terminal SDK で動作するように準備するには、Xcode の Info.plist ファイルにいくつかの変更を加えます。

次のキーと値のペアを使用して位置サービスを有効にします。

プライバシー: Location When In Use Usage Description (使用されている位置の確認に関する記述)
キー	NSLocationWhenInUseUsageDescription
値	決済を受け付けるには、位置情報へのアクセスが必要です。

決済に関連する不正使用のリスクを減らし、不審請求の申請を最小限に抑えるため、Stripe は決済が発生した場所を把握する必要があります。SDK が iOS デバイスの場所を特定できない場合は、位置情報へのアクセスが復元されるまで決済無効化されます。

アプリがバックグラウンドで実行され、Bluetooth リーダーに接続されたままであることを確認してください。
Bluetooth リーダーに必要なバックグラウンドモード
キー UIBackgroundModes
値 bluetooth-central (Bluetooth LE アクセサリーを使用)
bluetooth-central バックグラウンドモードを設定すると、アプリがバックグラウンドで実行されている場合、または iOS デバイスがロックされている場合に、リーダーをスタンバイモードで保持することができます。この値がないと、スタンバイは失敗します。アプリがバックグラウンドで実行されている場合、リーダーは電力を節約するために自動的にオフになります。

Bluetooth リーダーに必要なバックグラウンドモード
キー	UIBackgroundModes
値	bluetooth-central (Bluetooth LE アクセサリーを使用)

アプリで Bluetooth に対する権限のダイアログを表示できるようにします。これは、アプリが Bluetooth リーダーへの接続に対応していない場合でも含める必要がある、アプリストアの必須要件です。

プライバシー: Bluetooth Always Usage Description (Bluetooth の常時使用に関する記述)
キー	NSBluetoothAlwaysUsageDescription
値	このアプリは、Bluetooth を使用してサポート対象のカードリーダーに接続します。

iOS 13 では、アプリによる Bluetooth 周辺機器の使用に関して、これまでよりも具体的な権限が新たに導入されました。Core Bluetooth とリンクするアプリは、初回起動時にアプリがクラッシュしないように、このキーを Info.plist ファイルに含める必要があります。

App Store に提出する際に、アプリの検証確認を渡します。SDK バージョン 3.4.0 では、この権限要件は削除されています。

プライバシー: Bluetooth Peripheral Usage Description (Bluetooth 周辺機器の使用に関する記述)
キー	NSBluetoothPeripheralUsageDescription
値	サポート対象のカードリーダーに接続するには、Bluetooth 接続が必要です。

これは一例です。アプリ内でのユーザーの権限を求めるプロンプトの文言を変更することもできます。

アプリの Info.plist を保存します。これで、正しく設定され、Stripe Terminal SDK で使用できるようになりました。

接続トークンのエンドポイントを設定する
サーバー側
クライアント側

サーバー側

リーダーに接続するには、バックエンドからご自身の Stripe アカウントに、リーダーを使用するための SDK 権限を付与する必要があります。それには、ConnectionToken (接続トークン) から secret (シークレット) を提供します。バックエンドは信頼できるクライアントに対してのみ、接続トークンを作成するようにする必要があります。

サーバー側の ConnectionToken からシークレットを取得してクライアント側に渡します。

注意

ConnectionToken の secret により、お客様は任意の Stripe Terminal リーダーに接続して、Stripe アカウントで支払いを受け取ることができます。必ず、接続トークンの作成に使用するエンドポイントを認証し、クロスサイトリクエストフォージェリ (CSRF) から保護してください。

クライアント側

SDK にこのエンドポイントへのアクセスを許可するには、バックエンドから ConnectionToken をリクエストするトークンプロバイダーの単一の関数を作成します。

Root.tsx
import { StripeTerminalProvider } from '@stripe/stripe-terminal-react-native';

const fetchTokenProvider = async () => {
  const response = await fetch(`{YOUR BACKEND URL}/connection_token`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
  });
  const { secret } = await response.json();
  return secret;
};

この関数は、SDK で Stripe またはリーダーの認証が必要になるたびに呼び出されます。また、リーダーへの接続に新しい接続トークンが必要な場合 (アプリがリーダーから切断されたときなど) にも呼び出されます。SDK がバックエンドから新しい接続トークンを取得できない場合、リーダーへの接続は失敗し、サーバーからエラーが返されます。

注意

接続トークンは、キャッシュに入れたり、ハードコード化しないでください。接続トークンのライフサイクルは、SDK によって管理されます。

SDK を初期化する
クライアント側

作業を開始するには、ステップ 3 で実装したトークンプロバイダーをプロパティとして StripeTerminalProvider に渡します。

Root.tsx
import { StripeTerminalProvider } from '@stripe/stripe-terminal-react-native';

function Root() {
  const fetchTokenProvider = async () => {
    const response = await fetch(`${API_URL}/connection_token`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
    });
    const { secret } = await response.json();
    return secret;
  };

  return (
    <StripeTerminalProvider
      logLevel="verbose"
      tokenProvider={fetchTokenProvider}
    >
      <App />
    </StripeTerminalProvider>
  );
}

最後のステップとして、useStripeTerminal フックから initialize メソッドを呼び出します。initialize メソッドは、StripeTerminalProvider を含むコンポーネントからではなく、StripeTerminalProvider 内にネストされたコンポーネントから呼び出す必要があります。

App.tsx
function App() {
  const { initialize } = useStripeTerminal();

  useEffect(() => {
    initialize();
  }, [initialize]);

  return <View />;
}

SDK の更新

Stripe は定期的に、新機能、バグ修正、セキュリティー更新を含む更新をリリースしています。SDK は、新しいバージョンが利用可能になり次第すぐに更新してください。現在利用可能な SDK は以下のとおりです。

次のステップ

リーダーに接続する

注