Configurer votre intégration
Mise en garde
La bibliothèque React Native de Terminal est en cours de développement et disponible en version bêta. Veuillez signaler tout problème dans notre projet GitHub.
Pour démarrer avec le SDK React Native, suivez ces quatre étapes :
- Installer le SDK dans votre application
- Configurer votre application
- Configurer l’endpoint du token de connexion sur votre application et votre back-end
- Initialiser le SDK sur votre application
Installer le SDKCô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 :
Configurer l'endpoint du token de connexionCôté serveurCô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 uniquement créer des tokens de connexion pour les clients qu’il reconnaît comme fiables.
Obtenez la clé secrète du ConnectionToken sur votre serveur et communiquez-la au client.
Mise en garde
La clé secrète 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.
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.
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 SDKCôté client
Pour commencer, transmettez votre fournisseur de tokens implémenté à l’étape 3 à StripeTerminalProvider
en tant que propriété.
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
.
function App() { const { initialize } = useStripeTerminal(); useEffect(() => { initialize({ logLevel: 'verbose', }); }, [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 :
- SDK Stripe Terminal Android
- SDK Stripe Terminal iOS
- SDK Stripe Terminal JavaScript
- SDK Stripe Terminal React Native