Weiter zum Inhalt
Konto erstellen
oder
anmelden
Das Logo der Stripe-Dokumentation
/
KI fragen
Konto erstellen
Anmelden
Jetzt starten
Zahlungen
Umsatz
Plattformen und Marktplätze
Geldmanagement
Entwicklerressourcen
ÜbersichtAlle Produkte ansehen
Beginnen Sie mit der Entwicklung
Entwicklung starten
    Entwicklungsumgebung einrichten
    Ihre erste API-Anfrage senden
    Zahlung annehmen
    Neue Funktionen einrichten und testen
    Checkliste vor Go Live
Informationen zu APIs
Entwicklung per LLM
Stripe verwenden, ohne Code zu erstellen
Stripe einrichten
Konto erstellen
Web-Dashboard
Mobiles Dashboard
Auf Stripe umsteigen
Betrugsrisiko verwalten
Betrug verstehen
Betrugsprävention von Radar
Zahlungsanfechtungen verwalten
Identitäten verifizieren
StartseiteJetzt startenStart developing

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 einrichten
Serverseitig
Clientseitig

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:

Command Line
Ruby
# Available as a gem sudo gem install stripe
Gemfile
Ruby
# If you use bundler, you can add this line to your Gemfile gem 'stripe'

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):

Command Line
yarn add @stripe/stripe-react-native

Installieren Sie als Nächstes einige weitere erforderliche Abhängigkeiten:

  • Navigieren Sie für iOS zum Verzeichnis ios und führen Sie pod install aus, um sicherzustellen, dass Sie auch die erforderlichen nativen Abhängigkeiten installieren.
  • 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ügen
Serverseitig

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:

  1. PaymentIntent: Stripe verwendet diesen, um Ihre Absicht darzustellen, Zahlungen von Ihren Kundinnen/Kunden anzufordern, wobei Abbuchungsversuche und Zahlungsstatusänderungen im gesamten Vorgang dokumentiert werden.

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

  3. (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:

  1. Ruft den Kunden/die Kundin ab oder erstellt einen neuen/eine neue.
  2. Erstellt einen temporären Schlüssel für den Kunden/die Kundin.
  3. Erstellt einen PaymentIntent mit dem Betrag, der Währung und dem Kunden/der Kundin. Den Parameter automatic_payment_methods können Sie optional ebenfalls einfügen. Stripe aktiviert seine Funktionalität standardmäßig in der neuesten Version der API.
  4. 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.

Notiz

Eine laufende Implementierung dieses Endpoints können Sie auf Glitch testen.

Zahlungsmethoden können Sie über das Dashboard verwalten. Stripe handhabt die Rückgabe geeigneter Zahlungsmethoden basierend auf Faktoren wie Betrag, Währung und Zahlungsablauf der Transaktion. Der PaymentIntent wird mit den Zahlungsmethoden erstellt, die Sie im Dashboard konfiguriert haben. Wenn Sie das Dashboard nicht verwenden möchten oder wenn Sie Zahlungsmethoden manuell angeben möchten, können Sie sie mit dem Attribut payment_method_types auflisten.

Command Line
Curl
# Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:
\ -X "POST" # Create an Ephemeral Key for the Customer curl https://api.stripe.com/v1/ephemeral_keys \ -u
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:
\ -H "Stripe-Version: 2025-06-30.basil" \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:
\ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ # In the latest version of the API, specifying the `automatic_payment_methods` parameter # is optional because Stripe enables its functionality by default. -d "automatic_payment_methods[enabled]"=true \

Zahlungsdaten erfassen
Clientseitig

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:

  1. Registrieren Sie eine benutzerdefinierte URL. Universelle Links werden nicht unterstützt.
  2. Konfigurieren Sie Ihre benutzerdefinierte URL.
  3. 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.json ein.

App.tsx
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_intent.succeeded-Ereignisses empfehlen wir die Abwicklung von diesen weiteren Ereignissen, wenn Sie Zahlungen mit dem Payment Element erfassen:

EreignisBeschreibungAktion
payment_intent.succeededWird 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.processingWird 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_intent.succeeded- oder ein payment_intent.payment_failed-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_failedWird gesendet, wenn ein Kunde/eine Kundin einen Zahlungsversuch durchführt, die Zahlung jedoch fehlschlägt.Wenn eine Zahlung von processing zu payment_failed übergeht, bieten Sie der Kundin/dem Kunden einen weiteren Zahlungsversuch an.

Integration testen

KartennummerSzenarioSo führen Sie den Test durch
Die Kartenzahlung ist erfolgreich und es ist keine Authentifizierung erforderlich.Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an.
Für die Kartenzahlung ist eine Authentifizierung erforderlich.Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an.
Die Karte wird mit einem Ablehnungscode wie insufficient_funds abgelehnt.Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an.
Die UnionPay-Karte hat eine variable Länge von 13 bis 19 Ziffern.Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an.

Hier finden Sie weitere Informationen zum Testen Ihrer Integration.

OptionalLink aktivieren

OptionalApple Pay aktivieren

OptionalGoogle Pay aktivieren

OptionalScannen von Karten aktivieren (nur für iOS)
Clientseitig

OptionalFormular anpassen
Clientseitig

OptionalAbmeldung von Nutzer/innen verarbeiten

OptionalVollständige Bezahlung in Ihrer Benutzeroberfläche

War diese Seite hilfreich?
JaNein
Benötigen Sie Hilfe? Kontaktieren Sie den Kundensupport.
Nehmen Sie an unserem Programm für frühzeitigen Zugriff teil.
Schauen Sie sich unser Änderungsprotokoll an.
Fragen? Sales-Team kontaktieren.
LLM? Lesen Sie llms.txt.
Unterstützt von Markdoc
Code quickstart
Ähnliche Leitfäden
Elements Appearance API
Weitere Zahlungsszenarien
So funktionieren Karten
Verwendete Produkte
Payments
Elements
Checkout