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
Übersicht
Informationen zu Stripe Payments
Aktualisieren Sie Ihre Integration
Zahlungsanalysefunktionen
Online-Zahlungen
ÜbersichtIhren Use case findenVerwenden Sie Managed Payments
Payment Links verwenden
Vorgefertigte Checkout-Seite verwenden
Erstellen Sie eine benutzerdefinierte Integration mit Elements
In-App-Integration erstellen
    Übersicht
    Zahlungsformular
    Payment Element
      In-App-Zahlungen annehmen
      Erscheinungsbild anpassen
      Nutzerdefinierte Zahlungsmethoden hinzufügen
      Kartenmarken filtern
    Ausgehender Link für In-App-Käufe
    Adressen erfassen
    Verwalten der Zahlungsmethoden in den Einstellungen
    Karten in den USA und Kanada
Zahlungsmethoden
Zahlungsmethoden hinzufügen
Zahlungsmethoden verwalten
Schnellerer Bezahlvorgang mit Link
Zahlungsschnittstellen
Payment Links
Checkout
Web Elements
In-App Zahlungen
Zahlungsszenarien
Umgang mit mehreren Währungen
Nutzerdefinierte Zahlungsabläufe
Flexibles Acquiring
Orchestrierung
Präsenzzahlungen
Terminal
Mehr als Zahlungen
Unternehmensgründung
Krypto
Agentenbasierter Handel
Financial Connections
Climate
Betrug verstehen
Betrugsprävention von Radar
Zahlungsanfechtungen verwalten
Identitäten verifizieren
StartseiteZahlungenBuild an in-app integrationPayment Element

In-App-Zahlungen annehmen

Erstellen Sie mit dem Zahlungs-Element eine maßgeschneiderte Integration von Zahlungen in Ihrer iOS-, Android- oder React Native-App.

Das Zahlungs-Element ist eine anpassbare Komponente, die eine Liste von Zahlungsmethoden anzeigt, die Sie in jeden Bildschirm Ihrer App einfügen können. Wenn Kunden/Kundinnen mit den Zahlungsmethoden in der Liste interagieren, öffnet die Komponente einzelne Unterseiten, um die Zahlungsdetails erfassen zu können.

Mit einem PaymentIntent-Ablauf können Sie eine Zahlung in Ihrer App abwickeln. Bei dieser Integration rendern Sie das Zahlungs-Element, erstellen einen PaymentIntent und bestätigen eine Zahlung in Ihrer App.

Stripe einrichten
Serverseitig
Clientseitig

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:

Command Line
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# Available as a gem sudo gem install stripe
Gemfile
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# If you use bundler, you can add this line to your Gemfile gem 'stripe'

Client-seitig

Das Stripe iOS SDK ist Open Source, vollständig dokumentiert und kompatibel mit Apps, die iOS 13 oder höher unterstützen.

Führen Sie zur Installation des SDK die folgenden Schritte aus:

  1. Wählen Sie in Xcode Datei > Add Package Dependencies (Paketabhängigkeiten hinzufügen) aus und geben Sie als Repository-URL https://github.com/stripe/stripe-ios-spm ein.
  2. Wählen auf unserer Veröffentlichungsseite die neueste Version aus.
  3. Fügen Sie das Produkt StripePaymentSheet zum Ziel Ihrer App hinzu.

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.

Zahlungsdaten erfassen
Clientseitig

Das eingebettete Mobile Payment Element ist so konzipiert, dass es auf der Bezahlseite Ihrer nativen mobilen App platziert wird. Das Element zeigt eine Liste mit Zahlungsmethoden an, die Sie an das Erscheinungsbild Ihrer App anpassen können.

Wenn Kundinnen/Kunden auf die Zeile Karte tippen, wird ein Formular geöffnet, in dem sie ihre Zahlungsdetails eingeben können. Die Schaltfläche im Formular zeigt standardmäßig Fortfahren an und schließt das Formular, wenn darauf getippt wird, sodass Ihre Kundinnen/Kunden die Zahlung in Ihrem Bezahlvorgang abschließen können.

Payment Element

Sie können die Schaltfläche auch so konfigurieren, dass die Zahlung sofort abgeschlossen wird, anstatt fortzufahren. Führen Sie dazu diesen Schritt aus, nachdem Sie der Anleitung gefolgt sind.

Initialisieren des Zahlungs-Elements

Rufen Sie create auf, um EmbeddedPaymentElement mit einer EmbeddedPaymentElement.Configuration und einer PaymentSheet.IntentConfiguration zu instanziieren.

Das Configuration-Objekt enthält allgemeine Konfigurationsoptionen für EmbeddedPaymentElement, die sich zwischen Zahlungen nicht ändern, wie z. B. returnURL. Das IntentConfiguration-Objekt enthält Details zu der jeweiligen Zahlung wie den Betrag und die Währung sowie einen confirmHandler-Rückruf. Lassen Sie die Implementierung vorerst leer. Legen Sie nach erfolgreicher Initialisierung die Eigenschaften presentingViewController und delegate fest.

import StripePaymentSheet class MyCheckoutVC: UIViewController { func createEmbeddedPaymentElement() async throws -> EmbeddedPaymentElement { let intentConfig = PaymentSheet.IntentConfiguration( mode: .payment(amount: 1099, currency: "USD") ) { [weak self] _, _, intentCreationCallback in self?.handleConfirm(intentCreationCallback) } var configuration = EmbeddedPaymentElement.Configuration() configuration.returnURL = "your-app://stripe-redirect" // Use the return url you set up in the previous step let embeddedPaymentElement = try await EmbeddedPaymentElement.create(intentConfiguration: intentConfig, configuration: configuration) embeddedPaymentElement.presentingViewController = self embeddedPaymentElement.delegate = self return embeddedPaymentElement } func handleConfirm(_ intentCreationCallback: @escaping (Result<String, Error>) -> Void) { // ...explained later } }

Hinzufügen der Ansicht Zahlungs-Elemente

Nachdem EmbeddedPaymentElement erfolgreich initialisiert wurde, stellen Sie seine Ansicht in die Nutzeroberfläche Ihres Bezahlvorgangs ein.

Notiz

Die Ansicht muss in einer UIScrollView oder einer anderen scrollbaren Ansicht enthalten sein. Dies liegt daran, dass sie keine feste Größe hat und sich ihre Höhe nach dem ersten Rendern ändern kann.

class MyCheckoutVC: UIViewController { // ... private(set) var embeddedPaymentElement: EmbeddedPaymentElement? private lazy var checkoutButton: UIButton = { let checkoutButton = UIButton(type: .system) checkoutButton.backgroundColor = .systemBlue checkoutButton.layer.cornerRadius = 5.0 checkoutButton.clipsToBounds = true checkoutButton.setTitle("Checkout", for: .normal) checkoutButton.setTitleColor(.white, for: .normal) checkoutButton.translatesAutoresizingMaskIntoConstraints = false checkoutButton.isEnabled = embeddedPaymentElement?.paymentOption != nil checkoutButton.addTarget(self, action: #selector(didTapConfirmButton), for: .touchUpInside) return checkoutButton }() // ... @objc func didTapConfirmButton() { // ...explained later } override func viewDidLoad() { super.viewDidLoad() Task { @MainActor in do { // Create a UIScrollView let scrollView = UIScrollView() scrollView.translatesAutoresizingMaskIntoConstraints = false self.view.addSubview(scrollView) // Create the Payment Element let embeddedPaymentElement = try await createEmbeddedPaymentElement() embeddedPaymentElement.delegate = self embeddedPaymentElement.presentingViewController = self self.embeddedPaymentElement = embeddedPaymentElement // Add its view to the scroll view scrollView.addSubview(embeddedPaymentElement.view) // Add your own checkout button to the scroll view scrollView.addSubview(checkoutButton) // Set up layout constraints embeddedPaymentElement.view.translatesAutoresizingMaskIntoConstraints = false NSLayoutConstraint.activate([ scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor), scrollView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor), scrollView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor), scrollView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor), embeddedPaymentElement.view.topAnchor.constraint(equalTo: scrollView.topAnchor), embeddedPaymentElement.view.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor), embeddedPaymentElement.view.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor), checkoutButton.topAnchor.constraint(equalTo: embeddedPaymentElement.view.bottomAnchor, constant: 4.0), checkoutButton.leadingAnchor.constraint(equalTo: scrollView.safeAreaLayoutGuide.leadingAnchor, constant: 4.0), checkoutButton.trailingAnchor.constraint(equalTo: scrollView.safeAreaLayoutGuide.trailingAnchor, constant: -4.0), ]) } catch { // handle view not being added to view } } } }

An dieser Stelle können Sie Ihre App ausführen und das eingebettete Mobile Payment Element sehen.

Umgang mit Änderungen bei der Höhe

Die Ansicht des EmbeddedPaymentElement kann vergrößert oder verkleinert werden, was sich auf das Layout der Ansicht auswirken kann.

Verarbeiten Sie Höhenänderungen, indem Sie die Delegatmethode embeddedPaymentElementDidUpdateHeight implementieren. Die Ansicht von EmbeddedPaymentElement ruft diese Methode in einem Animationsblock auf, der seine Höhe aktualisiert. Es wird erwartet, dass Ihre Implementierung setNeedsLayout() und layoutIfNeeded() in der Bildlaufansicht aufruft, die die Ansicht des EmbeddedPaymentElement enthält, um eine reibungslose Animation der Höhenänderung zu ermöglichen.

extension MyCheckoutVC: EmbeddedPaymentElementDelegate { func embeddedPaymentElementDidUpdateHeight(embeddedPaymentElement: StripePaymentSheet.EmbeddedPaymentElement) { // Handle layout appropriately self.view.setNeedsLayout() self.view.layoutIfNeeded() } }

Wir empfehlen Ihnen, zu testen, ob Ihre Ansicht richtig auf Änderungen der Höhe reagiert. Rufen Sie dazu testHeightChange() für EmbeddedPaymentElement auf, um das Ein- und Ausblenden eines Mandats innerhalb des Elements zu simulieren. Stellen Sie sicher, dass sich Ihre Bildlaufansicht nach dem Aufruf von testHeightChange() problemlos anpasst.

class MyCheckoutVC: UIViewController { override func viewDidLoad() { // This is only for testing purposes: #if DEBUG Timer.scheduledTimer(withTimeInterval: 5.0, repeats: true) { [weak self] _ in Task { @MainActor in self?.embeddedPaymentElement?.testHeightChange() } } #endif } }

Optional Ausgewählte Zahlungsoption anzeigen

Wenn Sie auf Details zur vom Kunden ausgewählten Zahlungsoption zugreifen müssen, wie ein Label (z. B. „····4242“), ein Bild (z. B. ein VISA-Logo) oder Abrechnungsdetails, die in Ihrer Nutzeroberfläche angezeigt werden sollen, verwenden Sie die Eigenschaft paymentOption von EmbeddedPaymentElement.

Um benachrichtigt zu werden, wenn sich die paymentOption ändert, implementieren Sie die Delegatmethode embeddedPaymentElementDidUpdatePaymentOption.

extension MyCheckoutVC: EmbeddedPaymentElementDelegate { func embeddedPaymentElementDidUpdatePaymentOption(embeddedPaymentElement: EmbeddedPaymentElement) { print("The payment option changed: \(embeddedPaymentElement.paymentOption)") checkoutButton.isEnabled = embeddedPaymentElement.paymentOption != nil } }

Optional Zahlungsangaben aktualisieren

Wenn der Kunde/die Kundin Aktionen durchführt, die die Zahlungsdetails ändern (z. B. das Anwenden eines Rabattcodes), aktualisieren Sie die EmbeddedPaymentElement-Instanz, um die neuen Werte widerzugeben, indem Sie die update-Methode aufrufen. Bei einigen Zahlungsmethoden, wie Apple Pay und Google Pay, wird der Betrag in der Nutzeroberfläche angezeigt. Stellen Sie daher sicher, dass er immer korrekt und aktuell ist.

Wenn der Aktualisierungsaufruf abgeschlossen ist, aktualisieren Sie Ihre Nutzeroberfläche. Durch den Aktualisierungsaufruf kann sich die aktuell ausgewählte Zahlungsoption des Kunden/der Kundin ändern.

extension MyCheckoutVC { func update() { Task { @MainActor in var updatedIntentConfig = oldIntentConfig // Update the amount to reflect the price after applying the discount code updatedIntentConfig.mode = PaymentSheet.IntentConfiguration.Mode.payment(amount: 999, currency: "USD") let result = await embeddedPaymentElement?.update(intentConfiguration: updatedIntentConfig) switch result { case .canceled, nil: // Do nothing; this happens when a subsequent `update` call cancels this one break case .failed(let error): // Display error to user in an alert, let users retry case .succeeded: // Update your UI in case the payment option changed } } } }

Zahlung bestätigen

Wenn der/die Kund/in auf die Checkout-Schaltfläche tippt, rufen Sie embeddedPaymentElement.confirm() auf, um die Zahlung abzuschließen. Achten Sie darauf, die Nutzerinteraktion während der Bestätigung zu deaktivieren.

extension MyCheckoutVC { @objc func didTapConfirmButton() { Task { @MainActor in guard let embeddedPaymentElement else { return } self.view.isUserInteractionEnabled = false // Disable user interaction, show a spinner, and so on before calling confirm let result = await embeddedPaymentElement.confirm() switch result { case .completed: // Payment completed - show a confirmation screen. case .failed(let error): self.view.isUserInteractionEnabled = true // Encountered an unrecoverable error. You can display the error to the user, log it, etc. case .canceled: self.view.isUserInteractionEnabled = true // Customer canceled - you should probably do nothing. break } } } }

Implementieren Sie als Nächstes den Rückruf confirmHandler, den Sie zuvor an PaymentSheet.IntentConfiguration übergeben haben, um eine Anfrage an Ihren Server zu senden. Ihr Server erstellt einen PaymentIntent und gibt sein Client-Geheimnis zurück, wie unter PaymentIntent erstellen erläutert.

Wenn die Anfrage zurückkommt, rufen Sie intentCreationCallback mit dem Client-Geheimnis Ihrer Serverantwort auf oder geben Sie einen Fehler zurück. Das EmbeddedPaymentElement bestätigt den PaymentIntent mithilfe des Client-Geheimnisses oder zeigt die lokalisierte Fehlermeldung in seiner Nutzeroberfläche an (entweder errorDescription oder localizedDescription). Nach der Bestätigung kann EmbeddedPaymentElement nicht mehr verwendet werden. Leiten Sie die Nutzer/innen stattdessen zu einem Belegbildschirm oder ähnlichem weiter.

extension MyCheckoutVC { func handleConfirm(_ intentCreationCallback: @escaping (Result<String, Error>)-> Void) { // Make a request to your own server and receive a client secret or an error. let myServerResponse: Result<String, Error> = ... switch myServerResponse { case .success(let clientSecret): // Call the `intentCreationCallback` with the client secret intentCreationCallback(.success(clientSecret)) case .failure(let error): // Call the `intentCreationCallback` with the error intentCreationCallback(.failure(error)) } } }

OptionalAusgewählte Zahlungsoption löschen

Wenn Sie Zahlungsoptionen außerhalb von EmbeddedPaymentElement haben, müssen Sie möglicherweise die ausgewählte Zahlungsoption löschen. Verwenden Sie dazu die clearPaymentOption API, um die ausgewählte Zahlungsoption zu deaktivieren.

extension MyCheckoutVC: UIViewController { func deselectPaymentMethod() { embeddedPaymentElement?.clearPaymentOption() } }

OptionalMandat selbst anzeigen

Standardmäßig zeigt das eingebettete Mobile Payment Element Mandate und rechtliche Haftungsausschlüsse an, um die Einhaltung gesetzlicher Vorschriften zu gewährleisten. Dieser Text muss sich in der Nähe Ihrer Schaltfläche „Kaufen“ befinden. Deaktivieren Sie ggf. die Anzeige in der Ansicht und zeigen Sie sie stattdessen selbst an.

Achtung

Ihre Integration muss den Mandatstext anzeigen, um die Konformität zu gewährleisten. Stellen Sie sicher, dass URLs im Text mithilfe von UITextView oder Ähnlichem geöffnet werden können.

var configuration = EmbeddedPaymentElement.Configuration(...) configuration.embeddedViewDisplaysMandateText = true ... let mandateTextView = UITextView() mandateTextView.attributedText = embeddedPaymentElement.paymentOption.mandateText

OptionalLassen Sie den Kunden/die Kundin sofort im Formular bezahlen

Eingebettetes Zahlungs-Element

Um die Schaltfläche im Formular zur sofortigen Bestätigung der Zahlung zu konfigurieren, legen Sie formSheetAction für Ihr EmbeddedPaymentElement.Configuration-Objekt fest.

Der Completion-Block wird mit dem Ergebnis der Zahlung ausgeführt, nachdem das Formular geschlossen wurde. Die eingebettete Nutzeroberfläche kann nach Abschluss der Zahlung nicht verwendet werden. Wir empfehlen daher, dass Ihre Implementierung die Nutzer/innen zu einem anderen Bildschirm weiterleitet, z. B. einem Zahlungsbeleg-Bildschirm.

var configuration = EmbeddedPaymentElement.Configuration() configuration.formSheetAction = .confirm(completion: { result in switch result { case .completed: // Payment completed. You can e.g. show a confirmation screen. print("Completed") case .failed(let error): // Encountered an unrecoverable error. You can display the error to the user, log it, etc. print(error) case .canceled: // Customer canceled - you should probably do nothing. break } })

PaymentIntent erstellen
Serverseitig

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_future_usage, amount und currency) übereinstimmen.

main.rb
Ruby
Python
PHP
Node.js
Java
Go
.NET
No results
require 'stripe' Stripe.api_key =
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'
post '/create-intent' do data = JSON.parse request.body.read params = { amount: 1099, currency: 'usd', # In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default. automatic_payment_methods: {enabled: true}, } begin intent = Stripe::PaymentIntent.create(params) {client_secret: intent.client_secret}.to_json rescue Stripe::StripeError => e {error: e.error.message}.to_json end end

Rückgabe-URL einrichten
Clientseitig

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.

SceneDelegate.swift
Swift
No results
// This method handles opening custom URL schemes (for example, "your-app://stripe-redirect") func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) { guard let url = URLContexts.first?.url else { return } let stripeHandled = StripeAPI.handleURLCallback(with: url) if (!stripeHandled) { // This was not a Stripe url – handle the URL normally as you would } }

Legen Sie außerdem die returnURL für Ihr EmbeddedPaymentElement.Configuration-Objekt auf die URL für Ihre App fest.

var configuration = EmbeddedPaymentElement.Configuration() configuration.returnURL = "your-app://stripe-redirect"

Ereignisse nach Zahlung verarbeiten
Serverseitig

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.

OptionalKarten speichern
Serverseitig
Clientseitig

%}EmbeddedPaymentElement 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, }); });

Konfigurieren Sie als Nächstes EmbeddedPaymentElement mit der Kunden-ID und dem Client-Geheimnis des temporären Schlüssels.

var configuration = EmbeddedPaymentElement.Configuration() configuration.customer = .init(id: customerId, ephemeralKeySecret: customerEphemeralKeySecret) self.embeddedPaymentElement = try await EmbeddedPaymentElement.create(..., configuration: configuration)

OptionalZahlungsmethoden mit Verzögerung zulassen
Clientseitig

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 EmbeddedPaymentElement keine Zahlungsmethoden mit Verzögerung an. Um die Funktion zu aktivieren, setzen Sie allowsDelayedPaymentMethods in Ihrer EmbeddedPaymentElement.Configuration 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 derzeit nicht von EmbeddedPaymentElement 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 = EmbeddedPaymentElement.Configuration() configuration.allowsDelayedPaymentMethods = true self.embeddedPaymentElement = try await EmbeddedPaymentElement.create(..., configuration: configuration)

Wenn die Kundin/der Kunde erfolgreich eine dieser Zahlungsmethoden mit Verzögerung in EmbeddedPaymentElement verwendet, lautet das zurückgegebene Zahlungsergebnis .completed.

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 EmbeddedPaymentElement verwenden, um andere Arten von Zahlungsmethoden zu handhaben.

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.com.{{YOUR_APP_NAME}}.

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

Um Apple Pay zu EmbeddedPaymentElement hinzuzufügen, legen Sie applePay fest, nachdem Sie EmbeddedPaymentElement.Configuration mit Ihrer Apple-Händler-ID und dem Ländercode Ihres Unternehmens initialisiert haben.

var configuration = EmbeddedPaymentElement.Configuration() configuration.applePay = .init( merchantId: "merchant.com.your_app_name", merchantCountryCode: "US" )

Sendungsverfolgung

Um Informationen zur Bestellverfolgung in iOS 16 oder höher hinzuzufügen, konfigurieren Sie einen authorizationResultHandler in Ihren PaymentSheet.ApplePayConfiguration.Handlers. 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 Sendungsverfolgung finden Sie in der Apple-Dokumentation zu Wallet-Bestellungen.

let customHandlers = EmbeddedPaymentElement.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 = EmbeddedPaymentElement.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.

OptionalElement anpassen

Alle Anpassungen werden mithilfe des EmbeddedPaymentElement.Configuration-Objekts konfiguriert.

Erscheinungsbild

Passen Sie mit der Appearance API Farben, Schriftarten und mehr an das Erscheinungsbild Ihrer App an.

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 = EmbeddedPaymentElement.Configuration() configuration.merchantDisplayName = "My app, Inc."

Dunkelmodus

EmbeddedPaymentElement passt sich automatisch an die systemweiten Erscheinungsbildeinstellungen des Nutzers/der Nutzerin an (heller und dunkler Modus). Wenn Ihre App den dunklen Modus nicht unterstützt, können Sie den Stil auf den Modus alwaysLight oder alwaysDark festlegen.

var configuration = EmbeddedPaymentElement.Configuration() configuration.style = .alwaysLight

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

Intent-Konfiguration aktualisieren

PaymentSheet.IntentConfiguration akzeptiert einen optionalen Parameter, mit dem gesteuert wird, wann die Prüfziffer/CVC für eine gespeicherte Karte erneut erfasst werden soll.

import StripePaymentSheet class MyCheckoutVC: UIViewController { private func createEmbeddedPaymentElement() async throws { let intentConfig = PaymentSheet.IntentConfiguration( mode: .payment(amount: 1099, currency: "USD"), confirmHandler: { [weak self] _, _, intentCreationCallback in self?.handleConfirm(intentCreationCallback) }, requireCVCRecollection: true) var configuration = EmbeddedPaymentElement.Configuration() configuration.returnURL = "your-app://stripe-redirect" // Use the return url you set up in the previous step let embeddedPaymentElement = try await EmbeddedPaymentElement.create(intentConfiguration: intentConfig, configuration: configuration) // ... Same as before } }

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_cvc_recollection ein.

main.rb
Ruby
Python
PHP
Node.js
Java
Go
.NET
No results
require 'stripe' Stripe.api_key =
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'
post '/create-intent' do data = JSON.parse request.body.read params = { amount: 1099, currency: 'usd', # In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default. automatic_payment_methods: {enabled: true}, customer: customer.id, payment_method_options: { card: {require_cvc_recollection: true} } } begin intent = Stripe::PaymentIntent.create(params) {client_secret: intent.client_secret}.to_json rescue Stripe::StripeError => e {error: e.error.message}.to_json end end
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