Accéder directement au contenu
Créez un compte ou connecter-vous
Logo de la documentation Stripe
/
Créez un compteConnectez-vous
AperçuAccepter un paiementMettre votre intégration à niveau
Paiements en ligne
PrésentationTrouver votre cas d'usageUtiliser Managed PaymentsPaiements récurrents
Paiements par TPE
Terminal
Moyens de paiement
Opérations de paiement
Soldes et délai de règlementReçusRemboursements et annulations
Intégrations avancées
Au-delà des paiements

Configurer votre intégration

Configurez un SDK Stripe Terminal ou une intégration pilotée par serveur pour accepter les paiements par TPE.

Mise en garde

La bibliothèque React Native de Terminal est en cours de développement et disponible en version bêta publique. Veuillez signaler tout problème dans notre projet GitHub.

Remarque

Si vous créez une intégration Applications sur des appareils (exécutant votre application sur des lecteurs intelligents Stripe tels que le S700), vous devrez effectuer des étapes supplémentaires de configuration Android native après avoir suivi ce guide.

Pour démarrer avec le SDK React Native, suivez ces quatre étapes :

  1. Installer le SDK dans votre application.
  2. Configurer votre application.
  3. Configurer l’endpoint du token de connexion dans votre application et votre back-end.
  4. Initialiser le SDK dans votre application.

Installer le SDK
Côté client

Le SDK React Native est disponible en open source et fait l’objet d’une documentation complète. En interne, il utilise les SDK iOS et Android natifs. Pour installer le SDK, veuillez exécuter :

Command Line
npm install @stripe/stripe-terminal-react-native

Configurer votre application
Côté client

Pods

Vous devez exécuter pod install dans votre répertoire ios pour installer les dépendances natives.

Autorisations

Pour que votre application puisse fonctionner avec le SDK Stripe Terminal, apportez quelques modifications à votre fichier Info.plist dans Xcode.

  1. Activez les services de localisation avec la paire clé-valeur suivante.

    Confidentialité – Description de l’utilisation de l’emplacement, le cas échéant
    CléNSLocationWhenInUseUsageDescription
    ValeurL’accès à l’emplacement est indispensable pour accepter des paiements.

    Afin de réduire les risques de fraude associés aux paiements et de limiter le nombre de litiges, Stripe a besoin de connaître le lieu où se déroulent les paiements. Si le SDK ne peut déterminer l’emplacement de l’appareil iOS, les paiements sont désactivés jusqu’à ce que l’accès à l’emplacement soit rétabli.

  2. Assurez-vous que votre application fonctionne en arrière-plan et reste connectée aux lecteurs Bluetooth.

    Modes d’arrière-plan requis pour les lecteurs Bluetooth
    CléUIBackgroundModes
    Valeurbluetooth-central (Utilise les accessoires Bluetooth LE)

    La configuration du mode d’arrière-plan bluetooth-central permet au lecteur de rester en mode veille lorsque votre application est exécutée en arrière-plan, ou lorsque l’appareil iOS est verrouillé. Sans cette valeur, la mise en veille échoue. Lorsque votre application est exécutée en arrière-plan, le lecteur est susceptible de s’éteindre automatiquement afin d’économiser de l’énergie.

  3. Autorisez votre application à afficher une boîte de dialogue d’autorisation Bluetooth. L’App Store exige l’intégration de cette option, même si votre application ne prend pas en charge la connexion aux lecteurs Bluetooth.

    Confidentialité – Description de l’utilisation systématique du Bluetooth
    CléNSBluetoothAlwaysUsageDescription
    ValeurCette application utilise le Bluetooth pour se connecter aux lecteurs de cartes bancaires pris en charge.

    iOS 13 propose désormais des autorisations plus spécifiques concernant l’utilisation de périphériques Bluetooth par une application. Les applications associées à Core Bluetooth doivent inclure cette clé dans leur fichier Info.plist afin d’éviter que l’application ne plante lors de son premier lancement.

  4. Passer les contrôles de validation de l’application lorsque vous la soumettez à l’App Store. À partir de la version 3.4.0 du SDK, cette exigence d’autorisation est supprimée.

    Confidentialité – Description de l’utilisation du périphérique Bluetooth
    CléNSBluetoothPeripheralUsageDescription
    ValeurLa connexion aux lecteurs de cartes pris en charge nécessite un accès au Bluetooth.

    Ceci est un exemple ; vous pouvez reformuler la demande d’autorisation de l’utilisateur dans votre application.

  5. Sauvegardez le fichier Info.plist de votre application. Il est désormais correctement configuré et peut être utilisé avec le SDK Stripe Terminal.

Remarque

Si vous utilisez Tap to Pay sur iPhone, vous devez demander et configurer le droit de développement Tap to Pay sur iPhone à partir de votre compte Apple Developer.

Configurer l'endpoint du token de connexion
Côté serveur
Côté client

Côté serveur

Pour se connecter à un lecteur, votre back-end doit donner au SDK la permission d’utiliser le lecteur avec votre compte Stripe en lui fournissant la clé secrète d’un ConnectionToken. Votre back-end doit créer des tokens de connexion uniquement pour les clients qu’il reconnaît comme fiables.

Command Line
curl
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/terminal/connection_tokens \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST"

Obtenez la clé secrète à partir du ConnectionToken sur votre serveur et transmettez-la côté client.

Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
post '/connection_token' do
  token = # ... Create or retrieve the ConnectionToken
  {secret: token.secret}.to_json
end

Mise en garde

Le secret du ConnectionToken vous permet de vous connecter à n’importe quel lecteur Stripe Terminal et de traiter les paiements à l’aide de votre compte Stripe. Veillez à authentifier l’endpoint pour créer des tokens de connexion et à le protéger contre la falsification des requêtes intersites (CSRF).

Côté client

Pour permettre au SDK d’accéder à cet endpoint, créez une fonction de fournisseur de tokens qui demande un ConnectionToken à votre back-end.

Root.tsx
import { StripeTerminalProvider } from '@stripe/stripe-terminal-react-native';

const fetchTokenProvider = async () => {
  const response = await fetch(`{YOUR BACKEND URL}/connection_token`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
  });
  const { secret } = await response.json();
  return secret;
};

Cette fonction est appelée dès lors que le SDK doit s’authentifier auprès de Stripe ou du lecteur. Elle est également appelée lorsqu’un nouveau token est nécessaire pour se connecter à un lecteur (par exemple, lorsque votre application s’est déconnectée du lecteur). Si le SDK n’est pas en mesure de récupérer un nouveau jeton de connexion depuis votre backend, la connexion au lecteur échoue associée à une erreur de votre serveur.

Mise en garde

Ne mettez pas en cache et ne codez pas en dur le token de connexion. Le SDK gère le cycle de vie du token.

Initialiser le SDK
Côté client

Pour commencer, transmettez votre fournisseur de tokens implémenté à l’étape 3 à StripeTerminalProvider en tant que propriété.

Root.tsx
import { StripeTerminalProvider } from '@stripe/stripe-terminal-react-native';

function Root() {
  const fetchTokenProvider = async () => {
    const response = await fetch(`${API_URL}/connection_token`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
    });
    const { secret } = await response.json();
    return secret;
  };

  return (
    <StripeTerminalProvider
      logLevel="verbose"
      tokenProvider={fetchTokenProvider}
    >
      <App />
    </StripeTerminalProvider>
  );
}

En dernière étape, appelez la méthode initialize depuis le hook useStripeTerminal.

Remarque

Vous devez appeler la méthode initialize depuis un composant imbriqué dans StripeTerminalProvider et non depuis le composant qui contient StripeTerminalProvider.

Une fois l’initialisation terminée, vous pouvez utiliser d’autres méthodes du SDK telles que discoverReaders, collectPaymentMethod et confirmPaymentIntent. Si vous tentez d’appeler ces méthodes avant l’initialisation, vous recevrez le message d’erreur suivant : « Veuillez initialiser le SDK Stripe Terminal avant d’effectuer toute action. »

App.tsx
function App() {
  const { initialize } = useStripeTerminal();

  useEffect(() => {
    initialize();
  }, []);

  return <View />;
}

Mises à jour du SDK

Stripe publie régulièrement des mises à jour qui peuvent inclure de nouvelles fonctionnalités, des corrections de bugs et des mises à jour de sécurité. Mettez à jour votre SDK dès qu’une nouvelle version est disponible. Les SDK actuellement disponibles sont les suivants :

Prochaines étapes