Integration einrichten
Vorsicht
Die React Native-Bibliothek von Terminal befindet sich in einer frühen Betaphase und wird aktiv weiterentwickelt. Bitte melden Sie alle Probleme, auf die Sie stoßen, an unser GitHub-Projekt.
Für den Einstieg in das React Native SDK sind vier Schritte erforderlich:
- Installieren Sie das SDK in Ihrer App
- Konfigurieren Sie Ihre App
- Richten Sie den ConnectionToken-Endpoint in Ihrer App und auf Ihrem Backend ein
- SDK in Ihrer App initialisieren
SDK installierenClientseitig
Das React Native SDK ist Open Source und vollständig dokumentiert. Intern nutzt es die nativen iOS- und Android-SDKs. Installieren Sie das SDK, indem Sie Folgendes ausführen:
Verbindungs-Token-Endpoint einrichtenServerseitigClientseitig
Serverseitig
Um sich mit einem Lesegerät verbinden zu können, muss das Backend dem SDK erlauben, das Lesegerät in Ihrem Stripe-Konto zu nutzen. Dazu stellt es dem SDK das Geheimnis aus einem ConnectionToken zur Verfügung. Das Backend muss nur Verbindungstoken für vertrauenswürdige Clients erstellen.
Beziehen Sie das Geheimnis aus dem ConnectionToken auf Ihrem Server und übergeben Sie es an den Client.
Vorsicht
Mit dem Geheimnis aus dem ConnectionToken auf Ihrem Server können Sie sich mit einem Stripe Terminal-Lesegerät verbinden und Zahlungen mit Ihrem Stripe-Konto annehmen. Stellen Sie sicher, dass Sie den Endpoint zum Erstellen von Verbindungstoken authentifizieren und diesen vor Cross Site Request Forgery (CSRF) schützen.
Clientseitig
Um dem SDK Zugriff auf diesen Endpoint zu ermöglichen, erstellen Sie eine Token-Anbieter-Einzelfunktion, die ein ConnectionToken
aus Ihrem Back-End anfordert.
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; };
Diese Funktion wird aufgerufen, wenn das SDK sich bei Stripe oder dem Lesegerät authentifizieren muss. Sie wird auch aufgerufen, wenn ein neues Verbindungstoken benötigt wird, um sich mit einem Lesegerät zu verbinden (z. B. wenn Ihre App sich von einem Lesegerät getrennt hat). Wenn das SDK kein neues Verbindungstoken von Ihrem Backend abrufen kann, schlägt die Verbindung zu einem Lesegerät mit einem Fehler von Ihrem Server fehl.
Speichern Sie das Verbindungstoken nicht im Cache und codieren Sie es nicht fest. Der Lebenszyklus des Verbindungstokens wird vom SDK verwaltet.
SDK initialisierenClientseitig
Übergeben Sie zunächst Ihren in Schritt 3 implementierten Token-Anbieter als Prop an StripeTerminalProvider
.
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> ); }
Rufen Sie als letzten Schritt die initialize
-Methode vom useStripeTerminal
-Hook auf. Sie müssen die initialize
-Methode von einer innerhalb von StripeTerminalProvider
verschachtelten Komponente aufrufen und nicht von der Komponente, die StripeTerminalProvider
enthält.
function App() { const { initialize } = useStripeTerminal(); useEffect(() => { initialize({ logLevel: 'verbose', }); }, [initialize]); return <View />; }
SDK-Aktualisierungen
Stripe veröffentlicht regelmäßig Updates, die neue Funktionen, Fehlerkorrekturen und Sicherheitsupdates enthalten können. Aktualisieren Sie Ihr SDK, sobald eine neue Version verfügbar ist. Die derzeit verfügbaren SDKs sind:
- Stripe Terminal Android SDK
- Stripe Terminal iOS SDK
- Stripe Terminal JavaScript SDK
- Stripe Terminal React Native SDK