実装方法を設定する

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

注意

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

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

Install the SDK in your app.
Configure your app.
Set up the connection token endpoint in your app and backend.
Initialize the SDK in your app.

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 (シークレット) を提供します。バックエンドは信頼できるクライアントに対してのみ、接続トークンを作成するようにする必要があります。

Obtain the secret from the ConnectionToken on your server and pass it to the client side.

注意

The secret from the ConnectionToken lets you connect to any Stripe Terminal reader and take payments with your Stripe account. Be sure to authenticate the endpoint for creating connection tokens and protect it from cross-site request forgery (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 は以下のとおりです。

次のステップ

Connect to a reader

注