Zahlung annehmen
Nehmen Sie Zahlungen sicher online an.
Erstellen Sie ein Zahlungsformular oder verwenden Sie eine vorgefertigte Bezahlseite, um mit der Annahme von Online-Zahlungen zu beginnen.

Diese Integration kombiniert alle erforderlichen Schritte zur Zahlung – die Erfassung der Zahlungsdaten und die Bestätigung der Zahlung – in ein einziges Blatt, das ganz oben in Ihrer App angezeigt wird.
Stripe einrichtenServerseitigClientseitig
Zunächst benötigen Sie ein Stripe-Konto. Registrieren Sie sich jetzt.
Serverseitig
Für diese Integration sind Endpoints auf Ihrem Server erforderlich, die mit der Stripe-API kommunizieren können. Nutzen Sie diese offiziellen Bibliotheken für den Zugriff auf die Stripe-API von Ihrem Server aus:
Clientseitig
Das React Native SDK ist Open Source und vollständig dokumentiert. Intern werden native iOS und Android SDKs verwendet. Um das React Native SDK von Stripe zu installieren, führen Sie einen der folgenden Befehle im Verzeichnis Ihres Projekts aus (je nachdem, welchen Paket-Manager Sie verwenden):
Installieren Sie als Nächstes einige weitere erforderliche Abhängigkeiten:
- Für iOS wechseln Sie in das Verzeichnis ios und führen Sie
pod install
aus, um sicherzustellen, dass Sie auch die erforderlichen nativen Dependencies installiert haben. - Für Android müssen keine Abhängigkeiten mehr installiert werden.
Notiz
Wir empfehlen Ihnen, die offizielle Anleitung zu TypeScript zu befolgen, um TypeScript zu unterstützen.
Stripe Initialisierung
Um Stripe in Ihrer React Native-App zu initialisieren, umschließen Sie entweder Ihren Zahlungsbildschirm mit der Komponente StripeProvider
oder verwenden Sie die Initialisierungsmethode initStripe
. Nur der veröffentlichbare API-Schlüssel in publishableKey
ist erforderlich. Das folgende Beispiel zeigt, wie Stripe mithilfe der Komponente StripeProvider
initialisiert wird.
import { useState, useEffect } from 'react'; import { StripeProvider } from '@stripe/stripe-react-native'; function App() { const [publishableKey, setPublishableKey] = useState(''); const fetchPublishableKey = async () => { const key = await fetchKey(); // fetch key from your server here setPublishableKey(key); }; useEffect(() => { fetchPublishableKey(); }, []); return ( <StripeProvider publishableKey={publishableKey} merchantIdentifier="merchant.identifier" // required for Apple Pay urlScheme="your-url-scheme" // required for 3D Secure and bank redirects > {/* Your app code here */} </StripeProvider> ); }
Notiz
Verwenden Sie Ihre API-Testschlüssel beim Testen und Entwickeln Ihrer App und Ihre Live-Modus-Schlüssel beim Veröffentlichen Ihrer App.
Zahlungsmethoden aktivieren
Zeigen Sie Ihre Einstellungen für Zahlungsmethoden an und aktivieren Sie die Zahlungsmethoden, die Sie unterstützen möchten. Sie müssen mindestens eine Zahlungsmethode aktiviert haben, um einen PaymentIntent zu erstellen.
Standardmäßig aktiviert Stripe Karten und andere gängige Zahlungsmethoden, mit denen Sie mehr Kundinnen und Kunden erreichen können. Wir empfehlen jedoch, zusätzliche Zahlungsmethoden zu aktivieren, die für Ihr Unternehmen und Ihre Kundschaft relevant sind. Weitere Informationen zur Unterstützung von Produkten und Zahlungsmethoden finden Sie auf der Seite Unterstützte Zahlungsmethoden und der Preisseite für Gebühren.
Endpoint hinzufügenServerseitig
Hinweis
Um das PaymentSheet vor dem Erstellen eines PaymentIntent anzuzeigen, finden Sie weitere Informationen unter Erfassen von Zahlungsdetails vor dem Erstellen eines Intent.
Diese Integration verwendet drei Stripe-API-Objekte:
PaymentIntent: Stripe verwendet diesen, um Ihre Absicht darzustellen, Zahlungen von Ihren Kundinnen/Kunden anzufordern, wobei Abbuchungsversuche und Zahlungsstatusänderungen im gesamten Vorgang dokumentiert werden.
(Optional) Kunde/Kundin: Um eine Zahlungsmethode für zukünftige Zahlungen einzurichten, müssen Sie sie einem Kunden/einer Kundin zuordnen. Erstellen Sie ein Customer-Objekt, wenn Ihre Kundin/Ihr Kunde ein Konto bei Ihrem Unternehmen anlegt. Wenn eine Zahlung als Gast durchgeführt wird, können Sie vor der Zahlung ein Customer-Objekt erstellen und es zu einem späteren Zeitpunkt mit Ihrer eigenen internen Darstellung des Kundenkontos verknüpfen.
(Optional) Temporärer Kundenschlüssel: Informationen auf dem Kundenobjekt sind vertraulich und können nicht direkt über die App abgerufen werden. Ein temporärer Schlüssel gewährt dem SDK vorübergehenden Zugriff auf den/die Kund/in.
Notiz
Wenn Sie niemals Karten für eine/n Kund/in speichern und wiederkehrenden Kund/innen nicht erlauben, gespeicherte Karten wiederzuverwenden, können Sie das Customer-Objekt und das temporäre Schlüsselobjekt aus Ihrer Integration weglassen.
Aus Sicherheitsgründen kann Ihre App diese Objekte nicht erstellen. Fügen Sie stattdessen einen Endpoint auf Ihrem Server hinzu, der:
- Ruft den Kunden/die Kundin ab oder erstellt einen neuen/eine neue.
- Erstellt einen temporären Schlüssel für den Kunden/die Kundin.
- Erstellt einen PaymentIntent mit dem Betrag, der Währung und dem Kunden/der Kundin. Den Parameter
automatic_
können Sie optional ebenfalls einfügen. Stripe aktiviert seine Funktionalität standardmäßig in der neuesten Version der API.payment_ methods - Gibt das Client-Geheimnis des PaymentIntent, das
secret
des temporären Schlüssels, die ID des Kundenobjekts und Ihren veröffentlichbaren Schlüssel an Ihre App zurück.
Die Zahlungsmethoden, die Kund/innen während des Bezahlvorgangs angezeigt werden, sind ebenfalls in der PaymentIntent enthalten. Sie können Stripe Zahlungsmethoden aus Ihren Dashboard-Einstellungen abrufen lassen oder sie manuell auflisten. Gleich welche Option Sie wählen, die in der PaymentIntent übergebene Währung filtert die Zahlungsmethoden, die dem/r Kund/in angezeigt werden. Wenn Sie beispielsweise eur
für den PaymentIntent übergeben und OXXO im Dashboard aktiviert ist, wird dem/r Kund/in OXXO nicht angezeigt, da OXXO eur
-Zahlungen nicht unterstützt.
Sofern Ihre Integration keine codebasierte Option zum Anbieten von Zahlungsmethoden erfordert, empfiehlt Stripe die automatisierte Option, da Stripe die Währung, Einschränkungen für Zahlungsmethoden und andere Parameter auswertet, um die Liste der unterstützten Zahlungsmethoden zu ermitteln. Zahlungsmethoden, die die Konversion steigern und die für die Währung und den Standort des/r Kund/in am relevantesten sind, erhalten Priorität.
Zahlungsdaten erfassenClientseitig
Bevor das mobile Payment Element angezeigt wird, sollte Ihr Checkout-Seite folgendes anzeigen:
- Die gekauften Produkte und den Gesamtbetrag anzeigen
- Alle benötigten Versanddaten erfassen
- Fügen Sie eine Checkout-Schaltfläche ein, um die Nutzeroberfläche von Stripe anzuzeigen
Erstellen Sie im Checkout Ihrer App eine Netzwerkanfrage an den im vorigen Schritt erstellten Backend-Endpoint und rufen Sie initPaymentSheet
aus dem useStripe
-Hook auf.
export default function CheckoutScreen() { const { initPaymentSheet, presentPaymentSheet } = useStripe(); const [loading, setLoading] = useState(false); const fetchPaymentSheetParams = async () => { const response = await fetch(`${API_URL}/payment-sheet`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, }); const { paymentIntent, ephemeralKey, customer } = await response.json(); return { paymentIntent, ephemeralKey, customer, }; }; const initializePaymentSheet = async () => { const { paymentIntent, ephemeralKey, customer, } = await fetchPaymentSheetParams(); const { error } = await initPaymentSheet({ merchantDisplayName: "Example, Inc.", customerId: customer, customerEphemeralKeySecret: ephemeralKey, paymentIntentClientSecret: paymentIntent, // Set `allowsDelayedPaymentMethods` to true if your business can handle payment //methods that complete payment after a delay, like SEPA Debit and Sofort. allowsDelayedPaymentMethods: true, defaultBillingDetails: { name: 'Jane Doe', } }); if (!error) { setLoading(true); } }; const openPaymentSheet = async () => { // see below }; useEffect(() => { initializePaymentSheet(); }, []); return ( <Screen> <Button variant="primary" disabled={!loading} title="Checkout" onPress={openPaymentSheet} /> </Screen> ); }
Wenn Ihr/e Kund/in auf die Schaltfläche Checkout tippt, rufen Sie bitte presentPaymentSheet()
auf, um das Formular anzuzeigen. Nachdem der/die Kund/in die Zahlung abgeschlossen hat, wird das Formular verworfen und das Promise mit einem optionalen StripeError<PaymentSheetError>
aufgelöst.
export default function CheckoutScreen() { // continued from above const openPaymentSheet = async () => { const { error } = await presentPaymentSheet(); if (error) { Alert.alert(`Error code: ${error.code}`, error.message); } else { Alert.alert('Success', 'Your order is confirmed!'); } }; return ( <Screen> <Button variant="primary" disabled={!loading} title="Checkout" onPress={openPaymentSheet} /> </Screen> ); }
Wenn kein Fehler auftritt, informieren Sie den/die Nutzer/in, dass der Vorgang abgeschlossen ist (zum Beispiel durch die Anzeige einer Bestellbestätigung).
Wenn Sie allowsDelayedPaymentMethods
auf true festlegen, werden Zahlungsmethoden mit verzögerter Benachrichtigung wie US-Bankkonten zugelassen. Für diese Zahlungsmethoden ist der endgültige Zahlungsstatus nicht bekannt, wenn das PaymentSheet
abgeschlossen wird. Stattdessen ist sie erfolgreich oder schlägt fehl. Wenn Sie diese Art von Zahlungsmethoden unterstützen, informieren Sie den Kunden/die Kundin darüber, dass seine/ihre Bestellung bestätigt ist, und führen seine/ihre Bestellung erst aus (z. B. das Produkt versenden), wenn die Zahlung erfolgreich ist.
Rückgabe-URL einrichten (nur für iOS)Clientseitig
Wenn Kundinnen/Kunden Ihre App verlassen (zum Beispiel um sich in Safari oder ihrer Banking-App zu authentifizieren), bieten Sie ihnen eine Möglichkeit, automatisch zu Ihrer App zurückzukehren. Für viele Arten von Zahlungsmethoden ist eine Rückgabe-URL erforderlich. Wenn Sie keine angeben, können wir Ihren Nutzer/innen keine Zahlungsmethoden anbieten, für die eine Rückgabe-URL erforderlich ist, selbst wenn Sie diese aktiviert haben.
So geben Sie eine Rückgabe-URL an:
- Registrieren Sie eine benutzerdefinierte URL. Universelle Links werden nicht unterstützt.
- Konfigurieren Sie Ihre benutzerdefinierte URL.
- Richten Sie Ihre Root-Komponente so ein, dass sie die URL an das Stripe SDK weitergibt, wie unten gezeigt.
Notiz
Wenn Sie Expo verwenden, stellen Sie Ihr Schema in der Datei app.
ein.
import { useEffect, useCallback } from 'react'; import { Linking } from 'react-native'; import { useStripe } from '@stripe/stripe-react-native'; export default function MyApp() { const { handleURLCallback } = useStripe(); const handleDeepLink = useCallback( async (url: string | null) => { if (url) { const stripeHandled = await handleURLCallback(url); if (stripeHandled) { // This was a Stripe URL - you can return or add extra handling here as you see fit } else { // This was NOT a Stripe URL – handle as you normally would } } }, [handleURLCallback] ); useEffect(() => { const getUrlAsync = async () => { const initialUrl = await Linking.getInitialURL(); handleDeepLink(initialUrl); }; getUrlAsync(); const deepLinkListener = Linking.addEventListener( 'url', (event: { url: string }) => { handleDeepLink(event.url); } ); return () => deepLinkListener.remove(); }, [handleDeepLink]); return ( <View> <AwesomeAppComponent /> </View> ); }
Legen Sie beim Aufrufen der Methode initPaymentSheet
außerdem die returnURL
fest:
await initPaymentSheet({ ... returnURL: 'your-app://stripe-redirect', ... });
Weitere Informationen zu nativen URL-Schemen finden Sie in der Dokumentation für Android und iOS.
Ereignisse nach Zahlung verarbeiten
Stripe sendet ein payment_intent.succeeded-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie Webhook-Tool im Dashboard oder folgen Sie der Webhook-Anleitung, um diese Ereignisse zu empfangen und führen Sie Aktionen aus, wie beispielsweise das Senden einer Bestellbestätigung per E-Mail, das Protokollieren des Verkaufs in der Datenbank oder das Starten eines Versand-Workflows.
Überwachen Sie diese Ereignisse, statt auf einen Callback vom Client zu warten. Auf dem Client könnten die Kund/innen das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist. Bösartige Clients könnten dann die Antwort manipulieren. Wenn Sie Ihre Integration so einrichten, dass sie asynchrone Ereignisse überwacht, können Sie verschiedene Arten von Zahlungsmethoden mit einer einzelnen Integration akzeptieren.
Neben der Abwicklung des payment_
-Ereignisses empfehlen wir die Abwicklung von diesen weiteren Ereignissen, wenn Sie Zahlungen mit dem Payment Element erfassen:
Ereignis | Beschreibung | Aktion |
---|---|---|
payment_intent.succeeded | Wird gesendet, wenn Kundinnen und Kunden eine Zahlung erfolgreich abgeschlossen haben. | Senden Sie den Kund/innen eine Auftragsbestätigung und wickeln Sie die Bestellung ab. |
payment_intent.processing | Wird gesendet, wenn eine/e Kund/in eine Zahlung erfolgreich veranlasst hat, die Zahlung aber noch nicht abgeschlossen ist. Dieses Ereignis wird am häufigsten gesendet, wenn der Kunde/die Kundin eine Bankabbuchung veranlasst. In Zukunft folgt darauf entweder ein payment_ - oder ein payment_ -Ereignis. | Senden Sie eine Bestellbestätigung an die Kund/innen, in der angegeben ist, dass die Zahlung noch aussteht. Bei digitalen Waren können Sie die Bestellung abwickeln, bevor Sie darauf warten, dass die Zahlung erfolgt. |
payment_intent.payment_failed | Wird gesendet, wenn ein Kunde/eine Kundin einen Zahlungsversuch durchführt, die Zahlung jedoch fehlschlägt. | Wenn eine Zahlung von processing zu payment_ übergeht, bieten Sie der Kundin/dem Kunden einen weiteren Zahlungsversuch an. |
Integration testen
Hier finden Sie weitere Informationen zum Testen Ihrer Integration.
OptionalLink aktivieren
Aktivieren Sie Link in Ihren Einstellungen für Zahlungsmethoden, damit Ihre Kundinnen/Kunden ihre Zahlungsinformationen sicher speichern und wiederverwenden können. Diese müssen die Zahlung dann nur mit einem Klick auf die Express-Schaltfläche von Link abschließen.
Übergeben Sie die E-Mail-Adresse Ihrer Kundinnen/Kunden an das Mobile Payment Element
Link authentifiziert Kundinnen/Kunden über ihre E-Mail-Adresse. Stripe empfiehlt, möglichst viele Informationen vorab auszufüllen, um den Bezahlvorgang zu optimieren.
Um Namen, E-Mail-Adresse und Telefonnummer der Kundinnen/Kunden vorab auszufüllen, übergeben Sie defaultBillingDetails
mit Ihren Kundendaten an initPaymentSheet
.
await initPaymentSheet({ ... defaultBillingDetails: { name: 'Jenny Rosen', email: 'jenny.rosen@example.com', phone: '888-888-8888', }, });
OptionalApple Pay aktivieren
Für eine Apple-Händler-ID registrieren
Beantragen Sie eine Apple-Händler-ID, indem Sie sich auf der Apple Developer-Website für eine neue Kennung registrieren.
Tragen Sie eine Beschreibung und eine Kennung in das Formular ein. Die Beschreibung ist nur für Ihre internen Zwecke bestimmt und kann später geändert werden. Stripe empfiehlt, dass Sie den Namen Ihrer App als Kennung verwenden, zum Beispiel merchant.
.
Neues Apple Pay-Zertifikat erstellen
Erstellen Sie ein Zertifikat für Ihre App, um Zahlungsdaten zu verschlüsseln.
Gehen Sie zu den iOS-Zertifikateinstellungen im Dashboard, klicken Sie auf Neue Anwendung hinzufügen und befolgen Sie die Anleitung.
Laden Sie eine Certificate Signing Request (CSR)-Datei herunter, um ein sicheres Zertifikat von Apple zu erhalten, mit dem Sie Apple Pay verwenden können.
Eine CSR-Datei muss verwendet werden, um genau ein Zertifikat auszustellen. Wenn Sie Ihre Apple-Händler-ID wechseln, müssen Sie zu den iOS-Zertifikateinstellungen im Dashboard gehen, um eine neue CSR und ein Zertifikat zu erhalten.
Mit Xcode integrieren
Fügen Sie Ihrer App die Apple Pay-Funktion hinzu. Öffnen Sie in Xcode Ihre Projekteinstellungen, klicken Sie auf die Registerkarte Signing & Capabilities (Anmeldung und Funktionen) und fügen Sie die Apple Pay-Funktion hinzu. Möglicherweise werden Sie an dieser Stelle aufgefordert, sich bei Ihrem Entwicklerkonto anzumelden. Wählen Sie die zuvor erstellte Händler-ID aus. Ihre App sollte nun Apple Pay unterstützen.

Apple Pay-Funktion in Xcode aktivieren
Apple Pay hinzufügen
Sendungsverfolgung
Um für iOS 16 und neuere Versionen Informationen zur Sendungsverfolgung hinzuzufügen, konfigurieren Sie eine Callback-Funktion für setOrderTracking
. Stripe ruft Ihre Implementierung auf, nachdem die Zahlung durchgeführt wurde, aber bevor iOS das Apple Pay-Formular schließt.
Rufen Sie in Ihrer Implementierung der Callback-Funktion setOrderTracking
die Bestelldetails für die abgeschlossene Bestellung von Ihrem Server ab. Übergeben Sie die Details an die angegebene completion
-Funktion.
Weitere Informationen zur Sendungsverfolgung finden Sie in der Apple-Dokumentation zu Wallet-Bestellungen.
await initPaymentSheet({ // ... applePay: { // ... setOrderTracking: async complete => { const apiEndpoint = Platform.OS === 'ios' ? 'http://localhost:4242' : 'http://10.0.2.2:4567'; const response = await fetch( `${apiEndpoint}/retrieve-order?orderId=${orderId}`, { method: 'GET', headers: { 'Content-Type': 'application/json', }, }, ); if (response.status === 200) { const orderDetails = await response.json(); // orderDetails should include orderIdentifier, orderTypeIdentifier, // authenticationToken and webServiceUrl complete(orderDetails); } }, }, });
OptionalGoogle Pay aktivieren
Integration einrichten
Um Google Pay zu verwenden, aktivieren Sie zuerst die Google Pay API, indem Sie dem Tag <application>
Ihrer Datei AndroidManifest.xml Folgendes hinzufügen:
<application> ... <meta-data android:name="com.google.android.gms.wallet.api.enabled" android:value="true" /> </application>
Weitere Informationen finden Sie in der Google Pay API für Android.
Google Pay hinzufügen
Setzen Sie bei der Initialisierung von PaymentSheet
merchantCountryCode
auf den Ländercode Ihres Unternehmens und setzen Sie googlePay
auf „true“.
Sie können die Testumgebung auch verwenden, indem Sie den Parameter testEnv
übergeben. Sie können Google Pay nur auf einem physischen Android-Gerät testen. Folgen Sie der React Native-Dokumentation, um Ihre Anwendung auf einem physischen Gerät zu testen.
const { error, paymentOption } = await initPaymentSheet({ // ... googlePay: { merchantCountryCode: 'US', testEnv: true, // use test environment }, });
OptionalScannen von Karten aktivieren (nur für iOS)Clientseitig
Um die Unterstützung für Kartenscans zu aktivieren, setzen Sie NSCameraUsageDescription
(Datenschutz – Beschreibung Kameranutzung) in der Info.plist Ihrer Anwendung und geben Sie einen Grund für den Zugriff auf die Kamera an (zum Beispiel „zum Scannen von Karten“). Geräte mit iOS 13 oder höher unterstützen Kartenscans.
OptionalFormular anpassenClientseitig
Alle Anpassungen werden mithilfe von initPaymentSheet
konfiguriert.
Erscheinungsbild
Passen Sie mit der Appearance API Farben, Schriftarten und mehr an das Erscheinungsbild Ihrer App an.
Anzeigename des Händlers
Geben Sie einen kundenorientierten Unternehmensnamen an, indem Sie merchantDisplayName
festlegen. Standardmäßig handelt es sich dabei um den Namen Ihrer App.
await initPaymentSheet({ // ... merchantDisplayName: 'Example Inc.', });
Dunkelmodus
Standardmäßig passt PaymentSheet
sich automatisch an die systemweiten Erscheinungsbildeinstellungen des/der Nutzer/in an (heller und dunkler Modus). Dies können Sie ändern, indem Sie die Eigenschaft style
in iOS auf den Modus alwaysLight
oder alwaysDark
setzen.
await initPaymentSheet({ // ... style: 'alwaysDark', });
Wählen Sie auf einem Android-Gerät den Hell- oder Dunkelmodus für Ihre App aus:
// force dark AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES) // force light AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)
Standardabrechnungsdetails
Um Standardwerte für die im PaymentSheet erfassten Rechnungsdetails festzulegen, konfigurieren Sie die Eigenschaft defaultBillingDetails
. Das PaymentSheet
füllt seine Felder vorab mit den von Ihnen angegebenen Werten aus.
await initPaymentSheet({ // ... defaultBillingDetails: { email: 'foo@bar.com', address: { country: 'US', }, }, });
Abrechnungdaten erfassen
Verwenden Sie billingDetailsCollectionConfiguration
, um anzugeben, wie Sie Rechnungsdetails im PaymentSheet erfassen möchten.
Sie können den Namen, die E-Mail-Adresse, die Telefonnummer und die Adresse Ihrer Kundinnen und Kunden erfassen.
Wenn Sie nicht beabsichtigen, die Werte zu erfassen, die für die Zahlungsmethode erforderlich sind, müssen Sie Folgendes tun:
- Hängen Sie die Werte, die nicht von
PaymentSheet
erfasst werden, an die EigenschaftdefaultBillingDetails
an. - Legen Sie
billingDetailsCollectionConfiguration.
aufattachDefaultsToPaymentMethod true
fest.
await initPaymentSheet({ // ... defaultBillingDetails: { email: 'foo@bar.com', } billingDetailsCollectionConfiguration: { name: PaymentSheet.CollectionMode.ALWAYS, email: PaymentSheet.CollectionMode.NEVER, address: PaymentSheet.AddressCollectionMode.FULL, attachDefaultsToPaymentMethod: true }, });
Notiz
Wenden Sie sich an Ihren Rechtsbeistand bezüglich der Gesetze, die für das Erfassen von Informationen gelten. Erfassen Sie Telefonnummern nur, wenn Sie sie für die Transaktion benötigen.
OptionalAbmeldung von Nutzer/innen verarbeiten
PaymentSheet
speichert einige Informationen lokal, um festzuhalten, ob Nutzer/innen Link innerhalb einer App verwendet haben. Um den internen Status von PaymentSheet
zu löschen, rufen Sie die resetPaymentSheetCustomer()
-Methode auf, wenn sich Ihre Nutzer/innen abmelden.
export default function CheckoutScreen() { // continued from above const { initPaymentSheet, presentPaymentSheet, resetPaymentSheetCustomer } = useStripe(); const logout = async () => { await resetPaymentSheetCustomer(); }; return ( <Screen> <Button title="Checkout" onPress={openPaymentSheet} /> <Button title="Checkout" onPress={logout} /> </Screen> ); }
OptionalVollständige Bezahlung in Ihrer Benutzeroberfläche
Sie können das Zahlungsformular anzeigen, um nur die Details einer Zahlungsmethode zu erfassen, und später eine confirm
-Methode aufrufen, um die Zahlung in der Nutzeroberfläche Ihrer App abzuschließen. Dies ist nützlich, wenn Sie eine nutzerspezifische Kaufschaltfläche haben oder zusätzliche Schritte erfordern, nachdem die Zahlungsdetails erfasst wurden.

Notiz
Eine Beispiel-Integration ist in unserem GitHub verfügbar.
- Rufen Sie zunächst
initPaymentSheet
auf und übergeben SiecustomFlow: true
.initPaymentSheet
wird mit einer anfänglichen Zahlungsoption aufgelöst, die ein Bild und ein Label enthält, die die Zahlungsmethode des/der Kund/in darstellen. Aktualisieren Sie Ihre Nutzeroberfläche mit diesen Details.
const { initPaymentSheet, presentPaymentSheet, confirmPaymentSheetPayment, } = useStripe() const { error, paymentOption } = await initPaymentSheet({ customerId: customer, customerEphemeralKeySecret: ephemeralKey, paymentIntentClientSecret: paymentIntent, customFlow: true, merchantDisplayName: 'Example Inc.', }); // Update your UI with paymentOption
- Verwenden Sie
presentPaymentSheet
, um Zahlungsdetails zu erfassen. Wenn der/die Kund/in fertig ist, schließt sich das Formular von selbst und löst das Versprechen auf. Aktualisieren Sie Ihre Nutzeroberfläche mit den Angaben zur ausgewählten Zahlungsmethode.
const { error, paymentOption } = await presentPaymentSheet();
- Verwenden Sie
confirmPaymentSheetPayment
, um die Zahlung zu bestätigen. Dies wird mit dem Ergebnis der Zahlung aufgelöst.
const { error } = await confirmPaymentSheetPayment(); if (error) { Alert.alert(`Error code: ${error.code}`, error.message); } else { Alert.alert( 'Success', 'Your order is confirmed!' ); }
Wenn Sie allowsDelayedPaymentMethods
auf true festlegen, werden Zahlungsmethoden mit verzögerter Benachrichtigung wie US-Bankkonten zugelassen. Für diese Zahlungsmethoden ist der endgültige Zahlungsstatus nicht bekannt, wenn das PaymentSheet
abgeschlossen wird. Stattdessen ist sie erfolgreich oder schlägt fehl. Wenn Sie diese Art von Zahlungsmethoden unterstützen, informieren Sie den Kunden/die Kundin darüber, dass seine/ihre Bestellung bestätigt ist, und führen seine/ihre Bestellung erst aus (z. B. das Produkt versenden), wenn die Zahlung erfolgreich ist.