# 実装方法を設定する
Stripe Terminal SDK またはサーバー主導型の組み込みを設定して、対面決済の受け付けを開始できるようにします。
# JavaScript
> #### スマートリーダーの推奨事項
>
> [BBPOS WisePOS E リーダー](https://docs.stripe.com/terminal/payments/setup-reader/bbpos-wisepos-e.md)、[Stripe Reader S700/S710](https://docs.stripe.com/terminal/readers/stripe-reader-s700-s710.md)、[Verifone リーダー](https://docs.stripe.com/terminal/payments/setup-reader/verifone.md)などのスマートリーダーでは、JavaScript SDK ではなく[サーバー主導の実装](https://docs.stripe.com/terminal/payments/setup-integration.md?terminal-sdk-platform=server-driven)を使用することをお勧めします。
>
> JavaScript SDK では、POS とリーダーが、有効なローカル DNS と同じローカルネットワーク上にある必要があります。サーバー主導型の統合では、代わりに Stripe API を使用するため、複雑なネットワーク環境ではよりシンプルになります。ニーズに最適なプラットフォームの選択に役立つ[プラットフォーム比較](https://docs.stripe.com/terminal/payments/setup-reader.md#sdk)をご覧ください。
利用可能なすべてのメソッド、オブジェクト、エラーの詳細を確認するには、Stripe の [SDK リファレンス完全版](https://docs.stripe.com/terminal/references/api/js-sdk.md)を参照してください。
### Terminal JavaScript SDK の要件
JavaScript SDK を使用して[スマートリーダー](https://docs.stripe.com/terminal/smart-readers.md)を導入する場合、ネットワークの設定が[ネットワーク要件](https://docs.stripe.com/terminal/network-requirements.md)を満たしていることを確認してください。
JavaScript SDK の使用を開始する際に必要なステップは、以下の 3 つです。
1. チェックアウトページに [SDK およびクライアントライブラリをインストールする](https://docs.stripe.com/terminal/payments/setup-integration.md#install)
2. ウェブアプリケーションとバックエンドで[接続トークンのエンドポイントを設定する](https://docs.stripe.com/terminal/payments/setup-integration.md#connection-token)
3. ウェブアプリケーションで [SDK を初期化する](https://docs.stripe.com/terminal/payments/setup-integration.md#initialize)
> お客様のウェブアプリケーションを JavaScript SDK に組み込むと、それをモバイルブラウザで実行できます。ただし、モバイルデバイスがリーダーと同じローカルネットワークに接続され、そのネットワーク上のデバイスが互いに直接通信できる状態である必要があります。
## SDK およびクライアントライブラリーをインストールする [クライアント側] [サーバー側]
#### クライアント側
作業を開始するには、このスクリプトを決済ページに含めます。最新のリーダーソフトウェアとの互換性を保つため、このスクリプトは常に **https://js.stripe.com** から直接読み込む必要があります。スクリプトをバンドルに含めたり、そのコピーを自身でホストすることがないようにしてください。これを行うと、組み込みが警告なく破損することがあります。
```html
```
#### Terminal JS SDK をモジュールとして使用する
Stripe では、npm パッケージも用意しています。これを使用すると、Terminal JS SDK をモジュールとして読み込み、使用できます。詳細については、[GitHub のプロジェクト](https://github.com/stripe/terminal-js)をご覧ください。
> JavaScript SDK のベータ版からの移行の詳細については、[Stripe Terminal ベータの移行ガイド](https://docs.stripe.com/terminal/references/sdk-migration-guide.md)をご覧ください。
#### サーバー側
アプリケーションから Stripe API にアクセスするには、Stripe の公式ライブラリーを使用します。
#### Ruby
```bash
# Available as a gem
sudo gem install stripe
```
```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```
## ConnectionToken エンドポイントを設定する [サーバー側] [クライアント側]
#### サーバー側
リーダーに接続するには、バックエンドからご自身の Stripe アカウントに、リーダーを使用するための SDK 権限を付与する必要があります。それには、[ConnectionToken (接続トークン)](https://docs.stripe.com/api/terminal/connection_tokens.md) から [secret (シークレット)](https://docs.stripe.com/api/terminal/connection_tokens/object.md#terminal_connection_token_object-secret) を提供します。バックエンドは信頼できるクライアントに対してのみ、接続トークンを作成するようにする必要があります。
#### curl
```bash
curl https://api.stripe.com/v1/terminal/connection_tokens \
-u <>: \
-X "POST"
```
サーバー側の `ConnectionToken` からシークレットを取得してクライアント側に渡します。
#### Ruby
```ruby
post '/connection_token' do
token = # ... Create or retrieve the ConnectionToken
{secret: token.secret}.to_json
end
```
> `ConnectionToken` の `secret` により、お客様は任意の Stripe Terminal リーダーに接続して、Stripe アカウントで支払いを受け取ることができます。必ず、接続トークンの作成に使用するエンドポイントを認証し、クロスサイトリクエストフォージェリ (CSRF) から保護してください。
#### クライアント側
SDK にこのエンドポイントへのアクセスを許可するには、バックエンドから `ConnectionToken` をリクエストし、`ConnectionToken` オブジェクトから `secret` を返す関数をウェブアプリケーションで作成します。
```javascript
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 を初期化する [クライアント側]
> Chrome 142（2025 年 10 月 28 日リリース）以降のバージョンでは、Stripe Terminal JavaScript SDK を使用する際に、Web サイトがローカルのネットワークデバイス（Terminal リーダーなど）にアクセスするには、明示的な許可が必要です。設定手順とトラブルシューティングについては、[Chrome 142 以上の手順](https://support.stripe.com/questions/ensuring-stripe-terminal-javascript-sdk-functionality-on-chrome-142)をご覧ください。
SDK によって利用可能になった [StripeTerminal](https://docs.stripe.com/terminal/references/api/js-sdk.md#stripeterminal-create) オブジェクトは、リーダーを検出し、リーダーに接続し、支払いを作成する汎用インターフェイスを提供します。お使いの JavaScript アプリケーションで `StripeTerminal` インスタンスを初期化するには、[ステップ 2](https://docs.stripe.com/terminal/payments/setup-integration.md#connection-token) で実装した `ConnectionToken` 関数を指定します。
また、リーダーからの意図しない切断を処理するための関数、[onUnexpectedReaderDisconnect](https://docs.stripe.com/terminal/references/api/js-sdk.md#stripeterminal-create) も指定する必要があります。この関数では、アプリからユーザーにリーダーが切断されたことを知らせる必要があります。リーダーへの再接続を試行する方法を含めることもできます。詳細については、[接続切断に対処する](https://docs.stripe.com/terminal/payments/connect-reader.md?terminal-sdk-platform=js&reader-type=internet#handling-disconnects)をご覧ください。
```javascript
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 は定期的に、新機能、バグ修正、セキュリティー更新を含む更新をリリースしています。SDK は、新しいバージョンが利用可能になり次第すぐに更新してください。現在利用可能な SDK は以下のとおりです。
- [Stripe Terminal Android SDK](https://github.com/stripe/stripe-terminal-android/releases)
- [Stripe Terminal iOS SDK](https://github.com/stripe/stripe-terminal-ios/releases)
- [Stripe Terminal JavaScript SDK](https://docs.stripe.com/terminal/references/api/js-sdk.md#changelog)
- [Stripe Terminal React Native SDK](https://github.com/stripe/stripe-terminal-react-native)
## サポートされるブラウザ
Stripe Terminal JavaScript SDK は、主なブラウザの最新バージョンをすべてサポートしています。以下をサポートします。
- Windows の Edge。
- Firefox (デスクトッププラットフォーム)
- Chrome および Safari (あらゆるプラットフォーム)
- Android ネイティブブラウザ (Android 4.4 以降)
特定のブラウザーで、Stripe Terminal JavaScript SDK に問題がある場合は、[support-terminal@stripe.com](mailto:support-terminal@stripe.com) にメールでお問い合わせください。
> 注: React Native での Stripe Terminal JavaScript SDK の使用はサポートされていません。React Native を使用してモバイルアプリに Stripe Terminal を構築するには[Stripe Terminal React Native SDK](https://github.com/stripe/stripe-terminal-react-native) を使用します。
## 次のステップ
- [リーダーに接続する](https://docs.stripe.com/terminal/payments/connect-reader.md?terminal-sdk-platform=js&reader-type=internet)