# Zahlungsdaten bei einer In-App-Zahlung speichern Speichern Sie Zahlungsdaten während einer Zahlung in Ihrer mobilen App. # iOS > This is a iOS for when platform is ios and mobile-ui is payment-element. View the full page at https://docs.stripe.com/payments/mobile/save-during-payment?platform=ios&mobile-ui=payment-element. Verwenden Sie die [Payment Intents API](https://docs.stripe.com/api/payment_intents.md), um Zahlungsdetails aus einem Einkauf zu speichern. Es gibt mehrere Anwendungsszenarien: - Belasten Sie das Konto eines Kunden/einer Kundin für eine E-Commerce-Bestellung und speichern Sie die Details für zukünftige Einkäufe. - Leiten Sie die erste Zahlung einer Reihe wiederkehrender Zahlungen ein. - Buchen Sie eine Anzahlung ab und speichern Sie die Details, um den vollen Betrag später abzubuchen. > #### Transaktionen mit vorhandener Karte > > Card-Present-Transaktionen, wie zum Beispiel Zahlungen über Stripe Terminal, verwenden ein anderes Verfahren zum Speichern der Zahlungsmethode. Weitere Informationen finden Sie in der [Terminal-Dokumentation](https://docs.stripe.com/terminal/features/saving-payment-details/save-after-payment.md). ## Konformität Sie sind dafür verantwortlich, alle geltenden Gesetze, Vorschriften und Netzwerkregeln einzuhalten, wenn Sie die Zahlungsdaten eines Kunden oder ein Kundin für die zukünftige Verwendung speichern, beispielsweise um dem Kunden oder der Kundin seine bzw. ihre Zahlungsmethode beim Bezahlvorgang für einen zukünftigen Kauf anzuzeigen oder um ihm Kosten in Rechnung zu stellen, wenn er Ihre Website oder App nicht aktiv nutzt. Bevor Sie die Zahlungsmethode eines Kunden oder einer Kundin speichern oder ihm Kosten in Rechnung stellen, stellen Sie bitte sicher, dass Sie: - Fügen Sie Ihrer Website oder App Bestimmungen hinzu, die darlegen, wie Sie Zahlungsmethoden speichern möchten, beispielsweise: - Die kundenseitige Zustimmung, eine Zahlung oder mehrere Zahlungen für bestimmte Transaktionen in deren Namen einzuleiten - Der erwartete Zeitpunkt und die voraussichtliche Häufigkeit von Zahlungen (z. B. Zahlungen für geplante Raten- oder Abonnementzahlungen oder für außerplanmäßige Aufstockungen). - Wie Sie den Zahlbetrag ermitteln. - Ihre Stornorichtlinie, wenn die Zahlungsmethode für einen Abonnementdienst ist. - Verwenden Sie eine gespeicherte Zahlungsmethode ausschließlich für den in Ihren Bedingungen angegebenen Zweck. - Bitte holen Sie die ausdrückliche Zustimmung des Kunden oder der Kundin für diese spezifische Verwendung ein. Fügen Sie beispielsweise ein Kontrollkästchen „Meine Zahlungsmethode für zukünftige Transaktionen speichern“ hinzu. - Bewahren Sie die schriftliche Zustimmung Ihrer Kundinnen und Kunden zu Ihren Bedingungen auf. ## Stripe einrichten [Serverseitig] [Clientseitig] Zunächst benötigen Sie ein Stripe-Konto. [Registrieren Sie sich jetzt](https://dashboard.stripe.com/register). ### 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: #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ### Clientseitig Das [Stripe iOS SDK](https://github.com/stripe/stripe-ios) ist Open Source, [vollständig dokumentiert](https://stripe.dev/stripe-ios/index.html) und kompatibel mit Apps, die iOS 13 oder höher unterstützen. #### Swift Package Manager 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. 1. Wählen auf unserer [Veröffentlichungsseite](https://github.com/stripe/stripe-ios/releases) die neueste Version aus. 1. Fügen Sie das Produkt **StripePaymentSheet** zum [Ziel Ihrer App](https://developer.apple.com/documentation/swift_packages/adding_package_dependencies_to_your_app) hinzu. #### CocoaPods 1. Falls noch nicht geschehen, installieren Sie bitte die aktuellste Version von [CocoaPods](https://guides.cocoapods.org/using/getting-started.html). 1. Wenn Sie keine bestehende [Podfile](https://guides.cocoapods.org/syntax/podfile.html) haben, führen Sie folgenden Befehl aus, um eine zu erstellen: ```bash pod init ``` 1. Fügen Sie folgende Zeile in Ihre `Podfile` ein: ```podfile pod 'StripePaymentSheet' ``` 1. Führen Sie folgenden Befehl aus: ```bash pod install ``` 1. Vergessen Sie nicht, ab jetzt in Zukunft anstelle der Datei `.xcodeproj` die Datei `.xcworkspace` zum Öffnen Ihres Projekts in Xcode zu verwenden. 1. Führen Sie für zukünftige Updates auf die jeweils aktuelle Version des SDK Folgendes aus: ```bash pod update StripePaymentSheet ``` #### Carthage 1. Falls noch nicht geschehen, installieren Sie bitte die aktuelle Version von [Carthage](https://github.com/Carthage/Carthage#installing-carthage). 1. Fügen Sie folgende Zeile in Ihre `Cartfile` ein: ```cartfile github "stripe/stripe-ios" ``` 1. Befolgen Sie die [Carthage-Installationsanweisungen](https://github.com/Carthage/Carthage#if-youre-building-for-ios-tvos-or-watchos). Vergewissern Sie sich, dass Sie alle [hier](https://github.com/stripe/stripe-ios/tree/master/StripePaymentSheet/README.md#manual-linking) aufgeführten erforderlichen Frameworks einbetten. 1. Führen Sie für zukünftige Updates auf die aktuelle Version unseres SDK einfach folgenden Befehl aus: ```bash carthage update stripe-ios --platform ios ``` #### Manuelles Framework 1. Gehen Sie auf unsere [GitHub-Release-Seite](https://github.com/stripe/stripe-ios/releases/latest), laden Sie **Stripe.xcframework.zip** herunter und entpacken Sie die Datei. 1. Ziehen Sie **StripePaymentSheet.xcframework** in den Abschnitt **Embedded Binaries** (Eingebettete Binärdateien) der Einstellungen unter **General** (Allgemeines) Ihres Xcode-Projekts. Aktivieren Sie dabei die Option **Copy items if needed** (Elemente kopieren, falls nötig). 1. Wiederholen Sie Schritt 2 für alle [hier](https://github.com/stripe/stripe-ios/tree/master/StripePaymentSheet/README.md#manual-linking) aufgeführten erforderlichen Frameworks. 1. Wiederholen Sie für zukünftige Updates auf die jeweils aktuelle Version des SDK die Schritte 1–3. > Details zur aktuellen SDK-Version und zu vorherigen Versionen finden Sie auf der Seite [Releases](https://github.com/stripe/stripe-ios/releases) auf GitHub. Um bei Veröffentlichung einer neuen Version eine Benachrichtigung zu erhalten, [achten Sie auf die Releases zum jeweiligen Repository](https://help.github.com/en/articles/watching-and-unwatching-releases-for-a-repository#watching-releases-for-a-repository). ## Zahlungsmethoden aktivieren Kartenzahlungen sind standardmäßig aktiviert. Zeigen Sie Ihre [Einstellungen für Zahlungsmethoden](https://dashboard.stripe.com/settings/payment_methods) an, um weitere Zahlungsmethoden zu aktivieren, die Sie unterstützen möchten. ## 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](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment). Diese Integration verwendet drei Stripe-API-Objekte: 1. [PaymentIntent](https://docs.stripe.com/api/payment_intents.md): Stripe verwendet diesen, um Ihre Absicht darzustellen, Zahlungen von Ihren Kundinnen/Kunden anzufordern, wobei Abbuchungsversuche und Zahlungsstatusänderungen im gesamten Vorgang dokumentiert werden. 1. (Optional) Ein von [Kundinnen/Kunden konfiguriertes Konto](https://docs.stripe.com/api/v2/core/accounts/object.md#v2_account_object-applied_configurations) oder ein [Customer](https://docs.stripe.com/api/customers.md)-Objekt: Um eine Zahlungsmethode für zukünftige Zahlungen einzurichten, müssen Sie diese einem Kunden/einer Kundin zuordnen. Erstellen Sie ein Objekt, das Ihre Kundin/Ihren Kunden repräsentiert, wenn sie/er ein Konto bei Ihrem Unternehmen anlegt. Wenn Ihre Kundin/Ihr Kunde eine Zahlung als Gast durchführt, können Sie vor der Zahlung ein `Account`- oder `Customer`-Objekt erstellen und es zu einem späteren Zeitpunkt mit Ihrer eigenen Darstellung des Kundenkontos verknüpfen. 1. (Optional) [CustomerSession](https://docs.stripe.com/api/customer_sessions.md): Informationen zum Objekt, das Ihre Kundin/Ihren Kunden repräsentiert, sind vertraulich und können nicht direkt über eine App abgerufen werden. Eine `CustomerSession` gewährt dem SDK vorübergehenden, bereichsbezogenen Zugriff auf das `Account` oder die/den `Customer` und stellt zusätzliche Konfigurationsoptionen bereit. Hier finden Sie eine vollständige Liste der [Konfigurationsoptionen](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components). Aus Sicherheitsgründen kann Ihre App diese Objekte nicht erstellen. Fügen Sie stattdessen einen Endpoint auf Ihrem Server hinzu, der: 1. Ruft das `Account` oder die/den `Customer` ab oder erstellt ein neues bzw eine/einen neue/n. 1. Erstellt eine [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) für das `Account` oder die/den `Customer`. 1. Erstellt einen `PaymentIntent` mit dem [Betrag](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount), der [Währung](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency), [setup_future_usage](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-setup_future_usage), und entweder mit dem [customer_account](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer_account) oder der [Kundin/dem Kunden](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer). 1. Gibt das *Client-Geheimnis* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) des `PaymentIntent`, das `client_secret` der `CustomerSession`, die ID des `Account`s oder der/des `Customer` und Ihren [veröffentlichbaren Schlüssel](https://dashboard.stripe.com/apikeys) für Ihre App zurück. > Das mobile Payment Element unterstützt nur `setup_future_usage` mit Karten und US-Bankkonten. 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. #### Zahlungsmethoden über das Dashboard verwalten Zahlungsmethoden können Sie über das [Dashboard](https://dashboard.stripe.com/settings/payment_methods) 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. #### Accounts v2 #### Curl ```bash # Create an Account with the customer configuration (use an existing Account ID if this is a returning customer) curl https://api.stripe.com/v2/core/accounts \ -u <>: \ -X "POST" \ -d "configuration[customer]" # Create a CustomerSession for the Account curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "setup_future_usage"="off_session" \ -d "automatic_payment_methods[enabled]"=true \ ``` #### Customers v1 #### Curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "setup_future_usage"="off_session" \ -d "automatic_payment_methods[enabled]"=true \ ``` #### Zahlungsmethoden manuell auflisten #### Accounts v2 #### Curl ```bash # Create an Account with the customer configuration (use an existing Account ID if this is a returning customer) curl https://api.stripe.com/v2/core/accounts \ -u <>: \ -X "POST" \ -d "configuration[customer]" # Create a CustomerSession for the Account curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "setup_future_usage"="off_session" \ -d "payment_method_types[]"="card" \ ``` #### Customers v1 #### Curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "setup_future_usage"="off_session" \ -d "payment_method_types[]"="card" \ ``` > Jede Zahlungsmethode muss die im PaymentIntent übergebene Währung unterstützen, und Ihr Unternehmen muss in einem der Länder ansässig sein, die jede Zahlungsmethode unterstützt. Auf der Seite [Optionen für die Integration von Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/integration-options.md) finden Sie weitere Informationen zu den unterstützten Zahlungsmethoden. ## Zahlungsdetails erfassen [Clientseitig] Um das mobile Payment Element auf Ihrem Checkout-Bildschirm anzuzeigen, stellen Sie bitte Folgendes sicher: - Zeigen Sie vom Kunden/von der Kundin gekaufte Produkte und den Gesamtbetrag an - Verwenden Sie das [Address Element](https://docs.stripe.com/elements/address-element.md?platform=ios), um alle benötigten Versanddaten des Kunden/der Kundin zu erfassen - Fügen Sie eine Checkout-Schaltfläche ein, um die Nutzeroberfläche von Stripe anzuzeigen #### UIKit Rufen Sie auf dem Checkout-Bildschirm Ihrer App das PaymentIntent-Client-Geheimnis, das CustomerSession-Client-Geheimnis, die Kunden-ID und den veröffentlichbaren Schlüssel von dem Endpoint ab, den Sie im vorherigen Schritt erstellt haben. Legen Sie Ihren veröffentlichbaren Schlüssel mit `STPAPIClient.shared` fest und initialisieren Sie das [PaymentSheet](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html). #### iOS (Swift) ```swift import UIKit@_spi(CustomerSessionBetaAccess) import StripePaymentSheet class CheckoutViewController: UIViewController { @IBOutlet weak var checkoutButton: UIButton! var paymentSheet: PaymentSheet? let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint override func viewDidLoad() { super.viewDidLoad() checkoutButton.addTarget(self, action: #selector(didTapCheckoutButton), for: .touchUpInside) checkoutButton.isEnabled = false // MARK: Fetch the PaymentIntent client secret, CustomerSession client secret, Customer ID, and publishable key var request = URLRequest(url: backendCheckoutUrl) request.httpMethod = "POST" let task = URLSession.shared.dataTask(with: request, completionHandler: { [weak self] (data, response, error) in guard let data = data, let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any], let customerId = json["customer"] as? String, let customerSessionClientSecret = json["customerSessionClientSecret"] as? String, let paymentIntentClientSecret = json["paymentIntent"] as? String, let publishableKey = json["publishableKey"] as? String, let self = self else { // Handle error return } STPAPIClient.shared.publishableKey = publishableKey// MARK: Create a PaymentSheet instance var configuration = PaymentSheet.Configuration() configuration.merchantDisplayName = "Example, Inc." configuration.customer = .init(id: customerId, customerSessionClientSecret: customerSessionClientSecret) // Set `allowsDelayedPaymentMethods` to true if your business handles // delayed notification payment methods like US bank accounts. configuration.allowsDelayedPaymentMethods = true self.paymentSheet = PaymentSheet(paymentIntentClientSecret:paymentIntentClientSecret, configuration: configuration) DispatchQueue.main.async { self.checkoutButton.isEnabled = true } }) task.resume() } } ``` Wenn Kund/innen auf die Schaltfläche **Checkout** tippen, rufen Sie bitte `present` auf, um das Zahlungsformular anzuzeigen. Nachdem die Zahlung abgeschlossen wurde, verwirft Stripe das Formular und der Abschlussblock wird mit einem [PaymentSheetResult](https://stripe.dev/stripe-ios/stripe-paymentsheet/Enums/PaymentSheetResult.html) aufgerufen. #### iOS (Swift) ```swift @objc func didTapCheckoutButton() { // MARK: Start the checkout process paymentSheet?.present(from: self) { paymentResult in // MARK: Handle the payment result switch paymentResult { case .completed: print("Your order is confirmed") case .canceled: print("Canceled!") case .failed(let error): print("Payment failed: \(error)") } } } ``` #### SwiftUI Erstellen Sie ein `ObservableObject`-Modell für Ihren Bezahlbildschirm. Dieses Modell veröffentlicht ein [PaymentSheet](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html) und ein [PaymentSheetResult](https://stripe.dev/stripe-ios/stripe-paymentsheet/Enums/PaymentSheetResult.html). ```swift import StripePaymentSheet import SwiftUI class CheckoutViewModel: ObservableObject { let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint @Published var paymentSheet: PaymentSheet? @Published var paymentResult: PaymentSheetResult? } ``` Rufen Sie das PaymentIntent-Client-Geheimnis, das CustomerSession-Client-Geheimnis, die Kunden-ID und den veröffentlichbaren Schlüssel von dem Endpoint ab, den Sie im vorherigen Schritt erstellt haben. Legen Sie Ihren veröffentlichbaren Schlüssel mit `STPAPIClient.shared` fest und initialisieren Sie das [PaymentSheet](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html). ```swift @_spi(CustomerSessionBetaAccess) import StripePaymentSheet import SwiftUI class CheckoutViewModel: ObservableObject { let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint @Published var paymentSheet: PaymentSheet? @Published var paymentResult: PaymentSheetResult? func preparePaymentSheet() { // MARK: Fetch thePaymentIntent and Customer information from the backend var request = URLRequest(url: backendCheckoutUrl) request.httpMethod = "POST" let task = URLSession.shared.dataTask(with: request, completionHandler: { [weak self] (data, response, error) in guard let data = data, let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any], let customerId = json["customer"] as? String, let customerSessionClientSecret = json["customerSessionClientSecret"] as? String, letpaymentIntentClientSecret = json["paymentIntent"] as? String, let publishableKey = json["publishableKey"] as? String, let self = self else { // Handle error return } STPAPIClient.shared.publishableKey = publishableKey// MARK: Create a PaymentSheet instance var configuration = PaymentSheet.Configuration() configuration.merchantDisplayName = "Example, Inc." configuration.customer = .init(id: customerId, customerSessionClientSecret: customerSessionClientSecret) // Set `allowsDelayedPaymentMethods` to true if your business handles // delayed notification payment methods like US bank accounts. configuration.allowsDelayedPaymentMethods = true DispatchQueue.main.async { self.paymentSheet = PaymentSheet(paymentIntentClientSecret:paymentIntentClientSecret, configuration: configuration) } }) task.resume() } } struct CheckoutView: View { @ObservedObject var model = CheckoutViewModel() var body: some View { VStack { if model.paymentSheet != nil { Text("Ready to pay.") } else { Text("Loading…") } }.onAppear { model.preparePaymentSheet() } } } ``` Fügen Sie Ihrer `View` ein [PaymentSheet.PaymentButton](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/PaymentButton.html) hinzu. Diese verhält sich ähnlich wie eine SwiftUI-`Button` und kann durch Hinzufügen einer `View` angepasst werden. Wenn Sie auf die Schaltfläche tippen, wird das PaymentSheet angezeigt. Beim Abschließen der Zahlung verwirft Stripe das PaymentSheet und der `onCompletion`-Handler mit einem [PaymentSheetResult](https://stripe.dev/stripe-ios/stripe-paymentsheet/Enums/PaymentSheetResult.html)-Objekt aufgerufen. ```swift @_spi(CustomerSessionBetaAccess) import StripePaymentSheet import SwiftUI class CheckoutViewModel: ObservableObject { let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint @Published var paymentSheet: PaymentSheet? @Published var paymentResult: PaymentSheetResult? func preparePaymentSheet() { // MARK: Fetch the PaymentIntent and Customer information from the backend var request = URLRequest(url: backendCheckoutUrl) request.httpMethod = "POST" let task = URLSession.shared.dataTask(with: request, completionHandler: { [weak self] (data, response, error) in guard let data = data, let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any], let customerId = json["customer"] as? String, let customerSessionClientSecret = json["customerSessionClientSecret"] as? String, let paymentIntentClientSecret = json["paymentIntent"] as? String, let publishableKey = json["publishableKey"] as? String, let self = self else { // Handle error return } STPAPIClient.shared.publishableKey = publishableKey // MARK: Create a PaymentSheet instance var configuration = PaymentSheet.Configuration() configuration.merchantDisplayName = "Example, Inc." configuration.customer = .init(id: customerId, customerSessionClientSecret: customerSessionClientSecret) // Set `allowsDelayedPaymentMethods` to true if your business can handle payment methods // that complete payment after a delay, like SEPA Debit and Sofort. configuration.allowsDelayedPaymentMethods = true DispatchQueue.main.async { self.paymentSheet = PaymentSheet(paymentIntentClientSecret: paymentIntentClientSecret, configuration: configuration) } }) task.resume() } func onPaymentCompletion(result: PaymentSheetResult) { self.paymentResult = result } } struct CheckoutView: View { @ObservedObject var model = CheckoutViewModel() var body: some View { VStack {if let paymentSheet = model.paymentSheet { PaymentSheet.PaymentButton( paymentSheet: paymentSheet, onCompletion: model.onPaymentCompletion ) { Text("Buy") } } else { Text("Loading…") }if let result = model.paymentResult { switch result { case .completed: Text("Payment complete") case .failed(let error): Text("Payment failed: \(error.localizedDescription)") case .canceled: Text("Payment canceled.") } } }.onAppear { model.preparePaymentSheet() } } } ``` Wenn das Ergebnis von `PaymentSheetResult` `.completed` lautet, informieren Sie den/die Nutzer/in, (zum Beispiel durch die Anzeige einer Bestellbestätigung). Wenn Sie `allowsDelayedPaymentMethods` auf true festlegen, werden Zahlungsmethoden mit [verzögerter Benachrichtigung](https://docs.stripe.com/payments/payment-methods.md#payment-notification) 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 [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](https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app) und richten Sie Ihren App-Delegate so ein, dass die URL an das SDK weitergeleitet wird. Stripe unterstützt keine [universellen Links](https://developer.apple.com/documentation/xcode/allowing-apps-and-websites-to-link-to-your-content). #### SceneDelegate #### Swift ```swift // This method handles opening custom URL schemes (for example, "your-app://stripe-redirect") func scene(_ scene: UIScene, openURLContexts URLContexts: Set) { 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 } } ``` #### AppDelegate #### Swift ```swift // This method handles opening custom URL schemes (for example, "your-app://stripe-redirect") func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool { let stripeHandled = StripeAPI.handleURLCallback(with: url) if (stripeHandled) { return true } else { // This was not a Stripe url – handle the URL normally as you would } return false } ``` #### SwiftUI #### Swift ```swift @main struct MyApp: App { var body: some Scene { WindowGroup { Text("Hello, world!").onOpenURL { incomingURL in let stripeHandled = StripeAPI.handleURLCallback(with: incomingURL) if (!stripeHandled) { // This was not a Stripe url – handle the URL normally as you would } } } } } ``` Legen Sie zusätzlich die [returnURL](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV9returnURLSSSgvp) in Ihrem [PaymentSheet.Configuration](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html)-Objekt auf die URL für Ihre App fest. ```swift var configuration = PaymentSheet.Configuration() configuration.returnURL = "your-app://stripe-redirect" ``` ## Ereignisse nach Zahlung verarbeiten [Serverseitig] Stripe sendet ein [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie [Webhook-Tool im Dashboard](https://dashboard.stripe.com/webhooks) oder folgen Sie der [Webhook-Anleitung](https://docs.stripe.com/webhooks/quickstart.md), 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](https://stripe.com/payments/payment-methods-guide) 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: | Ereignis | Beschreibung | Aktion | | ------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded) | Wird gesendet, wenn Kundinnen und Kunden eine Zahlung erfolgreich abgeschlossen haben. | Senden Sie den Kund/innen eine Auftragsbestätigung und *wickeln* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) Sie die Bestellung ab. | | [payment_intent.processing](https://docs.stripe.com/api/events/types.md?lang=php#event_types-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_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_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-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_failed` übergeht, bieten Sie der Kundin/dem Kunden einen weiteren Zahlungsversuch an. | ## Die gespeicherte Zahlungsmethode später belasten [Serverseitig] > #### Compliance > > Sie sind für die Einhaltung aller geltenden Gesetze, Vorschriften und Netzwerkregeln verantwortlich, wenn Sie die Zahlungsdaten von Kundinnen und Kunden speichern. Wenn Sie Ihren Endkundinnen und Endkunden zuvor genutzte Zahlungsmethoden für zukünftige Einkäufe anzeigen, dürfen Sie nur Zahlungsmethoden auflisten, für die Sie bereits eine kundenseitige Zustimmung eingeholt haben, dank der Sie die Details der Zahlungsmethode für diese spezifische zukünftige Verwendung speichern können. Verwenden Sie den Parameter [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay), um zwischen Zahlungsmethoden zu unterscheiden, die mit Kundinnen und Kunden verknüpft sind und Ihren Endkundinnen und Endkunden als gespeicherte Zahlungsmethode für zukünftige Einkäufe angezeigt werden können oder nicht. Um eine Zahlungsmethode zum Belasten zu finden, listen Sie die Zahlungsmethoden auf, die mit Ihrer Kundin/Ihrem Kunden verknüpft sind. In diesem Beispiel sind Karten aufgeführt, Sie können jedoch jeden unterstützten [Typ](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-type) auflisten. > #### Verwenden Sie die Accounts v2 API zum Darstellen von Kundinnen und Kunden > > The Accounts v2 API is generally available for Connect users, and in public preview for other Stripe users. If you’re part of the Accounts v2 preview, you need to specify a [specify a preview version](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) in your code. > > To request access to the Accounts v2 preview, > > Für die meisten Anwendungsfälle empfehlen wir, [Ihre Kundinnen und Kunden als vom Kunden bzw. von der Kundin konfigurierte Account-Objekte abzubilden](https://docs.stripe.com/connect/use-accounts-as-customers.md), anstatt das [Kundenobjekt](https://docs.stripe.com/api/customers.md) zu verwenden. #### Accounts v2 ```curl curl -G https://api.stripe.com/v1/payment_methods \ -u "<>:" \ -d "customer_account={{CUSTOMERACCOUNT_ID}}" \ -d type=card ``` #### Customers v1 ```curl curl -G https://api.stripe.com/v1/payment_methods \ -u "<>:" \ -d "customer={{CUSTOMER_ID}}" \ -d type=card ``` Wenn Sie bereit sind, die Zahlungsmethode Ihrer Kundin/Ihres Kunden *off-session* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information) zu belasten, verwenden Sie die Kunden-ID und die `PaymentMethod`-ID, um einen `PaymentIntent` mit dem Betrag und der Währung der Zahlung zu erstellen. Legen Sie einige weitere Parameter fest, um die Off-Session-Zahlung durchzuführen: - Legen Sie [off_session](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-off_session) auf `true` fest, um anzugeben, dass der Kunde/die Kundin sich während eines Zahlungsversuchs nicht in Ihrem Bezahlvorgang befindet und somit eine Authentifizierungsanfrage eines Partners, wie z. B. eines Kartenausstellers, einer Bank oder eines anderen Zahlungsinstituts, nicht erfüllen kann. Wenn ein Partner während Ihres Bezahlvorgangs eine Authentifizierung anfordert, fordert Stripe Ausnahmen unter Verwendung von Kundendetails aus einer vorherigen *On-Session*-Transaktion an. Wenn die Bedingungen für die Ausnahme nicht erfüllt sind, kann der `PaymentIntent` einen Fehler ergeben. - Legen Sie den Wert der Eigenschaft [confirm](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-confirm) des `PaymentIntent` auf „true“ fest, wodurch die Bestätigung sofort beim Erstellen des `PaymentIntent` erfolgt. - Legen Sie [payment_method](https://docs.stripe.com/api.md#create_payment_intent-payment_method) auf die ID der `PaymentMethod` fest. - Je nachdem, wie Sie Kundinnen/Kunden in Ihrer Integration darstellen, legen Sie entweder [customer_account](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer_account) auf die ID des kundenseitig konfigurierten `Kontos` oder [customer](https://docs.stripe.com/api.md#create_payment_intent-customer) auf die `Kunden`-ID fest. #### Accounts v2 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "automatic_payment_methods[enabled]=true" \ -d "customer_account={{CUSTOMERACCOUNT_ID}}" \ -d payment_method={{PAYMENT_METHOD_ID}} \ --data-urlencode "return_url=https://example.com/order/123/complete" \ -d off_session=true \ -d confirm=true ``` #### Customers v1 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "automatic_payment_methods[enabled]=true" \ -d "customer={{CUSTOMER_ID}}" \ -d payment_method={{PAYMENT_METHOD_ID}} \ --data-urlencode "return_url=https://example.com/order/123/complete" \ -d off_session=true \ -d confirm=true ``` ## Integration testen #### Karten | Zahlungsmethode | Szenario | So führen Sie den Test durch | | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Kreditkarte | Die Einrichtung der Karte ist erfolgreich und es ist keine *Authentifizierung* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase) erforderlich. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer `4242 4242 4242 4242` mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | Kreditkarte | Die Karte erfordert für die Ersteinrichtung, um nachfolgende Zahlungen erfolgreich abschließen zu können. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer `4000 0025 0000 3155` mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | Kreditkarte | Die Karte erfordert für die Ersteinrichtung sowie für nachfolgende Zahlungen eine Authentifizierung. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer `4000 0027 6000 3184` mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | Kreditkarte | Die Karte wurde während der Einrichtung abgelehnt. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer `4000 0000 0000 9995` mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | ## Optional: Apple Pay aktivieren > Wenn Ihr Zahlungsbildschirm eine spezielle **Apple Pay-Schaltfläche** enthält, folgen Sie dem [Apple Pay-Leitfaden](https://docs.stripe.com/apple-pay.md#present-payment-sheet) und verwenden Sie `ApplePayContext`, um Zahlungen über Ihre Apple Pay-Schaltfläche einzuziehen. Mit `PaymentSheet` können Sie andere Arten von Zahlungsmethoden abwickeln. ### 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](https://developer.apple.com/account/resources/identifiers/add/merchant). 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](https://dashboard.stripe.com/settings/ios_certificates) 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](https://dashboard.stripe.com/settings/ios_certificates) 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. ![](https://b.stripecdn.com/docs-statics-srv/assets/xcode.a701d4c1922d19985e9c614a6f105bf1.png) Apple Pay-Funktion in Xcode aktivieren ### Apple Pay hinzufügen #### Einmalige Zahlung Um Apple Pay zum PaymentSheet hinzuzufügen, setzen Sie [applePay](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV8applePayAC05ApplefD0VSgvp), nachdem Sie `PaymentSheet.Configuration` mit Ihrer Apple-Händler-ID und dem [Ländercode Ihres Unternehmens](https://dashboard.stripe.com/settings/account) initialisiert haben. #### iOS (Swift) ```swift var configuration = PaymentSheet.Configuration() configuration.applePay = .init( merchantId: "merchant.com.your_app_name", merchantCountryCode: "US" ) ``` #### Wiederkehrende Zahlungen Um Apple Pay zum PaymentSheet hinzuzufügen, setzen Sie [applePay](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV8applePayAC05ApplefD0VSgvp), nachdem Sie `PaymentSheet.Configuration` mit Ihrer Apple-Händler-ID und dem [Ländercode Ihres Unternehmens](https://dashboard.stripe.com/settings/account) initialisiert haben. Gemäß den [Apple-Richtlinien](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Supporting-subscriptions) für wiederkehrende Zahlungen müssen Sie auch zusätzliche Attribute für `PKPaymentRequest` festlegen. Fügen Sie in [ApplePayConfiguration.paymentRequestHandlers](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/applepayconfiguration/handlers/paymentrequesthandler) einen Handler hinzu, um die [PKPaymentRequest.paymentSummaryItems](https://developer.apple.com/documentation/passkit/pkpaymentrequest/1619231-paymentsummaryitems) mit dem Betrag zu konfigurieren, den Sie berechnen möchten (z. B. 9,95 USD pro Monat). Sie können auch [Händler-Token](https://developer.apple.com/apple-pay/merchant-tokens/) übernehmen, indem Sie die Eigenschaften `recurringPaymentRequest` oder `automaticReloadPaymentRequest` für `PKPaymentRequest` festlegen. Weitere Informationen zur Verwendung wiederkehrender Zahlungen mit Apple Pay finden Sie in der [PassKit-Dokumentation von Apple](https://developer.apple.com/documentation/passkit/pkpaymentrequest). #### iOS (Swift) ```swift let customHandlers = PaymentSheet.ApplePayConfiguration.Handlers( paymentRequestHandler: { request in // PKRecurringPaymentSummaryItem is available on iOS 15 or later if #available(iOS 15.0, *) { let billing = PKRecurringPaymentSummaryItem(label: "My Subscription", amount: NSDecimalNumber(string: "59.99")) // Payment starts today billing.startDate = Date() // Payment ends in one year billing.endDate = Date().addingTimeInterval(60 * 60 * 24 * 365) // Pay once a month. billing.intervalUnit = .month billing.intervalCount = 1 // recurringPaymentRequest is only available on iOS 16 or later if #available(iOS 16.0, *) { request.recurringPaymentRequest = PKRecurringPaymentRequest(paymentDescription: "Recurring", regularBilling: billing, managementURL: URL(string: "https://my-backend.example.com/customer-portal")!) request.recurringPaymentRequest?.billingAgreement = "You'll be billed $59.99 every month for the next 12 months. To cancel at any time, go to Account and click 'Cancel Membership.'" } request.paymentSummaryItems = [billing] request.currencyCode = "USD" } else { // On older iOS versions, set alternative summary items. request.paymentSummaryItems = [PKPaymentSummaryItem(label: "Monthly plan starting July 1, 2022", amount: NSDecimalNumber(string: "59.99"), type: .final)] } return request } ) var configuration = PaymentSheet.Configuration() configuration.applePay = .init(merchantId: "merchant.com.your_app_name", merchantCountryCode: "US", customHandlers: customHandlers) ``` ### Bestellverfolgung Um Informationen zur [Bestellverfolgung](https://developer.apple.com/design/human-interface-guidelines/technologies/wallet/designing-order-tracking) in iOS 16 oder höher hinzuzufügen, konfigurieren Sie einen [authorizationResultHandler](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/applepayconfiguration/handlers/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 Implementierung von `authorizationResultHandler` die Bestelldetails für die abgeschlossene Bestellung von Ihrem Server ab. Fügen Sie die Details dem bereitgestellten [PKPaymentAuthorizationResult](https://developer.apple.com/documentation/passkit/pkpaymentauthorizationresult) hinzu und geben Sie das geänderte Ergebnis zurück. Weitere Informationen zur Bestellverfolgung finden Sie in der [Dokumentation zu Wallet-Bestellungen von Apple](https://developer.apple.com/documentation/walletorders). #### iOS (Swift) ```swift let customHandlers = PaymentSheet.ApplePayConfiguration.Handlers( authorizationResultHandler: { result in do { // Fetch the order details from your service let myOrderDetails = try await MyAPIClient.shared.fetchOrderDetails(orderID: orderID) 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" // Return your modified PKPaymentAuthorizationResult return result } catch { return PKPaymentAuthorizationResult(status: .failure, errors: [error]) } } ) var configuration = PaymentSheet.Configuration() configuration.applePay = .init(merchantId: "merchant.com.your_app_name", merchantCountryCode: "US", customHandlers: customHandlers) ``` ## Scannen von Karten aktivieren Um die Unterstützung für das Scannen von Karten für iOS zu aktivieren, setzen Sie `NSCameraUsageDescription` (**Datenschutz – Beschreibung Kameranutzung**) in der `Info.plist` Ihrer Anwendung und geben einen Grund für den Zugriff auf die Kamera an (z. B. „Zum Scannen von Karten“). ## Optional: Formular anpassen Alle Anpassungen werden mithilfe des [PaymentSheet.Configuration](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html)-Objekts konfiguriert. ### Erscheinungsbild Passen Sie mit der [Appearance API](https://docs.stripe.com/elements/appearance-api/mobile.md?platform=ios) Farben, Schriftarten und mehr an das Erscheinungsbild Ihrer App an. ### Layout der Zahlungsmethode Konfigurieren Sie das Layout der Zahlungsmethoden im Formular mit [paymentMethodLayout](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/configuration-swift.struct/paymentmethodlayout). Sie können sie horizontal oder vertikal anzeigen oder das Layout von Stripe automatisch optimieren lassen. ![](https://b.stripecdn.com/docs-statics-srv/assets/ios-mpe-payment-method-layouts.9d0513e2fcec5660378ba1824d952054.png) #### Swift ```swift 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](https://docs.stripe.com/elements/address-element.md?platform=ios). ### Anzeigename des Händlers Geben Sie einen kundenorientierten Unternehmensnamen an, indem Sie [merchantDisplayName](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:18StripePaymentSheet0bC0C13ConfigurationV19merchantDisplayNameSSvp) festlegen. Standardmäßig handelt es sich dabei um den Namen Ihrer App. #### Swift ```swift 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](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:18StripePaymentSheet0bC0C13ConfigurationV5styleAC18UserInterfaceStyleOvp) auf den Modus `alwaysLight` oder `alwaysDark` einstellen. ```swift 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. ```swift 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.attachDefaultsToPaymentMethod` auf „true“ fest. In diesem Fall werden `PaymentSheet.Configuration.defaultBillingDetails` als [Abrechnungsdetails](https://docs.stripe.com/api/payment_methods/object.md?lang=node#payment_method_object-billing_details) der Zahlungsmethode festgelegt. Wenn Sie zusätzliche Rechnungsdetails erfassen möchten, die für die Zahlungsmethode nicht unbedingt erforderlich sind, legen Sie `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` auf „false“ fest. In diesem Fall werden die über das `PaymentSheet` erfassten Rechnungsdetails als Rechnungsdetails der Zahlungsmethode festgelegt. ```swift 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 ``` > 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. ## Optional: Zahlung in Ihrer Nutzeroberfläche abschließen 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 erforderlich sind, nachdem Sie die Zahlungsdetails erfasst haben. ![](https://b.stripecdn.com/docs-statics-srv/assets/ios-multi-step.cd631ea4f1cd8cf3f39b6b9e1e92b6c5.png) Schließen Sie die Zahlung über die Nutzeroberfläche Ihrer App ab #### UIKit Die folgenden Schritte führen Sie durch den Abschluss der Zahlung in der Nutzeroberfläche Ihrer Nutzeroberfläche. Sehen Sie sich unsere Beispiel-Integration auf [GitHub](https://github.com/stripe/stripe-ios/blob/master/Example/PaymentSheet%20Example/PaymentSheet%20Example/ExampleCustomCheckoutViewController.swift) an. 1. Initialisieren Sie zunächst [PaymentSheet.FlowController](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller) anstelle von `PaymentSheet` und aktualisieren Sie Ihre Nutzeroberfläche mit der Eigenschaft `paymentOption`. Diese Eigenschaft enthält ein Bild und ein Label, die die ursprünglich ausgewählte Standardzahlungsmethode des/der Kund/in darstellen. ```swift PaymentSheet.FlowController.create(paymentIntentClientSecret: paymentIntentClientSecret, configuration: configuration) { [weak self] result in switch result { case .failure(let error): print(error) case .success(let paymentSheetFlowController): self?.paymentSheetFlowController = paymentSheetFlowController // Update your UI using paymentSheetFlowController.paymentOption } } ``` 1. Rufen Sie als Nächstes `presentPaymentOptions` auf, um die Zahlungsdetails zu erfassen. Wenn Sie fertig sind, aktualisieren Sie Ihre Nutzeroberfläche erneut mit der Eigenschaft `paymentOption`. ```swift paymentSheetFlowController.presentPaymentOptions(from: self) { // Update your UI using paymentSheetFlowController.paymentOption } ``` 1. Rufen Sie schließlich `confirm` auf. ```swift paymentSheetFlowController.confirm(from: self) { paymentResult in // MARK: Handle the payment result switch paymentResult { case .completed: print("Payment complete!") case .canceled: print("Canceled!") case .failed(let error): print(error) } } ``` #### SwiftUI Die folgenden Schritte führen Sie durch den Abschluss der Zahlung in der Nutzeroberfläche Ihrer Nutzeroberfläche. Sehen Sie sich unsere Beispielintegration auf [GitHub](https://github.com/stripe/stripe-ios/blob/master/Example/PaymentSheet%20Example/PaymentSheet%20Example/ExampleSwiftUICustomPaymentFlow.swift) an. 1. Initialisieren Sie zunächst [PaymentSheet.FlowController](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller) anstelle von `PaymentSheet`. Die Eigenschaft `paymentOption` enthält ein Bild und eine Beschriftung, die die aktuell ausgewählte Zahlungsmethode des/der Kund/in darstellen und die Sie in Ihrer Nutzeroberfläche verwenden können. ```swift PaymentSheet.FlowController.create(paymentIntentClientSecret: paymentIntentClientSecret, configuration: configuration) { [weak self] result in switch result { case .failure(let error): print(error) case .success(let paymentSheetFlowController): self?.paymentSheetFlowController = paymentSheetFlowController // Use the paymentSheetFlowController.paymentOption properties in your UI myPaymentMethodLabel = paymentSheetFlowController.paymentOption?.label ?? "Select a payment method" myPaymentMethodImage = paymentSheetFlowController.paymentOption?.image ?? UIImage(systemName: "square.and.pencil")! } } ``` 1. Verwenden Sie [PaymentSheet.FlowController.PaymentOptionsButton](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller/paymentoptionsbutton), um die Schaltfläche anzuordnen, die das Formular zum Erfassen der Zahlungsdetails vorlegt. Wenn `PaymentSheet.FlowController` das Argument `onSheetDismissed` aufruft, spiegelt die `paymentOption` für die `PaymentSheet.FlowController`-Instanz die aktuell ausgewählte Zahlungsmethode wider. ```swift PaymentSheet.FlowController.PaymentOptionsButton( paymentSheetFlowController: paymentSheetFlowController, onSheetDismissed: { myPaymentMethodLabel = paymentSheetFlowController.paymentOption?.label ?? "Select a payment method" myPaymentMethodImage = paymentSheetFlowController.paymentOption?.image ?? UIImage(systemName: "square.and.pencil")! }, content: { /* An example button */ HStack { Text(myPaymentMethodLabel) Image(uiImage: myPaymentMethodImage) } } ) ``` 1. Verwenden Sie [PaymentSheet.FlowController.PaymentOptionsButton](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller/paymentoptionsbutton), um die Schaltfläche zur Bestätigung der Zahlung anzuordnen. ```swift PaymentSheet.FlowController.ConfirmButton( paymentSheetFlowController: paymentSheetFlowController, onCompletion: { result in // MARK: Handle the payment result switch result { case .completed: print("Payment complete!") case .canceled: print("Canceled!") case .failed(let error): print(error) } }, content: { /* An example button */ Text("Pay") } ) ``` Wenn Sie `allowsDelayedPaymentMethods` auf true festlegen, werden Zahlungsmethoden mit [verzögerter Benachrichtigung](https://docs.stripe.com/payments/payment-methods.md#payment-notification) 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. # Android > This is a Android for when platform is android and mobile-ui is payment-element. View the full page at https://docs.stripe.com/payments/mobile/save-during-payment?platform=android&mobile-ui=payment-element. Verwenden Sie die [Payment Intents API](https://docs.stripe.com/api/payment_intents.md), um Zahlungsdetails aus einem Einkauf zu speichern. Es gibt mehrere Anwendungsszenarien: - Belasten Sie das Konto eines Kunden/einer Kundin für eine E-Commerce-Bestellung und speichern Sie die Details für zukünftige Einkäufe. - Leiten Sie die erste Zahlung einer Reihe wiederkehrender Zahlungen ein. - Buchen Sie eine Anzahlung ab und speichern Sie die Details, um den vollen Betrag später abzubuchen. > #### Transaktionen mit vorhandener Karte > > Card-Present-Transaktionen, wie zum Beispiel Zahlungen über Stripe Terminal, verwenden ein anderes Verfahren zum Speichern der Zahlungsmethode. Weitere Informationen finden Sie in der [Terminal-Dokumentation](https://docs.stripe.com/terminal/features/saving-payment-details/save-after-payment.md). ## Konformität Sie sind dafür verantwortlich, alle geltenden Gesetze, Vorschriften und Netzwerkregeln einzuhalten, wenn Sie die Zahlungsdaten eines Kunden oder ein Kundin für die zukünftige Verwendung speichern, beispielsweise um dem Kunden oder der Kundin seine bzw. ihre Zahlungsmethode beim Bezahlvorgang für einen zukünftigen Kauf anzuzeigen oder um ihm Kosten in Rechnung zu stellen, wenn er Ihre Website oder App nicht aktiv nutzt. Bevor Sie die Zahlungsmethode eines Kunden oder einer Kundin speichern oder ihm Kosten in Rechnung stellen, stellen Sie bitte sicher, dass Sie: - Fügen Sie Ihrer Website oder App Bestimmungen hinzu, die darlegen, wie Sie Zahlungsmethoden speichern möchten, beispielsweise: - Die kundenseitige Zustimmung, eine Zahlung oder mehrere Zahlungen für bestimmte Transaktionen in deren Namen einzuleiten - Der erwartete Zeitpunkt und die voraussichtliche Häufigkeit von Zahlungen (z. B. Zahlungen für geplante Raten- oder Abonnementzahlungen oder für außerplanmäßige Aufstockungen). - Wie Sie den Zahlbetrag ermitteln. - Ihre Stornorichtlinie, wenn die Zahlungsmethode für einen Abonnementdienst ist. - Verwenden Sie eine gespeicherte Zahlungsmethode ausschließlich für den in Ihren Bedingungen angegebenen Zweck. - Bitte holen Sie die ausdrückliche Zustimmung des Kunden oder der Kundin für diese spezifische Verwendung ein. Fügen Sie beispielsweise ein Kontrollkästchen „Meine Zahlungsmethode für zukünftige Transaktionen speichern“ hinzu. - Bewahren Sie die schriftliche Zustimmung Ihrer Kundinnen und Kunden zu Ihren Bedingungen auf. ## Stripe einrichten [Serverseitig] [Clientseitig] Zunächst benötigen Sie ein Stripe-Konto. [Registrieren Sie sich jetzt](https://dashboard.stripe.com/register). ### Serverseitig Diese Integration erfordert Endpoints auf Ihrem Server, die mit der Stripe API kommunizieren können. Nutzen Sie die offiziellen Bibliotheken für den Zugriff auf die Stripe API von Ihrem Server aus: #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ### Clientseitig Das [Stripe Android SDK](https://github.com/stripe/stripe-android) ist Open Source und [vollständig dokumentiert](https://stripe.dev/stripe-android/). Um das SDK zu installieren, fügen Sie `stripe-android` in den Block `dependencies` Ihrer [app/build.gradle](https://developer.android.com/studio/build/dependencies)-Datei ein: #### Kotlin ```kotlin plugins { id("com.android.application") } android { ... } dependencies { // ... // Stripe Android SDK implementation("com.stripe:stripe-android:23.3.0") // Include the financial connections SDK to support US bank account as a payment method implementation("com.stripe:financial-connections:23.3.0") } ``` > Details zur aktuellen SDK-Version und zu vorherigen Versionen finden Sie auf der Seite [Releases](https://github.com/stripe/stripe-android/releases) auf GitHub. Um bei Veröffentlichung eines neuen Release eine Benachrichtigung zu erhalten, [beobachten Sie Veröffentlichungen für das jeweilige Repository](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository). ## Zahlungsmethoden aktivieren Kartenzahlungen sind standardmäßig aktiviert. Zeigen Sie Ihre [Einstellungen für Zahlungsmethoden](https://dashboard.stripe.com/settings/payment_methods) an, um weitere Zahlungsmethoden zu aktivieren, die Sie unterstützen möchten. ## 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](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment). Diese Integration verwendet drei Stripe-API-Objekte: 1. [PaymentIntent](https://docs.stripe.com/api/payment_intents.md): Stripe verwendet diesen, um Ihre Absicht darzustellen, Zahlungen von Ihren Kundinnen/Kunden anzufordern, wobei Abbuchungsversuche und Zahlungsstatusänderungen im gesamten Vorgang dokumentiert werden. 1. (Optional) Ein von [Kundinnen/Kunden konfiguriertes Konto](https://docs.stripe.com/api/v2/core/accounts/object.md#v2_account_object-applied_configurations) oder ein [Customer](https://docs.stripe.com/api/customers.md)-Objekt: Um eine Zahlungsmethode für zukünftige Zahlungen einzurichten, müssen Sie diese einem Kunden/einer Kundin zuordnen. Erstellen Sie ein Objekt, das Ihre Kundin/Ihren Kunden repräsentiert, wenn sie/er ein Konto bei Ihrem Unternehmen anlegt. Wenn Ihre Kundin/Ihr Kunde eine Zahlung als Gast durchführt, können Sie vor der Zahlung ein `Account`- oder `Customer`-Objekt erstellen und es zu einem späteren Zeitpunkt mit Ihrer eigenen Darstellung des Kundenkontos verknüpfen. 1. (Optional) [CustomerSession](https://docs.stripe.com/api/customer_sessions.md): Informationen zum Objekt, das Ihre Kundin/Ihren Kunden repräsentiert, sind vertraulich und können nicht direkt über eine App abgerufen werden. Eine `CustomerSession` gewährt dem SDK vorübergehenden, bereichsbezogenen Zugriff auf das `Account` oder die/den `Customer` und stellt zusätzliche Konfigurationsoptionen bereit. Hier finden Sie eine vollständige Liste der [Konfigurationsoptionen](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components). Aus Sicherheitsgründen kann Ihre App diese Objekte nicht erstellen. Fügen Sie stattdessen einen Endpoint auf Ihrem Server hinzu, der: 1. Ruft das `Account` oder die/den `Customer` ab oder erstellt ein neues bzw eine/einen neue/n. 1. Erstellt eine [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) für das `Account` oder die/den `Customer`. 1. Erstellt einen `PaymentIntent` mit dem [Betrag](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount), der [Währung](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency), [setup_future_usage](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-setup_future_usage), und entweder mit dem [customer_account](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer_account) oder der [Kundin/dem Kunden](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer). 1. Gibt das *Client-Geheimnis* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) des `PaymentIntent`, das `client_secret` der `CustomerSession`, die ID des `Account`s oder der/des `Customer` und Ihren [veröffentlichbaren Schlüssel](https://dashboard.stripe.com/apikeys) für Ihre App zurück. > Das mobile Payment Element unterstützt nur `setup_future_usage` mit Karten und US-Bankkonten. 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. #### Zahlungsmethoden über das Dashboard verwalten Zahlungsmethoden können Sie über das [Dashboard](https://dashboard.stripe.com/settings/payment_methods) 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. #### Accounts v2 #### Curl ```bash # Create an Account with the customer configuration (use an existing Account ID if this is a returning customer) curl https://api.stripe.com/v2/core/accounts \ -u <>: \ -X "POST" \ -d "configuration[customer]" # Create a CustomerSession for the Account curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "setup_future_usage"="off_session" \ -d "automatic_payment_methods[enabled]"=true \ ``` #### Customers v1 #### Curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "setup_future_usage"="off_session" \ -d "automatic_payment_methods[enabled]"=true \ ``` #### Zahlungsmethoden manuell auflisten #### Accounts v2 #### Curl ```bash # Create an Account with the customer configuration (use an existing Account ID if this is a returning customer) curl https://api.stripe.com/v2/core/accounts \ -u <>: \ -X "POST" \ -d "configuration[customer]" # Create a CustomerSession for the Account curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "setup_future_usage"="off_session" \ -d "payment_method_types[]"="card" \ ``` #### Customers v1 #### Curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "setup_future_usage"="off_session" \ -d "payment_method_types[]"="card" \ ``` > Jede Zahlungsmethode muss die im PaymentIntent übergebene Währung unterstützen, und Ihr Unternehmen muss in einem der Länder ansässig sein, die jede Zahlungsmethode unterstützt. Auf der Seite [Optionen für die Integration von Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/integration-options.md) finden Sie weitere Informationen zu den unterstützten Zahlungsmethoden. ## Zahlungsdetails erfassen [Clientseitig] Bevor das mobile Payment Element angezeigt wird, sollte Ihre Checkout-Seite: - Zeigen Sie die gekauften Produkte und den Gesamtbetrag an - Erfassen Sie erforderliche Versandinformationen mithilfe des [Address Element](https://docs.stripe.com/elements/address-element.md?platform=android). - Fügen Sie eine Checkout-Schaltfläche ein, um die Nutzeroberfläche von Stripe anzuzeigen #### Jetpack Compose [Initialisieren](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-builder/index.html) Sie eine `PaymentSheet`-Instanz innerhalb von `onCreate` Ihrer Checkout-Aktivität, wobei eine Methode zur Verarbeitung des Ergebnisses übergeben wird. ```kotlin import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import com.stripe.android.paymentsheet.PaymentSheet import com.stripe.android.paymentsheet.PaymentSheetResult @Composable fun App() { val paymentSheet = remember { PaymentSheet.Builder(::onPaymentSheetResult) }.build() } private fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) { // implemented in the next steps } ``` Rufen Sie als Nächstes das PaymentIntent-Client-Geheimnis, das Client-Geheimnis der Kunden-Sitzung, die Kundennummer und den veröffentlichbaren Schlüssel vom Endpoint ab, den Sie im vorigen Schritt erstellt haben. Legen Sie den veröffentlichbaren Schlüssel mithilfe von `PaymentConfiguration` fest und speichern Sie die anderen für den Zeitpunkt, an dem Sie das PaymentSheet präsentieren. ```kotlin import androidx.compose.runtime.Composable import androidx.compose.runtime.rememberimport androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.setValue import androidx.compose.ui.platform.LocalContext import com.stripe.android.PaymentConfiguration import com.stripe.android.paymentsheet.PaymentSheet import com.stripe.android.paymentsheet.PaymentSheetResult @Composable fun App() { val paymentSheet = remember { PaymentSheet.Builder(::onPaymentSheetResult) }.build()val context = LocalContext.current var customerConfig by remember { mutableStateOf(null) } varpaymentIntentClientSecret by remember { mutableStateOf(null) } LaunchedEffect(context) { // Make a request to your own server and retrieve payment configurations val networkResult = ... if (networkResult.isSuccess) {paymentIntentClientSecret = networkResult.paymentIntent customerConfig = PaymentSheet.CustomerConfiguration.createWithCustomerSession( id = networkResult.customer, clientSecret = networkResult.customerSessionClientSecret )PaymentConfiguration.init(context, networkResult.publishableKey)} } } private fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) { // implemented in the next steps } ``` Wenn der Kunde/die Kundin auf Ihre Checkout-Schaltfläche tippt, rufen Sie [presentWithPaymentIntent](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/index.html#1814490530%2FFunctions%2F2002900378) auf, um das Zahlungsformular anzuzeigen. Sobald die Zahlung kundenseitig abgeschlossen wurde, wird das Formular verworfen und [PaymentSheetResultCallback](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result-callback/index.html) mit einem [PaymentSheetResult](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result/index.html) aufgerufen. ```kotlin import androidx.compose.material.Button import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.platform.LocalContext import com.stripe.android.PaymentConfiguration import com.stripe.android.paymentsheet.PaymentSheet import com.stripe.android.paymentsheet.PaymentSheetResult @Composable fun App() { val paymentSheet = remember { PaymentSheet.Builder(::onPaymentSheetResult) }.build() val context = LocalContext.current var customerConfig by remember { mutableStateOf(null) } var paymentIntentClientSecret by remember { mutableStateOf(null) } LaunchedEffect(context) { // Make a request to your own server and retrieve payment configurations val networkResult = ... if (networkResult.isSuccess) { paymentIntentClientSecret = networkResult.paymentIntent customerConfig = PaymentSheet.CustomerConfiguration.createWithCustomerSession( id = networkResult.customer, clientSecret = networkResult.customerSessionClientSecret ) PaymentConfiguration.init(context, networkResult.publishableKey) } }Button( onClick = { val currentConfig = customerConfig val currentClientSecret =paymentIntentClientSecret if (currentConfig != null && currentClientSecret != null) { presentPaymentSheet(paymentSheet, currentConfig, currentClientSecret) } } ) { Text("Checkout") } }private fun presentPaymentSheet( paymentSheet: PaymentSheet, customerConfig: PaymentSheet.CustomerConfiguration,paymentIntentClientSecret: String ) { paymentSheet.presentWithPaymentIntent(paymentIntentClientSecret, PaymentSheet.Configuration.Builder(merchantDisplayName = "My merchant name") .customer(customerConfig) // Set `allowsDelayedPaymentMethods` to true if your business handles // delayed notification payment methods like US bank accounts. .allowsDelayedPaymentMethods(true) .build() ) } private fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) {when(paymentSheetResult) { is PaymentSheetResult.Canceled -> { print("Canceled") } is PaymentSheetResult.Failed -> { print("Error: ${paymentSheetResult.error}") } is PaymentSheetResult.Completed -> { // Display for example, an order confirmation screen print("Completed") } } } ``` #### Ansichten (klassisch) [Initialisieren](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/index.html#-394860221%2FConstructors%2F2002900378) Sie innerhalb von `onCreate` Ihrer Checkout-Aktivität eine `PaymentSheet`-Instanz und übergeben Sie eine Methode, um das Ergebnis zu bearbeiten. #### Kotlin ```kotlin import com.stripe.android.paymentsheet.PaymentSheet class CheckoutActivity : AppCompatActivity() { lateinit var paymentSheet: PaymentSheet override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) paymentSheet = PaymentSheet.Builder(::onPaymentSheetResult).build(this) } fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) { // implemented in the next steps } } ``` Rufen Sie als Nächstes das PaymentIntent-Client-Geheimnis, das Client-Geheimnis der Kunden-Sitzung, die Kundennummer und den veröffentlichbaren Schlüssel vom Endpoint ab, den Sie im vorigen Schritt erstellt haben. Legen Sie den veröffentlichbaren Schlüssel mithilfe von `PaymentConfiguration` fest und speichern Sie die anderen für den Zeitpunkt, an dem Sie das PaymentSheet präsentieren. #### Kotlin ```kotlin import com.stripe.android.paymentsheet.PaymentSheet class CheckoutActivity : AppCompatActivity() { lateinit var paymentSheet: PaymentSheetlateinit var customerConfig: PaymentSheet.CustomerConfiguration lateinit varpaymentIntentClientSecret: String override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) paymentSheet = PaymentSheet.Builder(::onPaymentSheetResult).build(this)lifecycleScope.launch { // Make a request to your own server and retrieve payment configurations val networkResult = MyBackend.getPaymentConfig() if (networkResult.isSuccess) {paymentIntentClientSecret = networkResult.paymentIntent customerConfig = PaymentSheet.CustomerConfiguration.createWithCustomerSession( id = networkResult.customer, clientSecret = networkResult.customerSessionClientSecret )PaymentConfiguration.init(context, networkResult.publishableKey)} } } fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) { // implemented in the next steps } } ``` Wenn der Kunde/die Kundin auf Ihre Checkout-Schaltfläche tippt, rufen Sie [presentWithPaymentIntent](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/index.html#1814490530%2FFunctions%2F2002900378) auf, um das Zahlungsformular anzuzeigen. Sobald die Zahlung kundenseitig abgeschlossen wurde, wird das Formular verworfen und [PaymentSheetResultCallback](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result-callback/index.html) mit einem [PaymentSheetResult](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result/index.html) aufgerufen. #### Kotlin ```kotlin // ... class CheckoutActivity : AppCompatActivity() { lateinit var paymentSheet: PaymentSheet lateinit var customerConfig: PaymentSheet.CustomerConfiguration lateinit var paymentIntentClientSecret: String // ...fun presentPaymentSheet() { paymentSheet.presentWithPaymentIntent(paymentIntentClientSecret, PaymentSheet.Configuration.Builder(merchantDisplayName = "My merchant name") .customer(customerConfig) // Set `allowsDelayedPaymentMethods` to true if your business handles // delayed notification payment methods like US bank accounts. .allowsDelayedPaymentMethods(true) .build() ) } fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) {when(paymentSheetResult) { is PaymentSheetResult.Canceled -> { print("Canceled") } is PaymentSheetResult.Failed -> { print("Error: ${paymentSheetResult.error}") } is PaymentSheetResult.Completed -> { // Display for example, an order confirmation screen print("Completed") } } } } ``` Wenn Sie `allowsDelayedPaymentMethods` auf true festlegen, werden Zahlungsmethoden mit [verzögerter Benachrichtigung](https://docs.stripe.com/payments/payment-methods.md#payment-notification) 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. ## Ereignisse nach Zahlung verarbeiten [Serverseitig] Stripe sendet ein [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie [Webhook-Tool im Dashboard](https://dashboard.stripe.com/webhooks) oder folgen Sie der [Webhook-Anleitung](https://docs.stripe.com/webhooks/quickstart.md), 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](https://stripe.com/payments/payment-methods-guide) 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: | Ereignis | Beschreibung | Aktion | | ------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded) | Wird gesendet, wenn Kundinnen und Kunden eine Zahlung erfolgreich abgeschlossen haben. | Senden Sie den Kund/innen eine Auftragsbestätigung und *wickeln* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) Sie die Bestellung ab. | | [payment_intent.processing](https://docs.stripe.com/api/events/types.md?lang=php#event_types-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_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_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-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_failed` übergeht, bieten Sie der Kundin/dem Kunden einen weiteren Zahlungsversuch an. | ## Die gespeicherte Zahlungsmethode später belasten [Serverseitig] > #### Compliance > > Sie sind für die Einhaltung aller geltenden Gesetze, Vorschriften und Netzwerkregeln verantwortlich, wenn Sie die Zahlungsdaten von Kundinnen und Kunden speichern. Wenn Sie Ihren Endkundinnen und Endkunden zuvor genutzte Zahlungsmethoden für zukünftige Einkäufe anzeigen, dürfen Sie nur Zahlungsmethoden auflisten, für die Sie bereits eine kundenseitige Zustimmung eingeholt haben, dank der Sie die Details der Zahlungsmethode für diese spezifische zukünftige Verwendung speichern können. Verwenden Sie den Parameter [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay), um zwischen Zahlungsmethoden zu unterscheiden, die mit Kundinnen und Kunden verknüpft sind und Ihren Endkundinnen und Endkunden als gespeicherte Zahlungsmethode für zukünftige Einkäufe angezeigt werden können oder nicht. Um eine Zahlungsmethode zum Belasten zu finden, listen Sie die Zahlungsmethoden auf, die mit Ihrer Kundin/Ihrem Kunden verknüpft sind. In diesem Beispiel sind Karten aufgeführt, Sie können jedoch jeden unterstützten [Typ](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-type) auflisten. > #### Verwenden Sie die Accounts v2 API zum Darstellen von Kundinnen und Kunden > > The Accounts v2 API is generally available for Connect users, and in public preview for other Stripe users. If you’re part of the Accounts v2 preview, you need to specify a [specify a preview version](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) in your code. > > To request access to the Accounts v2 preview, > > Für die meisten Anwendungsfälle empfehlen wir, [Ihre Kundinnen und Kunden als vom Kunden bzw. von der Kundin konfigurierte Account-Objekte abzubilden](https://docs.stripe.com/connect/use-accounts-as-customers.md), anstatt das [Kundenobjekt](https://docs.stripe.com/api/customers.md) zu verwenden. #### Accounts v2 ```curl curl -G https://api.stripe.com/v1/payment_methods \ -u "<>:" \ -d "customer_account={{CUSTOMERACCOUNT_ID}}" \ -d type=card ``` #### Customers v1 ```curl curl -G https://api.stripe.com/v1/payment_methods \ -u "<>:" \ -d "customer={{CUSTOMER_ID}}" \ -d type=card ``` Wenn Sie bereit sind, die Zahlungsmethode Ihrer Kundin/Ihres Kunden *off-session* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information) zu belasten, verwenden Sie die Kunden-ID und die `PaymentMethod`-ID, um einen `PaymentIntent` mit dem Betrag und der Währung der Zahlung zu erstellen. Legen Sie einige weitere Parameter fest, um die Off-Session-Zahlung durchzuführen: - Legen Sie [off_session](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-off_session) auf `true` fest, um anzugeben, dass der Kunde/die Kundin sich während eines Zahlungsversuchs nicht in Ihrem Bezahlvorgang befindet und somit eine Authentifizierungsanfrage eines Partners, wie z. B. eines Kartenausstellers, einer Bank oder eines anderen Zahlungsinstituts, nicht erfüllen kann. Wenn ein Partner während Ihres Bezahlvorgangs eine Authentifizierung anfordert, fordert Stripe Ausnahmen unter Verwendung von Kundendetails aus einer vorherigen *On-Session*-Transaktion an. Wenn die Bedingungen für die Ausnahme nicht erfüllt sind, kann der `PaymentIntent` einen Fehler ergeben. - Legen Sie den Wert der Eigenschaft [confirm](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-confirm) des `PaymentIntent` auf „true“ fest, wodurch die Bestätigung sofort beim Erstellen des `PaymentIntent` erfolgt. - Legen Sie [payment_method](https://docs.stripe.com/api.md#create_payment_intent-payment_method) auf die ID der `PaymentMethod` fest. - Je nachdem, wie Sie Kundinnen/Kunden in Ihrer Integration darstellen, legen Sie entweder [customer_account](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer_account) auf die ID des kundenseitig konfigurierten `Kontos` oder [customer](https://docs.stripe.com/api.md#create_payment_intent-customer) auf die `Kunden`-ID fest. #### Accounts v2 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "automatic_payment_methods[enabled]=true" \ -d "customer_account={{CUSTOMERACCOUNT_ID}}" \ -d payment_method={{PAYMENT_METHOD_ID}} \ --data-urlencode "return_url=https://example.com/order/123/complete" \ -d off_session=true \ -d confirm=true ``` #### Customers v1 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "automatic_payment_methods[enabled]=true" \ -d "customer={{CUSTOMER_ID}}" \ -d payment_method={{PAYMENT_METHOD_ID}} \ --data-urlencode "return_url=https://example.com/order/123/complete" \ -d off_session=true \ -d confirm=true ``` ## Integration testen #### Karten | Zahlungsmethode | Szenario | So führen Sie den Test durch | | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Kreditkarte | Die Einrichtung der Karte ist erfolgreich und es ist keine *Authentifizierung* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase) erforderlich. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer `4242 4242 4242 4242` mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | Kreditkarte | Die Karte erfordert für die Ersteinrichtung, um nachfolgende Zahlungen erfolgreich abschließen zu können. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer `4000 0025 0000 3155` mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | Kreditkarte | Die Karte erfordert für die Ersteinrichtung sowie für nachfolgende Zahlungen eine Authentifizierung. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer `4000 0027 6000 3184` mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | Kreditkarte | Die Karte wurde während der Einrichtung abgelehnt. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer `4000 0000 0000 9995` mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | ## Optional: Google Pay aktivieren ### Integration einrichten Um Google Pay zu verwenden, aktivieren Sie zuerst die Google Pay API, indem Sie dem Tag `` Ihrer Datei **AndroidManifest.xml** Folgendes hinzufügen: ```xml ... ``` Weitere Informationen finden Sie in der [Google Pay API](https://developers.google.com/pay/api/android/guides/setup) für Android. ### Google Pay hinzufügen Um Google Pay zu Ihrer Integration hinzuzufügen, übergeben Sie [PaymentSheet.GooglePayConfiguration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-google-pay-configuration/index.html) mit Ihrer Google Pay-Umgebung (Produktion oder Test) sowie den [Ländercode Ihres Unternehmens](https://dashboard.stripe.com/settings/account), wenn Sie [PaymentSheet.Configuration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html). #### Kotlin ```kotlin val googlePayConfiguration = PaymentSheet.GooglePayConfiguration( environment = PaymentSheet.GooglePayConfiguration.Environment.Test, countryCode = "US", currencyCode = "USD" // Required for Setup Intents, optional for Payment Intents ) val configuration = PaymentSheet.Configuration.Builder(merchantDisplayName = "My merchant name") .googlePay(googlePayConfiguration) .build() ``` ### Google Pay testen Google bietet Ihnen die Möglichkeit, Zahlungen über seine [Testkartensuite](https://developers.google.com/pay/api/android/guides/resources/test-card-suite) zu testen. Sie können Stripe-[Testkarten](https://docs.stripe.com/testing.md) mit der Testsuite verwenden. In einem Land, in dem Google Pay unterstützt wird, müssen Sie Google Pay mit einem physischen Android-Gerät anstelle eines simulierten Geräts testen. Melden Sie sich mit einer echten in Google Wallet gespeicherten Karte bei einem Google-Konto auf Ihrem Testgerät an. ## Optional: Formular anpassen Alle Anpassungen werden mithilfe des Objekts [PaymentSheet.Configuration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html) konfiguriert. ### Erscheinungsbild Passen Sie mit der [Appearance API](https://docs.stripe.com/elements/appearance-api/mobile.md?platform=android) Farben, Schriftarten und mehr an das Erscheinungsbild Ihrer App an. ### Layout der Zahlungsmethode Konfigurieren Sie das Layout der Zahlungsmethoden im Formular mit [paymentMethodLayout](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/-builder/index.html#2123253356%2FFunctions%2F2002900378). Sie können sie horizontal oder vertikal anzeigen oder das Layout von Stripe automatisch optimieren lassen. ![](https://b.stripecdn.com/docs-statics-srv/assets/android-mpe-payment-method-layouts.3bcfe828ceaad1a94e0572a22d91733f.png) #### Kotlin ```kotlin PaymentSheet.Configuration.Builder("Example, Inc.") .paymentMethodLayout(PaymentSheet.PaymentMethodLayout.Automatic) .build() ``` ### Adressen der Nutzer/innen erfassen Erfassen Sie lokale und internationale Versand- und Rechnungsadressen von Ihren Kundinnen und Kunden mithilfe des [Address Element](https://docs.stripe.com/elements/address-element.md?platform=android). ### Anzeigename des Unternehmens Geben Sie einen kundenorientierten Unternehmensnamen an, indem Sie [merchantDisplayName](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html#-191101533%2FProperties%2F2002900378) festlegen. Standardmäßig handelt es sich dabei um den Namen Ihrer App. #### Kotlin ```kotlin PaymentSheet.Configuration.Builder( merchantDisplayName = "My app, Inc." ).build() ``` ### 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 in Ihrer App den Hell- oder Dunkelmodus einrichten. #### Kotlin ```kotlin // force dark AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES) // force light AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO) ``` ### 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. #### Kotlin ```kotlin val address = PaymentSheet.Address(country = "US") val billingDetails = PaymentSheet.BillingDetails( address = address, email = "foo@bar.com" ) val configuration = PaymentSheet.Configuration.Builder(merchantDisplayName = "Merchant, Inc.") .defaultBillingDetails(billingDetails) .build() ``` ### Erfassung von Abrechnungsdetails konfigurieren `BillingDetailsCollectionConfiguration` verwenden, 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 dem PaymentMethod-Objekt Standard-Abrechnungsdetails zuordnen möchten, auch wenn diese Felder nicht auf der Nutzeroberfläche erfasst werden, legen Sie `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` auf `true` fest. #### Kotlin ```kotlin val billingDetails = PaymentSheet.BillingDetails( email = "foo@bar.com" ) val billingDetailsCollectionConfiguration = BillingDetailsCollectionConfiguration( attachDefaultsToPaymentMethod = true, name = BillingDetailsCollectionConfiguration.CollectionMode.Always, email = BillingDetailsCollectionConfiguration.CollectionMode.Never, address = BillingDetailsCollectionConfiguration.AddressCollectionMode.Full, ) val configuration = PaymentSheet.Configuration.Builder(merchantDisplayName = "Merchant, Inc.") .defaultBillingDetails(billingDetails) .billingDetailsCollectionConfiguration(billingDetailsCollectionConfiguration) .build() ``` > 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. ## Optional: Zahlung in Ihrer Nutzeroberfläche abschließen Sie können das Zahlungsformular anzeigen, um nur die Details einer Zahlungsmethode zu erfassen, und 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. ![](https://b.stripecdn.com/docs-statics-srv/assets/android-multi-step.84d8a0a44b1baa596bda491322b6d9fd.png) > Eine Muster-Integration ist [auf unserem GitHub verfügbar](https://github.com/stripe/stripe-android/blob/master/paymentsheet-example/src/main/java/com/stripe/android/paymentsheet/example/samples/ui/paymentsheet/custom_flow/CustomFlowActivity.kt). 1. Initialisieren Sie zunächst [PaymentSheet.FlowController](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/index.html) anstelle von `PaymentSheet` mit einer der [Builder](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/-builder/index.html)-Methoden. #### Android (Kotlin) ```kotlin class CheckoutActivity : AppCompatActivity() { private lateinit var flowController: PaymentSheet.FlowController override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val flowController = PaymentSheet.FlowController.Builder( resultCallback = ::onPaymentSheetResult, paymentOptionResultCallback = ::onPaymentOption, ).build(this) } } ``` 1. Rufen Sie als Nächstes `configureWithPaymentIntent` mit den Stripe-Objektschlüsseln auf, die Sie von Ihrem Backend abgerufen haben, und aktualisieren Ihre Nutzeroberfläche im Callback mithilfe von [getPaymentOption()](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/index.html#-2091462043%2FFunctions%2F2002900378). Diese enthält ein Bild und ein Label, das die aktuell vom Kunden/von der Kundin ausgewählte Zahlungsmethode darstellt. #### Android (Kotlin) ```kotlin flowController.configureWithPaymentIntent( paymentIntentClientSecret = paymentIntentClientSecret, configuration = PaymentSheet.Configuration.Builder("Example, Inc.") .customer(PaymentSheet.CustomerConfiguration( id = customerId, ephemeralKeySecret = ephemeralKeySecret )) .build() ) { isReady, error -> if (isReady) { // Update your UI using `flowController.getPaymentOption()` } else { // handle FlowController configuration failure } } ``` 1. Rufen Sie als Nächstes [presentPaymentOptions](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/index.html#449924733%2FFunctions%2F2002900378) auf, um die Zahlungsdetails zu erfassen. Wenn der Kunde/die Kundin fertig ist, beendet sich das Formular von selbst und ruft den zuvor in `create` übergebenen [paymentOptionCallback](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-option-callback/index.html) auf. Setzen Sie diese Methode ein, um Ihre Nutzeroberfläche mit der zurückgegebenen `paymentOption` zu aktualisieren. #### Android (Kotlin) ```kotlin // ... flowController.presentPaymentOptions() // ... private fun onPaymentOption(paymentOptionResult: PaymentOptionResult) { val paymentOption = paymentOptionResult.paymentOption if (paymentOption != null) { paymentMethodButton.text = paymentOption.label paymentMethodButton.setCompoundDrawablesRelativeWithIntrinsicBounds( paymentOption.drawableResourceId, 0, 0, 0 ) } else { paymentMethodButton.text = "Select" paymentMethodButton.setCompoundDrawablesRelativeWithIntrinsicBounds( null, null, null, null ) } } ``` 1. Rufen Sie schließlich [„bestätigen“](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/index.html#-479056656%2FFunctions%2F2002900378) auf, um die Zahlung abzuschließen. Wenn der Kunde/die Kundin den Vorgang abgeschlossen hat, beendet sich das Formular von selbst und ruft das zuvor in `create` übergebene [paymentResultCallback](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result-callback/index.html#237248767%2FFunctions%2F2002900378) auf. #### Android (Kotlin) ```kotlin // ... flowController.confirmPayment() // ... private fun onPaymentSheetResult( paymentSheetResult: PaymentSheetResult ) { when (paymentSheetResult) { is PaymentSheetResult.Canceled -> { // Payment canceled } is PaymentSheetResult.Failed -> { // Payment Failed. See logcat for details or inspect paymentSheetResult.error } is PaymentSheetResult.Completed -> { // Payment Complete } } } ``` Wenn Sie `allowsDelayedPaymentMethods` auf true festlegen, werden Zahlungsmethoden mit [verzögerter Benachrichtigung](https://docs.stripe.com/payments/payment-methods.md#payment-notification) 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. # React Native > This is a React Native for when platform is react-native and mobile-ui is payment-element. View the full page at https://docs.stripe.com/payments/mobile/save-during-payment?platform=react-native&mobile-ui=payment-element. Verwenden Sie die [Payment Intents API](https://docs.stripe.com/api/payment_intents.md), um Zahlungsdetails aus einem Einkauf zu speichern. Es gibt mehrere Anwendungsszenarien: - Belasten Sie das Konto eines Kunden/einer Kundin für eine E-Commerce-Bestellung und speichern Sie die Details für zukünftige Einkäufe. - Leiten Sie die erste Zahlung einer Reihe wiederkehrender Zahlungen ein. - Buchen Sie eine Anzahlung ab und speichern Sie die Details, um den vollen Betrag später abzubuchen. > #### Transaktionen mit vorhandener Karte > > Card-Present-Transaktionen, wie zum Beispiel Zahlungen über Stripe Terminal, verwenden ein anderes Verfahren zum Speichern der Zahlungsmethode. Weitere Informationen finden Sie in der [Terminal-Dokumentation](https://docs.stripe.com/terminal/features/saving-payment-details/save-after-payment.md). ## Konformität Sie sind dafür verantwortlich, alle geltenden Gesetze, Vorschriften und Netzwerkregeln einzuhalten, wenn Sie die Zahlungsdaten eines Kunden oder ein Kundin für die zukünftige Verwendung speichern, beispielsweise um dem Kunden oder der Kundin seine bzw. ihre Zahlungsmethode beim Bezahlvorgang für einen zukünftigen Kauf anzuzeigen oder um ihm Kosten in Rechnung zu stellen, wenn er Ihre Website oder App nicht aktiv nutzt. Bevor Sie die Zahlungsmethode eines Kunden oder einer Kundin speichern oder ihm Kosten in Rechnung stellen, stellen Sie bitte sicher, dass Sie: - Fügen Sie Ihrer Website oder App Bestimmungen hinzu, die darlegen, wie Sie Zahlungsmethoden speichern möchten, beispielsweise: - Die kundenseitige Zustimmung, eine Zahlung oder mehrere Zahlungen für bestimmte Transaktionen in deren Namen einzuleiten - Der erwartete Zeitpunkt und die voraussichtliche Häufigkeit von Zahlungen (z. B. Zahlungen für geplante Raten- oder Abonnementzahlungen oder für außerplanmäßige Aufstockungen). - Wie Sie den Zahlbetrag ermitteln. - Ihre Stornorichtlinie, wenn die Zahlungsmethode für einen Abonnementdienst ist. - Verwenden Sie eine gespeicherte Zahlungsmethode ausschließlich für den in Ihren Bedingungen angegebenen Zweck. - Bitte holen Sie die ausdrückliche Zustimmung des Kunden oder der Kundin für diese spezifische Verwendung ein. Fügen Sie beispielsweise ein Kontrollkästchen „Meine Zahlungsmethode für zukünftige Transaktionen speichern“ hinzu. - Bewahren Sie die schriftliche Zustimmung Ihrer Kundinnen und Kunden zu Ihren Bedingungen auf. ## Stripe einrichten [Serverseitig] [Clientseitig] Zunächst benötigen Sie ein Stripe-Konto. [Registrieren Sie sich jetzt](https://dashboard.stripe.com/register). ### Serverseitig Diese Integration erfordert Endpoints auf Ihrem Server, die mit der Stripe API kommunizieren können. Nutzen Sie die offiziellen Bibliotheken für den Zugriff auf die Stripe API von Ihrem Server aus: #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ### Clientseitig Das [React Native SDK](https://github.com/stripe/stripe-react-native) ist Open Source und vollständig dokumentiert. Intern werden [native iOS](https://github.com/stripe/stripe-ios) und [Android](https://github.com/stripe/stripe-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): #### yarn ```bash yarn add @stripe/stripe-react-native ``` #### npm ```bash npm install @stripe/stripe-react-native ``` 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. > Wir empfehlen Ihnen, die [offizielle Anleitung zu TypeScript](https://reactnative.dev/docs/typescript#adding-typescript-to-an-existing-project) 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](https://docs.stripe.com/keys.md#obtain-api-keys) in `publishableKey` ist erforderlich. Das folgende Beispiel zeigt, wie Stripe mithilfe der Komponente `StripeProvider` initialisiert wird. ```jsx 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 ( {/* Your app code here */} ); } ``` > Verwenden Sie Ihre API-[Testschlüssel](https://docs.stripe.com/keys.md#obtain-api-keys) beim Testen und Entwickeln Ihrer App und Ihre [Live-Modus](https://docs.stripe.com/keys.md#test-live-modes)-Schlüssel beim Veröffentlichen Ihrer App. ## Zahlungsmethoden aktivieren Kartenzahlungen sind standardmäßig aktiviert. Zeigen Sie Ihre [Einstellungen für Zahlungsmethoden](https://dashboard.stripe.com/settings/payment_methods) an, um weitere Zahlungsmethoden zu aktivieren, die Sie unterstützen möchten. ## 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](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment). Diese Integration verwendet drei Stripe-API-Objekte: 1. [PaymentIntent](https://docs.stripe.com/api/payment_intents.md): Stripe verwendet diesen, um Ihre Absicht darzustellen, Zahlungen von Ihren Kundinnen/Kunden anzufordern, wobei Abbuchungsversuche und Zahlungsstatusänderungen im gesamten Vorgang dokumentiert werden. 1. (Optional) Ein von [Kundinnen/Kunden konfiguriertes Konto](https://docs.stripe.com/api/v2/core/accounts/object.md#v2_account_object-applied_configurations) oder ein [Customer](https://docs.stripe.com/api/customers.md)-Objekt: Um eine Zahlungsmethode für zukünftige Zahlungen einzurichten, müssen Sie diese einem Kunden/einer Kundin zuordnen. Erstellen Sie ein Objekt, das Ihre Kundin/Ihren Kunden repräsentiert, wenn sie/er ein Konto bei Ihrem Unternehmen anlegt. Wenn Ihre Kundin/Ihr Kunde eine Zahlung als Gast durchführt, können Sie vor der Zahlung ein `Account`- oder `Customer`-Objekt erstellen und es zu einem späteren Zeitpunkt mit Ihrer eigenen Darstellung des Kundenkontos verknüpfen. 1. (Optional) [CustomerSession](https://docs.stripe.com/api/customer_sessions.md): Informationen zum Objekt, das Ihre Kundin/Ihren Kunden repräsentiert, sind vertraulich und können nicht direkt über eine App abgerufen werden. Eine `CustomerSession` gewährt dem SDK vorübergehenden, bereichsbezogenen Zugriff auf das `Account` oder die/den `Customer` und stellt zusätzliche Konfigurationsoptionen bereit. Hier finden Sie eine vollständige Liste der [Konfigurationsoptionen](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components). Aus Sicherheitsgründen kann Ihre App diese Objekte nicht erstellen. Fügen Sie stattdessen einen Endpoint auf Ihrem Server hinzu, der: 1. Ruft das `Account` oder die/den `Customer` ab oder erstellt ein neues bzw eine/einen neue/n. 1. Erstellt eine [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) für das `Account` oder die/den `Customer`. 1. Erstellt einen `PaymentIntent` mit dem [Betrag](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount), der [Währung](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency), [setup_future_usage](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-setup_future_usage), und entweder mit dem [customer_account](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer_account) oder der [Kundin/dem Kunden](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer). 1. Gibt das *Client-Geheimnis* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) des `PaymentIntent`, das `client_secret` der `CustomerSession`, die ID des `Account`s oder der/des `Customer` und Ihren [veröffentlichbaren Schlüssel](https://dashboard.stripe.com/apikeys) für Ihre App zurück. > Das mobile Payment Element unterstützt nur `setup_future_usage` mit Karten und US-Bankkonten. 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. #### Zahlungsmethoden über das Dashboard verwalten Zahlungsmethoden können Sie über das [Dashboard](https://dashboard.stripe.com/settings/payment_methods) 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. #### Accounts v2 #### Curl ```bash # Create an Account with the customer configuration (use an existing Account ID if this is a returning customer) curl https://api.stripe.com/v2/core/accounts \ -u <>: \ -X "POST" \ -d "configuration[customer]" # Create a CustomerSession for the Account curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "setup_future_usage"="off_session" \ -d "automatic_payment_methods[enabled]"=true \ ``` #### Customers v1 #### Curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "setup_future_usage"="off_session" \ -d "automatic_payment_methods[enabled]"=true \ ``` #### Zahlungsmethoden manuell auflisten #### Accounts v2 #### Curl ```bash # Create an Account with the customer configuration (use an existing Account ID if this is a returning customer) curl https://api.stripe.com/v2/core/accounts \ -u <>: \ -X "POST" \ -d "configuration[customer]" # Create a CustomerSession for the Account curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "setup_future_usage"="off_session" \ -d "payment_method_types[]"="card" \ ``` #### Customers v1 #### Curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "setup_future_usage"="off_session" \ -d "payment_method_types[]"="card" \ ``` > Jede Zahlungsmethode muss die im PaymentIntent übergebene Währung unterstützen, und Ihr Unternehmen muss in einem der Länder ansässig sein, die jede Zahlungsmethode unterstützt. Auf der Seite [Optionen für die Integration von Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/integration-options.md) finden Sie weitere Informationen zu den unterstützten Zahlungsmethoden. ## Zahlungsdetails 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. #### Accounts v2 ```javascript 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_account } = await response.json(); return { paymentIntent, ephemeralKey, customer_account, }; }; const initializePaymentSheet = async () => { const { paymentIntent, ephemeralKey, customer_account, } = await fetchPaymentSheetParams(); const { error } = await initPaymentSheet({ merchantDisplayName: "Example, Inc.", customerAccountId: customer_account, customerEphemeralKeySecret: ephemeralKey, paymentIntentClientSecret: paymentIntent, // Set `allowsDelayedPaymentMethods` to true if your business accepts 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 (