# Zahlungsmethoden in den Einstellungen verwalten Verwenden Sie das Einstellungsformular für Zahlungsmethoden, damit Ihre Kundinnen und Kunden ihre Zahlungsmethoden auf der Seite mit Ihren App-Einstellungen verwalten können. > Das Einstellungsformular für Zahlungsmethoden ist für die Verwendung auf einer Seite mit App-Einstellungen vorgesehen. Verwenden Sie für den Bezahlvorgang und Zahlungen [In-App Payments](https://docs.stripe.com/payments/mobile.md), das auch einen integrierten Support zum Speichern und Anzeigen von Zahlungsmethoden bietet und mehr Zahlungsmethoden unterstützt als das Einstellungsformular für Zahlungsmethoden. > Im Code wird diese Komponente aus historischen Gründen als `CustomerSheet` bezeichnet. Wenn Sie `CustomerSheet` in Codebeispielen sehen, bezieht sich dies in der Dokumentation auf das Einstellungsformular für Zahlungsmethoden. Das Einstellungsformular für Zahlungsmethoden ist eine Komponente der Nutzeroberfläche, mit der Ihre Kundinnen/Kunden ihre gespeicherten Zahlungsmethoden verwalten können. Sie können die Nutzeroberfläche des Einstellungsformular für Zahlungsmethoden außerhalb eines Bezahlvorgangs verwenden, und das Erscheinungsbild und das Design können an das Erscheinungsbild und die Ästhetik Ihrer App angepasst werden. Kundinnen/Kunden können Zahlungsmethoden, die im Kundenobjekt gespeichert werden, hinzufügen und entfernen und ihre lokal auf dem Gerät gespeicherte Standard-Zahlungsmethode festlegen. Nutzen Sie sowohl In-App Payments als auch das Einstellungsformular für Zahlungsmethoden, um Ihren Kundinnen/Kunden eine einheitliche, umfassende Lösung für gespeicherte Zahlungsmethoden zur Verfügung zu stellen. ![Screenshot eines Einstellungsformular für Zahlungsmethoden mit mehreren gespeicherten Zahlungsmethoden in einer iOS-App.](https://b.stripecdn.com/docs-statics-srv/assets/ios-landing.6c4969968fd6efe3d39fe673628f8284.png) Das [CustomerSession](https://docs.stripe.com/api/customer_sessions.md)-Objekt gewährt dem SDK vorübergehenden Zugriff auf die Kundin/den Kunden und stellt zusätzliche Konfigurationsoptionen bereit. Mit diesen Optionen können Sie das Verhalten von CustomerSheet anpassen. Eine vollständige Liste der Funktionen, die in der CustomerSession verfügbar sind, finden Sie in unserer [API-Dokumentation](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components). ## Stripe einrichten Zunächst benötigen Sie ein Stripe-Konto. [Registrieren Sie sich jetzt](https://dashboard.stripe.com/register). 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). Konfigurieren Sie das SDK mit Ihrem [veröffentlichbaren Schlüssel](https://dashboard.stripe.com/test/apikeys) von Stripe, um es beim Start der App auszuführen. Dadurch kann Ihre App Anfragen an die Stripe-API senden. #### Swift ```swift import UIKitimportStripePaymentSheet @main class AppDelegate: UIResponder, UIApplicationDelegate { func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {StripeAPI.defaultPublishableKey = "<>" // do any other necessary launch configuration return true } } ``` > Verwenden Sie Ihre [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 Zeigen Sie Ihre [Einstellungen für Zahlungsmethoden](https://dashboard.stripe.com/settings/payment_methods) an und aktivieren Sie die Zahlungsmethoden, die Sie unterstützen möchten. Sie müssen mindestens eine Zahlungsmethode aktiviert haben, um einen *SetupIntent* (The Setup Intents API lets you build dynamic flows for collecting payment method details for future payments. It tracks the lifecycle of a payment setup flow and can trigger additional authentication steps if required by law or by the payment method) zu erstellen. Standardmäßig aktiviert Stripe Karten und andere gängige Zahlungsmethoden, mit denen Sie mehr Kundinnen und Kunden erreichen können. Wir empfehlen jedoch, zusätzliche Zahlungsmethoden zu aktivieren, die für Ihr Unternehmen und Ihre Kundschaft relevant sind. Weitere Informationen zur Unterstützung von Produkten und Zahlungsmethoden finden Sie auf der Seite [Unterstützte Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) und der [Preisseite](https://stripe.com/pricing/local-payment-methods) für Gebühren. > CustomerSheet unterstützt nur Karten, US-Bankkonten und SEPA-Lastschrift. ## Kunden-Endpoints hinzufügen [Serverseitig] Wenn Ihre Connect-Plattform verwendet [kundenkonfigurierte Konten](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), benutze unser [Anleitung](https://docs.stripe.com/connect/use-accounts-as-customers.md) Ersetzen `Customer` und Ereignisreferenzen in Ihrem Code mit den entsprechenden Accounts v2 API-Referenzen. Erstellen Sie zwei Endpoints auf Ihrem Server: einen zum Abrufen eines CustomerSession-Client-Geheimnisses und einen zum Erstellen eines [SetupIntent](https://docs.stripe.com/api/setup_intents.md), um eine neue Zahlungsmethode für [den Kunden/die Kundin](https://docs.stripe.com/api/customers.md) zu speichern. 1. Erstellen Sie einen Endpoint, um eine [Kunden](https://docs.stripe.com/api/customers.md)-ID und ein [CustomerSession](https://docs.stripe.com/api/customer_sessions.md)-Client-Geheimnis zurückzugeben. #### Curl ```bash # Create a Customer (skip this and get the existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[customer_sheet][enabled]"=true \ -d "components[customer_sheet][features][payment_method_remove]"=enabled ``` > Integrationen mit älteren temporären Kundenschlüsseln haben zur Folge, dass gespeicherte Zahlungsmethoden den `allow_redisplay`-Wert `unspecified` haben. Um diese Zahlungsmethoden zusätzlich zu den Zahlungsmethoden anzuzeigen, die während der Verwendung von Kundensitzungen gespeichert wurden, setzen Sie `payment_method_allow_redisplay_filters` auf `["unspecified", "always"]`. Weitere Informationen finden Sie unter [CustomerSessions](https://docs.stripe.com/api/customer_sessions.md). 1. Erstellen Sie einen Endpoint, um einen [SetupIntent](https://docs.stripe.com/api/setup_intents.md) zurückzugeben, der mit der [Kunden](https://docs.stripe.com/api/customers.md)-ID konfiguriert ist. #### Curl ```bash # Create a Customer (skip this and get the existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" curl https://api.stripe.com/v1/setup_intents \ -u <>: \ -d "customer"="{{CUSTOMER_ID}}" \ ``` Wenn Sie die Zahlungsmethode nur dann für zukünftige Zahlungen verwenden möchten, wenn Ihre Kundin/Ihr Kunde während des Bezahlvorgangs anwesend ist, setzen Sie den [Nutzungsparameter](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-usage) auf *on\_session* (A payment is described as on-session if it occurs while the customer is actively in your checkout flow and able to authenticate the payment method), um die Autorisierungsquoten zu verbessern. ## Formular konfigurieren Konfigurieren Sie als Nächstes das Einstellungsformular für Zahlungsmethoden mit der Klasse `CustomerSheet` mit einer `IntentConfiguration`, `CustomerSessionClientSecretProvider` und einer [CustomerSheet.Configuration](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/customersheet/configuration/). ```swift var configuration = CustomerSheet.Configuration() // Configure settings for the CustomerSheet here. For example: configuration.headerTextForSelectionScreen = "Manage your payment method" let intentConfiguration = CustomerSheet.IntentConfiguration(setupIntentClientSecretProvider: { let json = try await myBackend.createSetupIntent() return json["setupIntentClientSecret"]! }) let customerSheet = CustomerSheet( configuration: configuration, intentConfiguration: intentConfiguration, customerSessionClientSecretProvider: { let json = try await myBackend.createCustomerSessionClientSecret() return .init(customerId: json["customerId"]!, clientSecret: json["customerSessionClientSecret"]!) }) ``` ## Formular anzeigen #### UIKit Zeigen Sie das Einstellungsformular für Zahlungsmethoden mithilfe des `CustomerSheet` an. Wenn die Kundin/der Kunde das Formular ablehnt, ruft das `CustomerSheet` den Abschlussblock mit einem `CustomerSheet.SheetResult` auf. #### iOS (Swift) ```swift import StripePaymentSheet customerSheet.present(from: self, completion: { result in switch result { case .canceled(let paymentOption), .selected(let paymentOption): // Configure your UI based on the payment option self.paymentLabel.text = paymentOption?.displayData().label ?? "None" // Optional: Send the selected payment method ID to your backend for advanced use cases // like charging a customer when not present in your app if let paymentOption = paymentOption { switch paymentOption { case .paymentMethod(let paymentMethod, let paymentOptionDisplayData): MyBackend.setDefaultPaymentMethod(paymentMethod.stripeId) case .applePay(paymentOptionDisplayData: let paymentOptionDisplayData): MyBackend.setDefaultPaymentMethodIsApplePay() } } case .error(let error): // Show the error in your UI } }) ``` - Wenn der Kunde/die Kundin eine Zahlungsmethode auswählt, ist das Ergebnis `.selected(PaymentOptionSelection?)`. Der zugehörige Wert ist die ausgewählte [PaymentOptionSelection](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/customersheet/paymentoptionselection) oder `nil`, wenn der/die Nutzer/in die zuvor ausgewählte Zahlungsmethode gelöscht hat. Die vollständigen Details zur Zahlungsmethode finden Sie im zugeordneten `paymentMethod`-Wert der PaymentOptionSelection. - Wenn der/die Nutzer/in das Formular abbricht, ist das Ergebnis `.canceled`. Der zugehörige Wert ist die ursprünglich vor dem Öffnen des Kundenformulars ausgewählte Zahlungsmethode, sofern diese noch verfügbar ist. - Wenn ein Fehler auftritt, ist das Ergebnis `.error(Error)`. Erfahren Sie mehr über die [Aktivierung von Apple Pay](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=ios#ios-apple-pay). #### SwiftUI Erstellen Sie ein `ObservableObject`-Modell für Ihren Bildschirm mit dem Einstellungsformular für Zahlungsmethoden. Dieses Modell verwaltet eine Instanz für das [CustomerSheet](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/customersheet). ```swift import StripePaymentSheet import SwiftUI class YourAccountViewModel: ObservableObject { var customerSheet: CustomerSheet } ``` Verwenden Sie den ViewModifier `.customerSheet`, um das Einstellungsformular für Zahlungsmethoden anzuzeigen. ```swift struct YourAccountView: View { @State private var showingCustomerSheet = false @ObservedObject var model = YourAccountViewModel() var body: some View { VStack { Button(action: { showingCustomerSheet = true }) { Text("Present Customer Sheet") }.customerSheet( isPresented: $showingCustomerSheet, customerSheet: model.customerSheet, onCompletion: model.onCompletion) } } } ``` Fügen Sie ein `customerSheetResult` hinzu, um das Ergebnis der Anzeige des Einstellungsformulars für Zahlungsmethoden in Ihrem `ObservableObject` zu speichern. ```swift class YourAccountViewModel: ObservableObject { var customerSheet: CustomerSheet @Published var customerSheetResult: CustomerSheet.CustomerSheetResult? func onCompletion(result: CustomerSheet.CustomerSheetResult) { self.customerSheetResult = result } } ``` Verwenden Sie das `customerSheetResult`, um die ausgewählte Zahlungsmethode in Ihrer Nutzeroberfläche zu rendern: ```swift struct YourAccountView: View { @State private var showingCustomerSheet = false @ObservedObject var model = MyBackendCustomerSheetModel() var body: some View { VStack { Button(action: { showingCustomerSheet = true }) { Text("Present Customer Sheet") }.customerSheet( isPresented: $showingCustomerSheet, customerSheet: model.customerSheet, onCompletion: model.onCompletion)if let customerSheetResult = model.customerSheetResult { ExampleCustomerSheetPaymentMethodView(customerSheetResult: customerSheetResult) } } } } ``` - Wenn der Kunde/die Kundin eine Zahlungsmethode auswählt, ist das Ergebnis `.selected(PaymentOptionSelection?)`. Der zugehörige Wert ist die ausgewählte [PaymentOptionSelection](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/customersheet/paymentoptionselection) oder `nil`, wenn der/die Nutzer/in die zuvor ausgewählte Zahlungsmethode gelöscht hat. Die vollständigen Details zur Zahlungsmethode finden Sie im zugeordneten `paymentMethod`-Wert der PaymentOptionSelection. - Wenn der/die Nutzer/in das Formular abbricht, ist das Ergebnis `.canceled`. Die ausgewählte Zahlungsmethode hat sich nicht geändert. - Wenn ein Fehler auftritt, ist das Ergebnis `.error(Error)`. Erfahren Sie mehr über die [Aktivierung von Apple Pay](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=ios#ios-apple-pay). ## Optional: ACH-Zahlungen optimieren So aktivieren Sie ACH-Lastschriftzahlungen: 1. Fügen Sie `StripeFinancialConnections` als Abhängigkeit in Ihrer App ein. 1. Aktivieren Sie in den Einstellungen Ihres [Dashboards](https://dashboard.stripe.com/settings/payment_methods) die Zahlungsmethode für US-Bankkonten. ## Optional: Ausgewählte Zahlungsmethode abrufen Um die Standardzahlungsmethode abzurufen, ohne das Einstellungsformular für die Zahlung anzuzeigen, rufen Sie `retrievePaymentOptionSelection()` im `CustomerSheet` auf. ```swift let paymentMethodOption = try await customerSheet.retrievePaymentOptionSelection() // Configure your UI based on the payment option self.paymentLabel.text = paymentMethodOption?.displayData().label ?? "None" // Send the selected payment method ID to your backend switch paymentMethodOption { case .paymentMethod(paymentMethod: let paymentMethod, paymentOptionDisplayData: let paymentOptionDisplayData): try await MyBackend.setDefaultPaymentMethod(paymentMethod.stripeId) case .applePay(paymentOptionDisplayData: let paymentOptionDisplayData): try await MyBackend.setDefaultPaymentMethodIsApplePay() } ``` ## Optional: Formular anpassen ### Erscheinungsbild Passen Sie mit der [Appearance API](https://docs.stripe.com/elements/appearance-api/mobile.md?platform=ios) die Farben, Schriftarten und andere Darstellungsattribute an das Erscheinungsbild Ihrer App an. > `fetchPaymentMethods` kann gespeicherte Zahlungsmethoden herausfiltern und nicht anzeigen, hat aber keinen Einfluss auf die Art der Zahlungsmethoden, die hinzugefügt werden können. ### Standardabrechnungsdetails Um Standardwerte für die im Zahlungsformular erfassten Rechnungsdetails festzulegen, konfigurieren Sie die Eigenschaft `defaultBillingDetails`. Die Felder von `CustomerSheet` werden vorab mit den von Ihnen angegebenen Werten ausgefüllt. ```swift var configuration = CustomerSheet.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. Um Werte zuzuordnen, die nicht von `CustomerSheet` erfasst werden, fügen Sie diese der Eigenschaft `defaultBillingDetails` hinzu und legen `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` auf `true` fest. Schließen Sie diesen Schritt unbedingt ab, wenn Sie nicht beabsichtigen, für die Zahlungsmethode erforderliche Werte zu erfassen. ```swift var configuration = CustomerSheet.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 Ihre Rechtsabteilung bezüglich der Gesetze, die für das Erfassen von Informationen gelten. Erfassen Sie Telefonnummern nur, wenn Sie diese für die Transaktionsabwicklung benötigen. > Das Einstellungsformular für Zahlungsmethoden ist für die Verwendung auf einer Seite mit App-Einstellungen vorgesehen. Verwenden Sie für den Bezahlvorgang und Zahlungen [In-App Payments](https://docs.stripe.com/payments/mobile.md), das auch einen integrierten Support zum Speichern und Anzeigen von Zahlungsmethoden bietet und mehr Zahlungsmethoden unterstützt als das Einstellungsformular für Zahlungsmethoden. > Im Code wird diese Komponente aus historischen Gründen als `CustomerSheet` bezeichnet. Wenn Sie `CustomerSheet` in Codebeispielen sehen, bezieht sich dies in der Dokumentation auf das Einstellungsformular für Zahlungsmethoden. Das Einstellungsformular für Zahlungsmethoden ist eine Komponente der Nutzeroberfläche, mit der Ihre Kundinnen/Kunden ihre gespeicherten Zahlungsmethoden verwalten können. Sie können die Nutzeroberfläche des Einstellungsformular für Zahlungsmethoden außerhalb eines Bezahlvorgangs verwenden, und das Erscheinungsbild und das Design können an das Erscheinungsbild und die Ästhetik Ihrer App angepasst werden. Kundinnen/Kunden können Zahlungsmethoden, die im Kundenobjekt gespeichert werden, hinzufügen und entfernen und ihre lokal auf dem Gerät gespeicherte Standard-Zahlungsmethode festlegen. Nutzen Sie sowohl In-App Payments als auch das Einstellungsformular für Zahlungsmethoden, um Ihren Kundinnen/Kunden eine einheitliche, umfassende Lösung für gespeicherte Zahlungsmethoden zur Verfügung zu stellen. ![Screenshot eines Formulars zur Einstellung der Zahlungsmethoden mit mehreren gespeicherten Zahlungsmethoden in einer Android-App.](https://b.stripecdn.com/docs-statics-srv/assets/ios-landing.6c4969968fd6efe3d39fe673628f8284.png) Das [CustomerSession](https://docs.stripe.com/api/customer_sessions.md)-Objekt gewährt dem SDK vorübergehenden Zugriff auf den Kunden/die Kundin und stellt zusätzliche Konfigurationsoptionen bereit. Mit diesen Konfigurationsoptionen können Sie das Verhalten von `CustomerSheet` anpassen. Eine vollständige Liste der Funktionen, die in der `CustomerSession` verfügbar sind, finden Sie in unserer [API-Dokumentation](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components). ## Stripe einrichten Zunächst benötigen Sie ein Stripe-Konto. [Registrieren Sie sich jetzt](https://dashboard.stripe.com/register). 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.2.0") // Include the financial connections SDK to support US bank account as a payment method implementation("com.stripe:financial-connections:23.2.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). Konfigurieren Sie das SDK mit Ihrem [veröffentlichbaren Schlüssel](https://dashboard.stripe.com/apikeys) von Stripe so, dass dieser Anfragen an die API stellen kann, wie beispielsweise in Ihrer Unterklasse `Application`: #### Kotlin ```kotlin import com.stripe.android.PaymentConfiguration class MyApp : Application() { override fun onCreate() { super.onCreate() PaymentConfiguration.init( applicationContext, "<>" ) } } ``` > Verwenden Sie Ihre [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 Zeigen Sie Ihre [Einstellungen für Zahlungsmethoden](https://dashboard.stripe.com/settings/payment_methods) an und aktivieren Sie die Zahlungsmethoden, die Sie unterstützen möchten. Sie müssen mindestens eine Zahlungsmethode aktiviert haben, um einen *SetupIntent* (The Setup Intents API lets you build dynamic flows for collecting payment method details for future payments. It tracks the lifecycle of a payment setup flow and can trigger additional authentication steps if required by law or by the payment method) zu erstellen. Standardmäßig aktiviert Stripe Karten und andere gängige Zahlungsmethoden, mit denen Sie mehr Kundinnen und Kunden erreichen können. Wir empfehlen jedoch, zusätzliche Zahlungsmethoden zu aktivieren, die für Ihr Unternehmen und Ihre Kundschaft relevant sind. Weitere Informationen zur Unterstützung von Produkten und Zahlungsmethoden finden Sie auf der Seite [Unterstützte Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) und der [Preisseite](https://stripe.com/pricing/local-payment-methods) für Gebühren. > Derzeit unterstützt das Einstellungsformular der Zahlungsmethoden nur Karten und USA-Bankkonten. ## Kunden-Endpoints hinzufügen [Serverseitig] Wenn Ihre Connect-Plattform verwendet [kundenkonfigurierte Konten](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), benutze unser [Anleitung](https://docs.stripe.com/connect/use-accounts-as-customers.md) Ersetzen `Customer` und Ereignisreferenzen in Ihrem Code mit den entsprechenden Accounts v2 API-Referenzen. Erstellen Sie zwei Endpoints auf Ihrem Server: einen zum Abrufen eines CustomerSession-Client-Geheimnisses und einen zum Erstellen eines [SetupIntent](https://docs.stripe.com/api/setup_intents.md), um eine neue Zahlungsmethode für [den Kunden/die Kundin](https://docs.stripe.com/api/customers.md) zu speichern. 1. Erstellen Sie einen Endpoint, um eine [Kunden](https://docs.stripe.com/api/customers.md)-ID und ein [CustomerSession](https://docs.stripe.com/api/customer_sessions.md)-Client-Geheimnis zurückzugeben. #### Curl ```bash # Create a Customer (skip this and get the existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[customer_sheet][enabled]"=true \ -d "components[customer_sheet][features][payment_method_remove]"=enabled ``` > Integrationen mit älteren temporären Kundenschlüsseln haben zur Folge, dass gespeicherte Zahlungsmethoden den `allow_redisplay`-Wert `unspecified` haben. Um diese Zahlungsmethoden zusätzlich zu den Zahlungsmethoden anzuzeigen, die während der Verwendung von Kundensitzungen gespeichert wurden, setzen Sie `payment_method_allow_redisplay_filters` auf `["unspecified", "always"]`. Weitere Informationen finden Sie unter [CustomerSessions](https://docs.stripe.com/api/customer_sessions.md). 1. Erstellen Sie einen Endpoint, um einen [SetupIntent](https://docs.stripe.com/api/setup_intents.md) zurückzugeben, der mit der [Kunden](https://docs.stripe.com/api/customers.md)-ID konfiguriert ist. #### Curl ```bash # Create a Customer (skip this and get the existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" curl https://api.stripe.com/v1/setup_intents \ -u <>: \ -d "customer"="{{CUSTOMER_ID}}" \ ``` Wenn Sie die Zahlungsmethode nur dann für zukünftige Zahlungen verwenden möchten, wenn Ihre Kundin/Ihr Kunde während des Bezahlvorgangs anwesend ist, setzen Sie den [Nutzungsparameter](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-usage) auf *on\_session* (A payment is described as on-session if it occurs while the customer is actively in your checkout flow and able to authenticate the payment method), um die Autorisierungsquoten zu verbessern. ## Kundensitzungsanbieter erstellen [Clientseitig] Ein `CustomerSessionProvider` ermöglicht einem `CustomerSheet` die Kommunikation mit Stripe mithilfe von [CustomerSession](https://docs.stripe.com/api/customer_sessions.md)-Objekten. Erstellen Sie auf dem Client einen `CustomerSessionProvider`, der ein `CustomerSession`-Client-Geheimnis und ein `SetupIntent`-Client-Geheimnis von Ihrem Server erstellen kann. ```kotlin import com.stripe.android.customersheet.CustomerSheet import com.stripe.android.customersheet.ExperimentalCustomerSheetApi @OptIn(ExperimentalCustomerSheetApi::class) class MyCustomerSessionProvider : CustomerSheet.CustomerSessionProvider() { val myBackend = // .... override suspend fun providesCustomerSessionClientSecret(): Result { return myBackend.getCustomerSessionClientSecret().fold( onSuccess = { response -> Result.success( CustomerSessionClientSecret.create( customerId = response.customerId, clientSecret = response.customerSessionClientSecret, ) ) }, onFailure = { exception -> Result.failure(exception) } ) } override suspend fun provideSetupIntentClientSecret(customerId: String): Result { return myBackend.getSetupIntentClientSecret(customerId).fold( onSuccess = { response -> Result.success(response.setupIntentClientSecret) }, onFailure = { exception -> Result.failure(exception) } ) } } ``` ```kotlin import android.app.Application import androidx.lifecycle.AndroidViewModel class CheckoutViewModel( application: Application ) : AndroidViewModel(application) { val customerSessionProvider = MyCustomerSessionProvider() } ``` ## Formular konfigurieren Initialisieren Sie als Nächstes das Einstellungsformular für Zahlungsmethoden mit der Klasse `CustomerSheet` bei Ihrem `CustomerSessionProvider` und rufen Sie dann `configure` mit einer [CustomerSheet.Configuration](https://github.com/stripe/stripe-android/blob/master/paymentsheet/src/main/java/com/stripe/android/customersheet/CustomerSheet.kt) auf. Rufen Sie immer `configure` auf, bevor Sie `present` und `PaymentOptionSelection` abrufen. ```kotlin import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.activity.viewModels import com.stripe.android.customersheet.CustomerSheet import com.stripe.android.customersheet.ExperimentalCustomerSheetApi import com.stripe.android.customersheet.rememberCustomerSheet @OptIn(ExperimentalCustomerSheetApi::class) class CheckoutActivity : ComponentActivity() { private val viewModel by viewModels() override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val configuration = CustomerSheet.Configuration.builder(merchantDisplayName = "{{YOUR BUSINESS NAME}}") .build() setContent { val customerSheet = rememberCustomerSheet( customerSessionProvider = viewModel.customerSessionProvider, callback = viewModel::handleResult // Implemented in next step ) LaunchedEffect(customerSheet) { customerSheet.configure(configuration = configuration) } } } } ``` ## Formular anzeigen Zeigen Sie das Einstellungsformular für Zahlungsmethoden mithilfe des `CustomerSheet` an. Wenn die Kundin/der Kunde das Formular ablehnt, ruft das `CustomerSheet` den Abschlussblock mit einem `CustomerSheetResult` auf. ```kotlin import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.activity.viewModelsimport androidx.compose.foundation.Image import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.material.Text import androidx.compose.material.TextButton import androidx.compose.runtime.collectAsState import androidx.compose.runtime.getValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp import com.stripe.android.customersheet.CustomerSheet import com.stripe.android.customersheet.ExperimentalCustomerSheetApi import com.stripe.android.customersheet.rememberCustomerSheetimport com.stripe.android.uicore.image.rememberDrawablePainter @OptIn(ExperimentalCustomerSheetApi::class) class CheckoutActivity : ComponentActivity() {private val viewModel by viewModels() override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val configuration = CustomerSheet.Configuration.builder(merchantDisplayName = "{{YOUR BUSINESS NAME}}") .headerTextForSelectionScreen("Manage your payment method") .build() setContent { val customerSheet = rememberCustomerSheet( customerSessionProvider = viewModel.customerSessionProvider, callback = viewModel::handleResult ) LaunchedEffect(customerSheet) { customerSheet.configure(configuration = configuration)viewModel.handleResult(customerSheet.retrievePaymentOptionSelection()) }val paymentOption by viewModel.paymentOption.collectAsState() Row( modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.SpaceBetween, ) { val icon = paymentOption?.icon() if (icon != null) { Image( painter = rememberDrawablePainter( drawable = icon ), contentDescription = "Payment Method Icon", modifier = Modifier.height(32.dp) ) } TextButton( onClick = { customerSheet.present() } ) { Text( text = paymentOption?.label ?: "Select" ) } } } } } ``` ```kotlin import android.app.Application import androidx.lifecycle.AndroidViewModel import com.stripe.android.customersheet.ExperimentalCustomerSheetApiimport com.stripe.android.paymentsheet.model.PaymentOption import kotlinx.coroutines.flow.MutableStateFlow import kotlinx.coroutines.flow.StateFlow import kotlinx.coroutines.flow.update @OptIn(ExperimentalCustomerSheetApi::class) class CheckoutViewModel( application: Application ) : AndroidViewModel(application) { val customerSessionProvider = // ... private val _paymentOption = MutableStateFlow(null) val paymentOption: StateFlow = _paymentOption fun handleResult(result: CustomerSheetResult) { when (result) { is CustomerSheetResult.Selected -> { // Configure your UI based on the payment option _paymentOption.update { result.selection?.paymentOption } } is CustomerSheetResult.Canceled -> { // Configure your UI based on the payment option _paymentOption.update { result.selection?.paymentOption } } is CustomerSheetResult.Failed -> { // Show the error in your UI } } } } ``` - Wenn kundenseitig eine Zahlungsmethode ausgewählt wird, ist das Ergebnis `CustomerSheetResult.Selected`. Der zugehörige Wert ist die ausgewählte `PaymentOptionSelection`. Der Wert kann jedoch auch null sein, wenn der/die Nutzer/in die zuvor ausgewählte Zahlungsmethode gelöscht hat. Alle Details zur Zahlungsmethode sind im `paymentMethod`-Wert der `PaymentOptionSelection` verfügbar. - Wenn der Kunde/die Kundin das Formular abbricht, lautet das Ergebnis `CustomerSheetResult.Canceled`. Der zugeordnete Wert ist die ursprüngliche `PaymentOptionSelection` des Kunden/der Kundin oder null, wenn der Kunde/die Kundin zuvor keine Zahlungsmethode ausgewählt oder die ursprünglich ausgewählte Zahlungsmethode gelöscht hat. - Wenn ein Fehler auftritt, ist das Ergebnis `CustomerSheetResult.Failed`. ## 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 `true` an [googlePayEnabled](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.customersheet/-customer-sheet/-configuration/-builder/google-pay-enabled.html), während Sie [CustomerSheet.Configuration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.customersheet/-customer-sheet/-configuration/index.html) mit [CustomerSheet.Configuration.Builder](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.customersheet/-customer-sheet/-configuration/-builder/index.html) initialisieren. #### Kotlin ```kotlin val configuration = CustomerSheet.Configuration.Builder() .googlePayEnabled(true) .build() ``` ## Optional: ACH-Zahlungen optimieren Fügen Sie Financial Connections als Abhängigkeit in Ihrer App hinzu, um ACH-Lastschriftzahlungen zu aktivieren. 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 `financial-connections` 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 { // ... // Financial Connections Android SDK implementation("com.stripe:financial-connections:23.2.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). ## Optional: Ausgewählte Zahlungsmethode abrufen Um die Standardzahlungsmethode abzurufen, ohne das Einstellungsformular für die Zahlung anzuzeigen, rufen Sie `retrievePaymentOptionSelection()` im `CustomerSheet` auf. ```kotlin class CheckoutActivity : ComponentActivity() { private val viewModel by viewModels() override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val configuration = ... setContent { val customerSheet = ... LaunchedEffect(Unit) { customerSheet.configure(configuration = configuration) val result = customerSheet.retrievePaymentOptionSelection() viewModel.handleResult(result) } ... } } } ``` ## Optional: Formular anpassen ### Erscheinungsbild Passen Sie mit der [Appearance API](https://docs.stripe.com/elements/appearance-api/mobile.md?platform=android) die Farben, Schriftarten und andere Darstellungsattribute an das Erscheinungsbild Ihrer App an. > `retrievePaymentMethods` kann gespeicherte Zahlungsmethoden herausfiltern und nicht anzeigen, hat aber keinen Einfluss auf die Art der Zahlungsmethoden, die hinzugefügt werden können. ### Standardabrechnungsdetails Um Standardwerte für die im Kundenformular erfassten Rechnungsdetails festzulegen, konfigurieren Sie die Eigenschaft [defaultBillingDetails](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.customersheet/-customer-sheet/-configuration/-builder/index.html#-1446247975%2FFunctions%2F2002900378). Die Felder von `CustomerSheet` werden vorab mit den von Ihnen angegebenen Werten ausgefüllt. ```kotlin val configuration = CustomerSheet.Configuration.Builder() .defaultBillingDetails( PaymentSheet.BillingDetails( address = PaymentSheet.Address( country = "US" ), email = "foo@bar.com" ) ) .build() ``` ### Erfassung der Rechnungsdetails Verwenden Sie [billingDetailsCollectionConfiguration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.customersheet/-customer-sheet/-configuration/-builder/index.html#1512634376%2FFunctions%2F2002900378), 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. Um Werte zuzuordnen, die nicht von `CustomerSheet` erfasst werden, fügen Sie diese der Eigenschaft [defaultBillingDetails](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.customersheet/-customer-sheet/-configuration/-builder/index.html#-1446247975%2FFunctions%2F2002900378) hinzu und legen `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` auf `true` fest. Schließen Sie diesen Schritt unbedingt ab, wenn Sie nicht beabsichtigen, für die Zahlungsmethode erforderliche Werte zu erfassen. ```kotlin val configuration = CustomerSheet.Configuration.Builder() .defaultBillingDetails( PaymentSheet.BillingDetails( email = "foo@bar.com" ) ) .billingDetailsCollectionConfiguration( PaymentSheet.BillingDetailsCollectionConfiguration( name = PaymentSheet.BillingDetailsCollectionConfiguration.AddressCollectionMode.Always, email = PaymentSheet.BillingDetailsCollectionConfiguration.AddressCollectionMode.Never, address = PaymentSheet.BillingDetailsCollectionConfiguration.AddressCollectionMode.Full, attachDefaultsToPaymentMethod = true, ) ) .build() ``` > Wenden Sie sich an Ihre Rechtsabteilung bezüglich der Gesetze, die für das Erfassen von Informationen gelten. Erfassen Sie Telefonnummern nur, wenn Sie diese für die Transaktionsabwicklung benötigen. > Das Einstellungsformular für Zahlungsmethoden ist für die Verwendung auf einer Seite mit App-Einstellungen vorgesehen. Verwenden Sie für den Bezahlvorgang und Zahlungen [In-App Payments](https://docs.stripe.com/payments/mobile.md), das auch einen integrierten Support zum Speichern und Anzeigen von Zahlungsmethoden bietet und mehr Zahlungsmethoden unterstützt als das Einstellungsformular für Zahlungsmethoden. > Im Code wird diese Komponente aus historischen Gründen als `CustomerSheet` bezeichnet. Wenn Sie `CustomerSheet` in Codebeispielen sehen, bezieht sich dies in der Dokumentation auf das Einstellungsformular für Zahlungsmethoden. Das Einstellungsformular für Zahlungsmethoden ist eine Komponente der Nutzeroberfläche, mit der Ihre Kundinnen/Kunden ihre gespeicherten Zahlungsmethoden verwalten können. Sie können die Nutzeroberfläche des Einstellungsformular für Zahlungsmethoden außerhalb eines Bezahlvorgangs verwenden, und das Erscheinungsbild und das Design können an das Erscheinungsbild und die Ästhetik Ihrer App angepasst werden. Kundinnen/Kunden können Zahlungsmethoden, die im Kundenobjekt gespeichert werden, hinzufügen und entfernen und ihre lokal auf dem Gerät gespeicherte Standard-Zahlungsmethode festlegen. Nutzen Sie sowohl In-App Payments als auch das Einstellungsformular für Zahlungsmethoden, um Ihren Kundinnen/Kunden eine einheitliche, umfassende Lösung für gespeicherte Zahlungsmethoden zur Verfügung zu stellen. ![Screenshot eines Einstellungsformular für Zahlungsmethoden mit mehreren gespeicherten Zahlungsmethoden in einer iOS-App.](https://b.stripecdn.com/docs-statics-srv/assets/ios-landing.6c4969968fd6efe3d39fe673628f8284.png) ## Stripe einrichten Zunächst benötigen Sie ein Stripe-Konto. [Registrieren Sie sich jetzt](https://dashboard.stripe.com/register). 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 Zeigen Sie Ihre [Einstellungen für Zahlungsmethoden](https://dashboard.stripe.com/settings/payment_methods) an und aktivieren Sie die Zahlungsmethoden, die Sie unterstützen möchten. Sie müssen mindestens eine Zahlungsmethode aktiviert haben, um einen *SetupIntent* (The Setup Intents API lets you build dynamic flows for collecting payment method details for future payments. It tracks the lifecycle of a payment setup flow and can trigger additional authentication steps if required by law or by the payment method) zu erstellen. Standardmäßig aktiviert Stripe Karten und andere gängige Zahlungsmethoden, mit denen Sie mehr Kundinnen und Kunden erreichen können. Wir empfehlen jedoch, zusätzliche Zahlungsmethoden zu aktivieren, die für Ihr Unternehmen und Ihre Kundschaft relevant sind. Weitere Informationen zur Unterstützung von Produkten und Zahlungsmethoden finden Sie auf der Seite [Unterstützte Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) und der [Preisseite](https://stripe.com/pricing/local-payment-methods) für Gebühren. > CustomerSheet unterstützt nur Karten und US-Bankkonten. ## Kunden-Endpoints hinzufügen [Serverseitig] Wenn Ihre Connect-Plattform verwendet [kundenkonfigurierte Konten](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), benutze unser [Anleitung](https://docs.stripe.com/connect/use-accounts-as-customers.md) Ersetzen `Customer` und Ereignisreferenzen in Ihrem Code mit den entsprechenden Accounts v2 API-Referenzen. Erstellen Sie zwei Endpoints auf Ihrem Server: einen zum Abrufen eines CustomerSession-Client-Geheimnisses und einen zum Erstellen eines [SetupIntent](https://docs.stripe.com/api/setup_intents.md), um eine neue Zahlungsmethode für [den Kunden/die Kundin](https://docs.stripe.com/api/customers.md) zu speichern. 1. Erstellen Sie einen Endpoint, um eine [Kunden](https://docs.stripe.com/api/customers.md)-ID und ein [CustomerSession](https://docs.stripe.com/api/customer_sessions.md)-Client-Geheimnis zurückzugeben. #### Curl ```bash # Create a Customer (skip this and get the existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[customer_sheet][enabled]"=true \ -d "components[customer_sheet][features][payment_method_remove]"=enabled ``` > Integrationen mit älteren temporären Kundenschlüsseln haben zur Folge, dass gespeicherte Zahlungsmethoden den `allow_redisplay`-Wert `unspecified` haben. Um diese Zahlungsmethoden zusätzlich zu den Zahlungsmethoden anzuzeigen, die während der Verwendung von Kundensitzungen gespeichert wurden, setzen Sie `payment_method_allow_redisplay_filters` auf `["unspecified", "always"]`. Weitere Informationen finden Sie unter [CustomerSessions](https://docs.stripe.com/api/customer_sessions.md). 1. Erstellen Sie einen Endpoint, um einen [SetupIntent](https://docs.stripe.com/api/setup_intents.md) zurückzugeben, der mit der [Kunden](https://docs.stripe.com/api/customers.md)-ID konfiguriert ist. #### Curl ```bash # Create a Customer (skip this and get the existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" curl https://api.stripe.com/v1/setup_intents \ -u <>: \ -d "customer"="{{CUSTOMER_ID}}" \ ``` Wenn Sie die Zahlungsmethode nur dann für zukünftige Zahlungen verwenden möchten, wenn Ihre Kundin/Ihr Kunde während des Bezahlvorgangs anwesend ist, setzen Sie den [Nutzungsparameter](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-usage) auf *on\_session* (A payment is described as on-session if it occurs while the customer is actively in your checkout flow and able to authenticate the payment method), um die Autorisierungsquoten zu verbessern. ## Formular initialisieren Erstellen Sie ein `ClientSecretProvider`-Objekt, das zwei Methoden implementiert. `CustomerSheet` benötigt es, um mit Stripe über `CustomerSession`-Objekte und die zuvor erstellten Endpoints zu kommunizieren. ```jsx import {ClientSecretProvider, CustomerSessionClientSecret} from '@stripe/stripe-react-native'; const clientSecretProvider: ClientSecretProvider = { // Must return an object with customerId and clientSecret async provideCustomerSessionClientSecret(): Promise { const result = await MyBackend.createCustomerSession(); return { customerId: result.customer, clientSecret: result.customerSessionClientSecret, }; }, // Must return a string async provideSetupIntentClientSecret(): Promise { const result = await MyBackend.createSetupIntent(); return result.setupIntent; } }; ``` Konfigurieren Sie als Nächstes das Einstellungsformular für Zahlungsmethoden mit der Klasse `CustomerSheet`, indem Sie die gewünschten Einstellungen für `CustomerSheet.initialize` angeben. ```jsx import {CustomerSheet} from '@stripe/stripe-react-native'; const {error} = await CustomerSheet.initialize({ // You must provide intentConfiguration and clientSecretProvider intentConfiguration: { paymentMethodTypes: ['card'], }, clientSecretProvider: clientSecretProvider, headerTextForSelectionScreen: 'Manage your payment method', returnURL: 'my-return-url://', }); ``` ## Formular anzeigen #### Funktional Zeigen Sie das Einstellungsformular für Zahlungen mit `CustomerSheet` an. Wenn die Kundin/der Kunde das Formular ablehnt, wird das Versprechen mit einem `CustomerSheetResult` aufgelöst. #### Funktionen direkt nutzen ```jsx import {CustomerSheet} from '@stripe/stripe-react-native'; const {error, paymentOption, paymentMethod} = await CustomerSheet.present(); if (error) { if (error.code === CustomerSheetError.Canceled) { // Customer dismissed the sheet without changing their payment option } else { // Show the error in your UI } } else { if (paymentOption) { // Configure your UI based on the payment option MyBackend.setDefaultPaymentMethod(paymentMethod.id); } if (paymentMethod) { console.log(JSON.stringify(paymentMethod, null, 2)); } } ``` - Wenn der Kunde/die Kundin eine Zahlungsmethode auswählt, enthält das Ergebnis eine `paymentOption`. Der zugehörige Wert ist die ausgewählte [PaymentOption](https://stripe.dev/stripe-react-native/api-reference/interfaces/PaymentSheet.PaymentOption.html) bzw. `nil`, wenn der/die Nutzer/in die zuvor ausgewählte Zahlungsmethode gelöscht hat. Die vollständigen Details zur Zahlungsmethode finden Sie im Feld `paymentMethod`. - Wenn der/die Nutzer/in das Formular abbricht, enthält das Ergebnis einen `error` mit dem `error.code === CustomerSheetError.Canceled`. Die ausgewählte Zahlungsmethode ändert sich nicht. - Wenn ein Fehler auftritt, werden die Details in `error` aufgenommen. Erfahren Sie mehr über die [Aktivierung von Apple Pay](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=ios#ios-apple-pay). #### Komponente Erstellen Sie eine Zustandsvariable, um die Darstellung des Einstellungsformulars für Zahlungsmethoden (`CustomerSheet`) zu steuern. ```jsx import {CustomerSheet, ClientSecretProvider, CustomerSessionClientSecret} from '@stripe/stripe-react-native'; export default function MyScreen() { const [customerSheetVisible, setCustomerSheetVisible] = React.useState(false); const clientSecretProvider: ClientSecretProvider = { async provideCustomerSessionClientSecret(): Promise { const result = await MyBackend.createCustomerSession(); return { customerId: result.customer, clientSecret: result.customerSessionClientSecret, }; }, async provideSetupIntentClientSecret(): Promise { const result = await MyBackend.createSetupIntent(); return result.setupIntent; } }; return (