In-App-Zahlungen annehmen
Erstellen Sie mithilfe des Payment Sheet eine benutzerdefinierte Zahlungsintegration in Ihrer iOS-, Android- oder React Native-App.
Das Payment Sheet ist eine anpassbare Komponente, die eine Liste von Zahlungsmethoden anzeigt und Zahlungsdetails in Ihrer App mithilfe eines unteren Blatts erfasst.
Mit einem PaymentIntent-Ablauf können Sie eine Abbuchung in Ihrer App erstellen. Bei der Bestätigung der Zahlung können Sie optional Zahlungsmethoden speichern. Bei dieser Integration rendern Sie das Payment Sheet, erstellen einen PaymentIntent und bestätigen eine Zahlung in Ihrer App.
Stripe einrichtenServerseitigClientseitig
Serverseitig
Diese Integration erfordert Endpoints auf Ihrem Server, die mit der Stripe-API kommunizieren können. Nutzen Sie unsere offiziellen Bibliotheken für den Zugriff auf die Stripe-API von Ihrem Server aus:
Client-seitig
Das Stripe iOS SDK ist Open Source, vollständig dokumentiert und kompatibel mit Apps, die iOS 13 oder höher unterstützen.
Notiz
Details zur aktuellen SDK-Version und zu vorherigen Versionen finden Sie auf der Seite Releases auf GitHub. Um bei Veröffentlichung einer neuen Version eine Benachrichtigung zu erhalten, achten Sie auf die Releases zum jeweiligen Repository.
Sie müssen auch Ihren veröffentlichbaren Schlüssel festlegen, damit das SDK API Aufrufe an Stripe tätigen kann. Zunächst können Sie den veröffentlichbaren Schlüssel während der Integration auf dem Client codieren, aber den veröffentlichbaren Schlüssel von Ihrem Server in der Produktion abrufen.
// Set your publishable key: remember to change this to your live publishable key in production // See your keys here: https://dashboard.stripe.com/apikeys STPAPIClient.shared.publishableKey =
"pk_test_TYooMQauvdEDq54NiTphI7jx"
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.
Rückgabe-URL einrichtenClientseitig
Der Kunde/Die Kundin verlässt ggf. Ihre App, um sich zu authentifizieren (z. B. in Safari oder einer Banking-App). Damit sie nach der Authentifizierung automatisch zu Ihrer App zurückkehren können, konfigurieren Sie ein benutzerdefiniertes URL-Schema und richten Sie Ihren App-Delegate so ein, dass die URL an das SDK weitergeleitet wird. Stripe unterstützt keine universellen Links.
Legen Sie zusätzlich die returnURL in Ihrem PaymentSheet.Configuration-Objekt auf die URL für Ihre App fest.
var configuration = PaymentSheet.Configuration() configuration.returnURL = "your-app://stripe-redirect"
Zahlungsdaten erfassenClientseitig
Wir bieten zwei Arten der Integration an. Wählen Sie eine, um fortzufahren.
PaymentSheet | PaymentSheet.FlowController |
---|---|
![]() | ![]() |
Zeigt ein Formular an, um die Zahlungsdetails zu erfassen und die Zahlung abzuschließen. Die Schaltfläche im Formular zeigt $X bezahlen an und schließt die Zahlung ab. | Zeigt ein Formular an, über das nur Zahlungsdetails erfasst werden. Die Schaltfläche im Formular zeigt Fortfahren an und leitet Kundinnen und Kunden zu Ihrer App zurück, in der die Zahlung mit Ihrer eigenen Schaltfläche abgeschlossen wird. |
PaymentIntent erstellenServerseitig
Erstellen Sie auf Ihrem Server a PaymentIntent durch Angabe eines Betrags und einer Währung. Sie können Zahlungsmethoden über das Dashboard verwalten. Stripe handhabt die Rückgabe geeigneter Zahlungsmethoden basierend auf Faktoren wie Betrag, Währung und Zahlungsablauf der Transaktion. Um zu verhindern, dass böswillige Kundinnen und Kunden ihre eigenen Preise wählen, sollten Sie den Preis immer auf der Serverseite (einer vertrauenswürdigen Umgebung) festlegen und nicht auf dem Client.
Wenn der Aufruf erfolgreich ist, geben Sie den PaymentIntent das Client-Geheimnis zurück. Wenn der Aufruf fehlschlägt, beheben Sie den Fehler und geben eine Fehlermeldung mit einer kurzen Erklärung an Ihre Kundin/Ihren Kunden zurück.
Notiz
Überprüfen Sie, ob alle IntentConfiguration-Eigenschaften mit Ihrem PaymentIntent (zum Beispiel setup_
, amount
und currency
) übereinstimmen.
Ereignisse nach Zahlung verarbeitenServerseitig
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.
OptionalKarten speichernServerseitigClientseitig
PaymentSheet kann das Kontrollkästchen Diese Karte für zukünftige Verwendung speichern anzeigen. Dadurch werden die Karten von Kundinnen/Kunden gespeichert und zu einem späteren Zeitpunkt erneut anzeigt. Um dieses Kontrollkästchen zu aktivieren, erstellen Sie ein Kundenobjekt auf Ihrem Server sowie einen zugehörigen temporären Schlüssel.
const stripe = require('stripe')('sk_test_your_secret_key'); app.post('/mobile-payment-element', async (req, res) => { // Use an existing Customer ID if this is a returning customer. const customer = await stripe.customers.create(); const ephemeralKey = await stripe.ephemeralKeys.create( {customer: customer.id}, {apiVersion: '2020-08-27'} ); res.json({ ephemeralKey: ephemeralKey.secret, customer: customer.id, }); });
Als Nächstes konfigurieren Sie PaymentSheet mit der Kunden-ID und dem Client-Geheimnis des temporären Schlüssels.
var configuration = PaymentSheet.Configuration() configuration.customer = .init(id: customerId, ephemeralKeySecret: customerEphemeralKeySecret) self.paymentSheet = PaymentSheet(..., configuration: configuration)
OptionalZahlungsmethoden mit Verzögerung zulassenClientseitig
Zahlungsmethoden mit Verzögerung garantieren nicht, dass Sie am Ende des Bezahlvorgangs Gelder von Ihrem Kunden/Ihrer Kundin erhalten, da die Abwicklung eine gewisse Zeit in Anspruch nimmt (z. B. bei US-Bankkonten, SEPA-Lastschrift, iDEAL und Bancontact) oder weil Kundinnen und Kunden aktiv werden müssen, um den Vorgang abzuschließen (z. B. OXXO, Konbini und Boleto).
Standardmäßig zeigt PaymentSheet keine Zahlungsmethoden mit Verzögerung an. Um die Funktion zu aktivieren, setzen Sie allowsDelayedPaymentMethods
in Ihrer PaymentSheet.
auf „true“. Durch diesen Schritt allein werden keine bestimmten Zahlungsmethoden aktiviert. Er zeigt vielmehr an, dass Ihre App in der Lage ist, diese zu verarbeiten. Obwohl beispielsweise OXXO von PaymentSheet nicht unterstützt wird, kann Ihre App OXXO als Zahlungsoption ohne zusätzliche Integrationsänderungen anzeigen, wenn es unterstützt wird und Sie auf die neueste SDK-Version aktualisiert haben.
var configuration = PaymentSheet.Configuration() configuration.allowsDelayedPaymentMethods = true self.paymentSheet = PaymentSheet(..., configuration: configuration)
Wenn die Kundin/der Kunde erfolgreich eine dieser verzögerten Zahlungsmethoden in PaymentSheet verwendet, lautet das zurückgegebene Zahlungsergebnis .
.
OptionalApple Pay aktivieren
Notiz
Wenn Ihr Zahlungsbildschirm eine spezielle Apple Pay-Schaltfläche enthält, folgen Sie dem Apple Pay-Leitfaden und verwenden Sie ApplePayContext
, um Zahlungen über Ihre Apple Pay-Schaltfläche einzuziehen. Sie können PaymentSheet
verwenden, um andere Arten von Zahlungsmethoden zu handhaben.
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
Bestellverfolgung
Um Informationen zur Bestellverfolgung in iOS 16 oder höher hinzuzufügen, konfigurieren Sie einen authorizationResultHandler in Ihren PaymentSheet.
. Stripe ruft Ihre Implementierung auf, nachdem die Zahlung durchgeführt wurde, aber bevor iOS das Apple Pay-Formular schließt.
Rufen Sie in Ihrer authorizationResultHandler
-Implementierung die Bestelldetails für die abgeschlossene Bestellung von Ihrem Server ab. Fügen Sie dem angegebenen PKPaymentAuthorizationResult die Details hinzu und rufen Sie den angegebenen Abschluss-Handler auf.
Weitere Informationen zur Bestellverfolgung finden Sie in der Dokumentation zu Wallet-Bestellungen von Apple.
let customHandlers = PaymentSheet.ApplePayConfiguration.Handlers( authorizationResultHandler: { result, completion in // Fetch the order details from your service MyAPIClient.shared.fetchOrderDetails(orderID: orderID) { myOrderDetails result.orderDetails = PKPaymentOrderDetails( orderTypeIdentifier: myOrderDetails.orderTypeIdentifier, // "com.myapp.order" orderIdentifier: myOrderDetails.orderIdentifier, // "ABC123-AAAA-1111" webServiceURL: myOrderDetails.webServiceURL, // "https://my-backend.example.com/apple-order-tracking-backend" authenticationToken: myOrderDetails.authenticationToken) // "abc123" // Call the completion block on the main queue with your modified PKPaymentAuthorizationResult completion(result) } } ) var configuration = PaymentSheet.Configuration() configuration.applePay = .init(merchantId: "merchant.com.your_app_name", merchantCountryCode: "US", customHandlers: customHandlers)
OptionalKartenscannen aktivieren
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.
OptionalPassen Sie das Tabellenblatt an
Alle Anpassungen werden mithilfe des PaymentSheet.Configuration-Objekts konfiguriert.
Erscheinungsbild
Passen Sie mit der Appearance API Farben, Schriftarten und mehr an das Erscheinungsbild Ihrer App an.
Layout der Zahlungsmethode
Konfigurieren Sie das Layout der Zahlungsmethoden im Formular mit paymentMethodLayout. Sie können sie horizontal oder vertikal anzeigen oder das Layout von Stripe automatisch optimieren lassen.

var configuration = PaymentSheet.Configuration() configuration.paymentMethodLayout = .automatic
Adressen der Nutzer/innen erfassen
Erfassen Sie lokale und internationale Versand- und Rechnungsadressen von Ihren Kundinnen und Kunden mithilfe des Address Element.
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.
var configuration = PaymentSheet.Configuration() configuration.merchantDisplayName = "My app, Inc."
Dunkelmodus
PaymentSheet
passt sich automatisch an die systemweiten Erscheinungsbildeinstellungen des Nutzers/der Nutzerin an (heller und dunkler Modus). Wenn Ihre App den Dunkelmodus nicht unterstützt, können Sie den Stil auf den Modus alwaysLight
oder alwaysDark
einstellen.
var configuration = PaymentSheet.Configuration() configuration.style = .alwaysLight
Standardabrechnungsdetails
Um Standardwerte für die im Zahlungsformular erfassten Rechnungsdetails festzulegen, konfigurieren Sie die Eigenschaft defaultBillingDetails
. Die Felder von PaymentSheet
werden vorab mit den von Ihnen angegebenen Werten ausgefüllt.
var configuration = PaymentSheet.Configuration() configuration.defaultBillingDetails.address.country = "US" configuration.defaultBillingDetails.email = "foo@bar.com"
Erfassung der Rechnungsdetails
Verwenden Sie billingDetailsCollectionConfiguration
, um anzugeben, wie Sie Rechnungsdetails im Zahlungsformular erfassen möchten.
Sie können den Namen, die E-Mail-Adresse, die Telefonnummer und die Adresse Ihrer Kundinnen und Kunden erfassen.
Wenn Sie nur die für die Zahlungsmethode erforderlichen Rechnungsdetails angeben möchten, legen Sie billingDetailsCollectionConfiguration.
auf „true“ fest. In diesem Fall werden PaymentSheet.
als Abrechnungsdetails der Zahlungsmethode festgelegt.
Wenn Sie zusätzliche Rechnungsdetails erfassen möchten, die für die Zahlungsmethode nicht unbedingt erforderlich sind, legen Sie billingDetailsCollectionConfiguration.
auf „false“ fest. In diesem Fall werden die über das PaymentSheet
erfassten Rechnungsdetails als Rechnungsdetails der Zahlungsmethode festgelegt.
var configuration = PaymentSheet.Configuration() configuration.defaultBillingDetails.email = "foo@bar.com" configuration.billingDetailsCollectionConfiguration.name = .always configuration.billingDetailsCollectionConfiguration.email = .never configuration.billingDetailsCollectionConfiguration.address = .full configuration.billingDetailsCollectionConfiguration.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.
OptionalAktiveren der Funktion zur erneuten Erfassung der Prüfziffer/CVC bei Bestätigung
Bei den Anweisungen zum erneuten Erfassen der Prüfziffer/CVC einer gespeicherten Karte während der Bestätigung des PaymentIntent wird davon ausgegangen, dass Ihre Integration Folgendes enthält:
- Erfassung von Zahlungsdetails vor der Erstellung eines PaymentIntent
- Clientseitige Bestätigung
Parameter der Intent-Erstellung aktualisieren
Um die Prüfziffer/CVC bei der Zahlungsbestätigung erneut zu erfassen, fügen Sie bei der Erstellung des PaymentIntent die beiden Parameter customerId
und require_
ein.