# Exemples d'applications

Testez Stripe Terminal en utilisant une application test et un lecteur de simulation.

> Pour un guide plus complet, comprenant notamment des détails sur l’[intégration pilotée par serveur](https://support.stripe.com/questions/terminal-server-driven-integration) en utilisant uniquement l’API Stripe, consultez notre [exemple d’intégration](https://docs.stripe.com/terminal/quickstart.md).

L’intégration de Stripe Terminal commence par l’exécution de votre application de point de vente à un emplacement physique. Votre application de point de vente communique avec le lecteur via le SDK Terminal pour collecter les paiements en personne de vos clients. Votre back-end fonctionne avec votre application de point de vente pour identifier le SDK Terminal et finaliser les paiements.
![](https://b.stripecdn.com/docs-statics-srv/assets/example-app-simulator-integration-architecture.c687f5119cda8972233e61f684ae56a5.png)

Avant de démarrer votre propre intégration, nous vous recommandons de configurer l’un des exemples d’application suivants. Cela vous donnera une meilleure idée de la façon dont les composants d’une intégration de Terminal fonctionnent ensemble et vous permettra d’appréhender l’interaction entre le SDK, le lecteur, votre application de point de vente et votre code de back-end.

## Déployer l'exemple de back-end

Pour démarrer avec les exemples d’application, configurez l’[exemple de back-end](https://github.com/stripe/example-terminal-backend) basé sur Sinatra en suivant les instructions du fichier [README](https://github.com/stripe/example-terminal-backend). Vous pouvez exécuter le back-end en local ou le déployer sur Render avec un compte gratuit. L’exemple de back-end associé à l’application test permet d’authentifier le SDK Terminal et de finaliser des paiements.

## Exécuter l'application test

Développez, puis exécutez les exemples d’applications :

#### JavaScript

1. Clonez l’exemple à partir de [GitHub](https://github.com/stripe/stripe-terminal-js-demo) :

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

1. Exécutez les commandes suivantes pour exécuter l’exemple :

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

1. Dans l’exemple en cours d’exécution, entrez l’URL de l’exemple de back-end déployé à l’[étape 1](https://docs.stripe.com/terminal/example-applications.md#set-up-backend).

#### iOS

1. Clonez l’exemple à partir de [GitHub](https://github.com/stripe/stripe-terminal-ios) :

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

1. Ouvrez `Example/Example.xcworkspace` dans Xcode.
1. Dans `AppDelegate.swift`, définissez l’URL de l’application Render que vous venez de déployer.
1. Développez, puis exécutez l’application.

#### Android

1. Clonez l’exemple à partir de [GitHub](https://github.com/stripe/stripe-terminal-android) :

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

1. Importez le projet `Example` dans Android Studio.
1. Dans `gradle.properties`, définissez l’URL de l’application Render que vous venez de déployer.
1. Développez, puis exécutez l’application.

#### React Native

1. Clonez l’exemple à partir de [GitHub](https://github.com/stripe/stripe-terminal-react-native) :

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

1. Installez les dépendances de paquet et l’[interface de ligne de commande Expo](https://docs.expo.dev/get-started/installation/)

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

1. Installer les dépendances du paquet de l’application d’exemple

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

1. Copiez `example-app/.env.example` dans `example-app/.env` et définissez l’URL de l’application Render que vous venez de déployer.
1. Développez, puis exécutez l’application.

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

## Se connecter au lecteur de simulation

#### JavaScript

Une fois que l’exemple est opérationnel, sélectionnez **Use simulator** pour établir une connexion au [lecteur simulé](https://docs.stripe.com/terminal/references/testing.md#simulated-reader).
![](https://b.stripecdn.com/docs-statics-srv/assets/js-example-app-simulator.c226b6ba5461d0c5b3b8f06c0c1a3469.png)

Application JavaScript test connectée à un lecteur de simulation

#### iOS

Une fois que l’application test est lancée, sélectionnez **Simulated** pour établir une connexion au [lecteur de simulation](https://docs.stripe.com/terminal/references/testing.md#simulated-reader).
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-example-app-simulator.048c8083664b139b272754aed05ed442.png)

Application iOS test connectée à un lecteur de simulation

> Pour exécuter l’application test au moyen du simulateur iOS, définissez un emplacement de simulation. Sélectionnez **Simulate Location** dans le menu **Debug** Xcode. Pour en savoir plus sur la manière dont Stripe Terminal utilise la position de l’appareil, reportez-vous à [Configurez votre application iOS](https://docs.stripe.com/terminal/payments/setup-integration.md?terminal-sdk-platform=ios#configure).

#### Android

Une fois que l’application test est lancée, sélectionnez **Simulated** pour établir une connexion au [lecteur de simulation](https://docs.stripe.com/terminal/references/testing.md#simulated-reader).
![](https://b.stripecdn.com/docs-statics-srv/assets/android-example-app-simulator.72ace5d890bc698d7900e10d98d068a2.png)

Application Android test connectée à un lecteur de simulation

#### React Native

Une fois que l’application test est lancée, sélectionnez **Simulated** pour établir une connexion au [lecteur de simulation](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)

Application React Native test connectée à un lecteur de simulation

Le lecteur de simulation gère les événements comme un lecteur physique. Vous pouvez donc continuer à collecter votre premier paiement.

La fonctionnalité du lecteur de simulation est intégrée au SDK et vous pouvez par conséquent l’utiliser pour développer et tester votre application de point de vente sans vous connecter à un appareil physique.

## Collecter votre premier paiement

Collectez votre premier paiement en utilisant l’application test et le lecteur de simulation. Chacun des exemples contient un journal d’événements pour que vous le référenciez lorsque vous intégrez Terminal à votre propre application. Comme vous collectez votre premier paiement, vous verrez la séquence suivante :

- **Créer un paiement** : L’application test collecte un moyen de paiement en utilisant le SDK.
- **Recueillir un moyen de paiement** : Le lecteur de simulation reçoit une carte.
- **Traiter et capturer** : L’application et le back-end de test finalise le paiement.

> (Facultatif) Utilisez [l’autorisation et la capture distinctes](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md) pour ajouter une étape de rapprochement avant de finaliser la transaction. Vous pouvez également [capturer automatiquement](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-capture_method) les transactions Terminal.

#### JavaScript
![Application test JavaScript connectée à un lecteur de simulation](https://b.stripecdn.com/docs-statics-srv/assets/js-example-app-payment.8069a69561566519d001038a46bfe6b5.png)

Collecte d’un paiement en utilisant l’application test JavaScript et un lecteur de simulation

#### iOS
![Application test iOS connectée à un lecteur de simulation](https://b.stripecdn.com/docs-statics-srv/assets/ios-example-app-payment.64ce79484049f491b4798d080e2fb38c.png)

Collecte d’un paiement en utilisant l’application test iOS et un lecteur de simulation

#### Android
![Application test Android connectée à un lecteur de simulation](https://b.stripecdn.com/docs-statics-srv/assets/android-example-app-payment.c79ff20f8c40fd36d348fe7f7d1b9ae5.png)

Collecte d’un paiement en utilisant l’application test Android et un lecteur de simulation

#### React Native
![Application test React Native connectée à un lecteur de simulation](https://b.stripecdn.com/docs-statics-srv/assets/react-native-example-app-payment.be4c67924b431cb58a8057986562e6c3.png)

Collecte d’un paiement en utilisant l’application test React Active et un lecteur de simulation

## Étapes suivantes

- [Concevoir une intégration](https://docs.stripe.com/terminal/designing-integration.md)