# サンプルアプリケーション

サンプルアプリケーションとシミュレーションされたリーダーを使用して、Stripe Terminal を試すことができます。

> Stripe API のみを使用した[サーバー主導型の連携](https://support.stripe.com/questions/terminal-server-driven-integration)など、より実践的な内容を記したガイドについては[実装サンプル](https://docs.stripe.com/terminal/quickstart.md)でご覧いただけます。

Stripe Terminal の組み込みは、実店舗で実行する POS アプリケーションから開始されます。POS アプリケーションは Terminal SDK を介してリーダーと通信し、顧客から対面支払いを回収します。バックエンドは POS アプリケーションと連携して Terminal SDK を認証し、支払いを確定します。
![](https://b.stripecdn.com/docs-statics-srv/assets/example-app-simulator-integration-architecture.c687f5119cda8972233e61f684ae56a5.png)

ご自身の組み込みを開始する前に、Terminal のサンプルアプリケーションを 1 つ設定することを推奨します。これにより Terminal の組み込みの複数のコンポーネントがどのように連携するかを把握でき、SDK、リーダー、店頭販売アプリケーション、バックエンドコードの間の対話がどのようなものかを理解できます。

## サンプルバックエンドの配置

サンプルアプリケーションの利用を始めるには、[README](https://github.com/stripe/example-terminal-backend) に記載された指示に従って、Sinatra ベースの[サンプルバックエンド](https://github.com/stripe/example-terminal-backend)を設定します。バックエンドはローカルで実行することも、無料アカウントを使用して Render に配置することもできます。サンプルバックエンドは、サンプルアプリケーションと連動して Terminal SDK を認証し、支払いを確定します。

## サンプルアプリケーションの実行

サンプルアプリケーションを構築して実行します。

#### JavaScript

1. [GitHub](https://github.com/stripe/stripe-terminal-js-demo) からサンプルをクローンします。

```bash
git clone https://github.com/stripe/stripe-terminal-js-demo.git
```

1. 以下のコマンドを実行し、サンプルを実行します。

```bash
cd stripe-terminal-js-demo
npm install
npm run start
```

1. 実行中のサンプルで、[ステップ 1](https://docs.stripe.com/terminal/example-applications.md#set-up-backend) で配置したサンプルバックエンドの URL を入力します。

#### iOS

1. [GitHub](https://github.com/stripe/stripe-terminal-ios) からサンプルをクローンします。

```bash
git clone https://github.com/stripe/stripe-terminal-ios.git
```

1. Xcode で `Example/Example.xcworkspace` を開きます。
1. `AppDelegate.swift` に、先ほど配置した Render アプリの URL を設定します。
1. アプリを構築して実行します。

#### Android

1. [GitHub](https://github.com/stripe/stripe-terminal-android) からサンプルをクローンします。

```bash
git clone https://github.com/stripe/stripe-terminal-android.git
```

1. `Example` プロジェクトを Android Studio にインポートします。
1. `gradle.properties` に、先ほど配置した Render アプリの URL を設定します。
1. アプリを構築して実行します。

#### React Native

1. [GitHub](https://github.com/stripe/stripe-terminal-react-native) からサンプルをクローンします。

```bash
git clone https://github.com/stripe/stripe-terminal-react-native.git
```

1. [Expo CLI](https://docs.expo.dev/get-started/installation/) とパッケージ依存関係をインストールする

```bash
yarn global add expo-cli
```

1. サンプルアプリのパッケージ依存関係をインストールする

```bash
cd stripe-terminal-react-native/example-app
yarn
```

1. `example-app/.env.example` を `example-app/.env` にコピーして、先ほど配置した Render アプリの URL を設定します。
1. アプリを構築して実行します。

```bash
### android
npx expo run:android
### ios
npx expo run:ios
```

## シミュレーションされたリーダーへの接続

#### JavaScript

サンプルを実行したら、**Use simulator (シミュレーターを使用)** を選択して[シミュレーションされたリーダー](https://docs.stripe.com/terminal/references/testing.md#simulated-reader)に接続します。
![](https://b.stripecdn.com/docs-statics-srv/assets/js-example-app-simulator.c226b6ba5461d0c5b3b8f06c0c1a3469.png)

シミュレーションされたリーダーに接続された JavaScript のサンプルアプリ

#### iOS

サンプルを実行したら、**Simulated (シミュレーション済み)** を選択して[シミュレーションされたリーダー](https://docs.stripe.com/terminal/references/testing.md#simulated-reader)に接続します。
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-example-app-simulator.048c8083664b139b272754aed05ed442.png)

シミュレーションされたリーダーに接続された iOS のサンプルアプリ

> iOS Simulator を使用してサンプルアプリを実行するには、シミュレーションされた店舗を有効にします。Xcode の **Debug (デバッグ)** メニューから、**Simulate Location (店舗をシミュレーションする)** を選択します。Stripe Terminal がどのようにデバイスの店舗を使用するかについては、[iOS アプリの設定](https://docs.stripe.com/terminal/payments/setup-integration.md?terminal-sdk-platform=ios#configure)をご覧ください。

#### Android

サンプルを実行したら、**Simulated (シミュレーション済み)** を選択して[シミュレーションされたリーダー](https://docs.stripe.com/terminal/references/testing.md#simulated-reader)に接続します。
![](https://b.stripecdn.com/docs-statics-srv/assets/android-example-app-simulator.72ace5d890bc698d7900e10d98d068a2.png)

シミュレーションされたリーダーに接続された Android のサンプルアプリ

#### React Native

サンプルを実行したら、**Simulated (シミュレーション済み)** を選択して[シミュレーションされたリーダー](https://docs.stripe.com/terminal/references/testing.md#simulated-reader)に接続します。
![](https://b.stripecdn.com/docs-statics-srv/assets/react-native-example-app-simulator.268ea316e60ec49ee877240d255c8b58.png)

シミュレーションされたリーダーに接続された React Native のサンプルアプリ

シミュレーションされたリーダーは物理リーダーと同じようにイベントを処理するので、引き続き最初の支払いを回収できます。

シミュレーションされたリーダーの機能は SDK に組み込まれているため、物理的なデバイスに接続しなくても、独自の店頭販売アプリケーションを開発してテストするために使用できます。

## 最初の支払いの収集

サンプルアプリケーションとシミュレーションされたリーダーを使用して、最初の支払いを回収します。各サンプルにはイベントログ機能があり、ご自身のアプリケーションに Terminal を組み込む際に参照できます。最初の支払いを回収する際には、以下のシーケンスが表示されます。

- **支払いの作成**: サンプルアプリケーションが、SDK を使用して支払い方法を収集します。
- **支払い方法の収集**: シミュレーションされたリーダーがカードを受信します。
- **処理およびキャプチャ**: サンプルアプリケーションとバックエンドが支払いを完了します。

> (オプション) [オーソリとキャプチャーの分離](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md)を使用し、取引を確定する前に照合ステップを追加できます。また、Terminal 取引を[自動キャプチャー](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-capture_method)することもできます。

#### JavaScript
![シミュレーションされたリーダーに接続された JavaScript のサンプルアプリ](https://b.stripecdn.com/docs-statics-srv/assets/js-example-app-payment.8069a69561566519d001038a46bfe6b5.png)

JavaScript のサンプルアプリとシミュレーションされたリーダーを使用した支払いの収集

#### iOS
![シミュレーションされたリーダーに接続された iOS のサンプルアプリ](https://b.stripecdn.com/docs-statics-srv/assets/ios-example-app-payment.64ce79484049f491b4798d080e2fb38c.png)

iOS のサンプルアプリとシミュレーションされたリーダーを使用した支払いの収集

#### Android
![シミュレーションされたリーダーに接続された Android のサンプルアプリ](https://b.stripecdn.com/docs-statics-srv/assets/android-example-app-payment.c79ff20f8c40fd36d348fe7f7d1b9ae5.png)

Android のサンプルアプリとシミュレーションされたリーダーを使用した支払いの収集

#### React Native
![シミュレーションされたリーダーに接続された React Native のサンプルアプリ](https://b.stripecdn.com/docs-statics-srv/assets/react-native-example-app-payment.be4c67924b431cb58a8057986562e6c3.png)

React Native のサンプルアプリとシミュレーションされたリーダーを使用した支払いの回収

## 次のステップ

- [導入方法の設計](https://docs.stripe.com/terminal/designing-integration.md)