Accéder directement au contenu
Créez un compte
 ou
connecter-vous
Logo de la documentation Stripe
/
Créez un compte
Connectez-vous
AperçuMettre votre intégration à niveau
Paiements en ligne
PrésentationTrouver votre cas d'usageManaged Payments
Moyens de paiement
Interfaces de paiement
Scénarios de paiement
Paiements par TPE
Terminal
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.

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.

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

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 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.

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>
  );
}

Enfin, appelez la méthode initialize à partir du hook useStripeTerminal. Vous devez appeler la méthode initialize à partir d’un composant imbriqué dans StripeTerminalProvider, et non du composant qui contient le StripeTerminalProvider.

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

  useEffect(() => {
    initialize();
  }, [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

Cette page vous a-t-elle été utile ?
OuiNon