実装方法を設定する

クライアント側

作業を開始するには、このスクリプトを決済ページに含めます。最新のリーダーソフトウェアとの互換性を保つため、このスクリプトは常に https://js.stripe.com から直接読み込む必要があります。スクリプトをバンドルに含めたり、そのコピーを自身でホストすることがないようにしてください。これを行うと、組み込みが警告なく破損することがあります。

<script src="https://js.stripe.com/terminal/v1/"></script>

Terminal JS SDK をモジュールとして使用する

Stripe では、npm パッケージも用意しています。これを使用すると、Terminal JS SDK をモジュールとして読み込み、使用できます。詳細については、GitHub のプロジェクトをご覧ください。

サーバー側

アプリケーションから Stripe API にアクセスするには、Stripe の公式ライブラリーを使用します。

# Available as a gem
sudo gem install stripe

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

サーバー側

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

curl https://api.stripe.com/v1/terminal/connection_tokens \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST"

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

post '/connection_token' do
  token = # ... Create or retrieve the ConnectionToken
  {secret: token.secret}.to_json
end

クライアント側

SDK にこのエンドポイントへのアクセスを許可するには、バックエンドから ConnectionToken をリクエストし、ConnectionToken オブジェクトから secret を返す関数をウェブアプリケーションで作成します。

async function fetchConnectionToken() {
  // Your backend should call /v1/terminal/connection_tokens and return the JSON response from Stripe
  const response = await fetch('https://{{YOUR_BACKEND_URL}}/connection_token', { method: "POST" });
  const data = await response.json();
  return data.secret;
}

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

SDK によって利用可能になった StripeTerminal オブジェクトは、リーダーを検出し、リーダーに接続し、支払いを作成する汎用インターフェイスを提供します。お使いの JavaScript アプリケーションで StripeTerminal インスタンスを初期化するには、ステップ 2 で実装した ConnectionToken 関数を指定します。

また、リーダーからの意図しない切断を処理するための関数、onUnexpectedReaderDisconnect も指定する必要があります。この関数では、アプリからユーザーにリーダーが切断されたことを知らせる必要があります。リーダーへの再接続を試行する方法を含めることもできます。詳細については、接続切断に対処するをご覧ください。

const terminal = StripeTerminal.create({
  onFetchConnectionToken: fetchConnectionToken,
  onUnexpectedReaderDisconnect: unexpectedDisconnect,
});

function unexpectedDisconnect() {
  // You might want to display UI to notify the user and start re-discovering readers
}