実装方法を設定する
注
BBPOS WisePOS E リーダーまたは Stripe リーダー S700 などのスマートリーダーの場合、支払いの回収には JavaScript SDK ではなくサーバー主導型の実装を使用することをお勧めします。サーバー主導型の実装では、LAN 通信に依存せず Stripe API を使用して支払いを回収します。JavaScript SDK および SDI はオフラインでの実行に対応していません。ニーズに合う最適なプラットフォームの選択に役立つプラットフォームの比較をご覧ください。
Terminal JavaScript SDK requirements
When you integrate with smart readers using the JavaScript SDK, make sure your networking setup meets the requirements below, otherwise your Terminal integration might not work as expected.
- The smart reader and the application running the Terminal JavaScript SDK are connected to the same local network.
- Your network allows DNS resolution of local IP addresses. If necessary, update DNS settings.
- Your WiFi network is password protected and uses either WPA-Personal or WPA2-Personal encryption.
JavaScript SDK の使用を開始する際に必要なステップは、以下の 3 つです。
- 決済ページに SDK およびクライアントライブラリをインストールする
- バックエンドと Web アプリケーションで接続トークンのエンドポイントを設定する
- Web アプリケーションで SDK を初期化する
注
Web アプリケーションを JavaScript SDK に組み込むと、それをモバイルブラウザーで実行できます。ただし、モバイルデバイスがリーダーと同じローカルネットワークに接続され、そのネットワーク上のデバイスが互いに直接通信できる状態である必要があります。
SDK およびクライアントライブラリをインストールするクライアント側サーバー側
クライアント側
To get started, include this script on your checkout page. This script must always load directly from https://js.stripe.com for compatibility with the latest reader software. Don’t include the script in a bundle or host a copy yourself; this might break your integration without warning.
<script src="https://js.stripe.com/terminal/v1/"></script>
Terminal JS SDK をモジュールとして使用する
Stripe では、npm パッケージも用意しています。これを使用すると、Terminal JS SDK をモジュールとして読み込み、使用できます。詳細については、GitHub のプロジェクトをご覧ください。
注
JavaScript SDK のベータ版からの移行の詳細については、Stripe Terminal ベータの移行ガイドをご覧ください。
サーバー側
アプリケーションから Stripe API にアクセスするには、Stripe の公式ライブラリを使用します。
ConnectionToken エンドポイントを設定するサーバー側クライアント側
サーバー側
リーダーに接続するには、バックエンドからご自身の Stripe アカウントに、リーダーを使用するための SDK 権限を付与する必要があります。それには、ConnectionToken (接続トークン) から secret (シークレット) を提供します。バックエンドは信頼できるクライアントに対してのみ、接続トークンを作成するようにする必要があります。
サーバ側の ConnectionToken からシークレットを取得してクライアント側に渡します。
注意
ConnectionToken のシークレットを使用すると、任意の Stripe Terminal リーダーに接続して、Stripe アカウントで支払いを受け取ることができます。必ず、接続トークンの作成に使用するエンドポイントを認証し、クロスサイトリクエストフォージェリ (CSRF) から保護してください。
クライアント側
SDK にこのエンドポイントへのアクセスを許可するには、バックエンドから ConnectionToken を要求し、ConnectionToken オブジェクトから secret
を返す関数を Web アプリケーションで作成します。
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 によって管理されます。
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 }
SDK の更新
Stripe periodically releases updates which can include new functionality, bug fixes, and security updates. Update your SDK as soon as a new version is available. The currently available SDKs are:
- Stripe Terminal Android SDK
- Stripe Terminal iOS SDK
- Stripe Terminal JavaScript SDK
- Stripe Terminal React Native SDK
サポート対象のブラウザー
Stripe Terminal JavaScript SDK は、主なブラウザーの最新バージョンをすべてサポートしています。サポート対象のブラウザーは次のとおりです。
- Windows の Edge。
- Firefox (デスクトッププラットフォーム)
- Chrome および Safari (あらゆるプラットフォーム)
- Android ネイティブブラウザー (Android 4.4 以降)
特定のブラウザーで、Stripe Terminal JavaScript SDK に問題がある場合は、support-terminal@stripe.com にメールでお問い合わせください。
注意
注: React Native での Stripe Terminal JavaScript SDK の使用はサポートされていません。React Native を使用してモバイルアプリに Stripe Terminal を構築するには、Stripe Terminal React Native SDK を使用します。