# Physische Adressen und Telefonnummern erfassen Erfahren Sie, wie Sie Adressen und Telefonnummern von Kundinnen und Kunden in Ihrer mobilen App mit dem Address Element erfassen. # iOS (UIKit) > This is a iOS (UIKit) for when payment-ui is mobile and platform is ios. View the full page at https://docs.stripe.com/payments/mobile/collect-addresses?payment-ui=mobile&platform=ios. Um vollständige Adressen für die Abrechnung oder den Versand zu erfassen, verwenden Sie das [Address Element](https://docs.stripe.com/payments/mobile/address-element.md). Sie können das Address Element auch für Folgendes nutzen: - Erfassen Sie [Telefonnummern](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/addressviewcontroller/addressdetails/phone) von Kundinnen/Kunden - Verwenden Sie automatisches Vervollständigen (standardmäßig in iOS aktiviert) - Füllen Sie Rechnungsinformationen vorab im Payment Element aus, indem Sie eine Versandadresse eingeben Stripe kombiniert die erfassten Adressinformationen und die Zahlungsmethode, um einen PaymentIntent *PaymentIntent* (API object that represents your intent to collect payment from a customer, tracking charge attempts and payment state changes throughout the process) zu erstellen. ![Beispiele für einen Bezahlvorgang, bei dem Nutzer/innen die Option „Versandadresse hinzufügen“ auswählen. Anschließend werden sie zu einer neuen Seite weitergeleitet, auf der sie ihre Versandadresse in ein Formular eingeben können. Während der Eingabe der Adresse werden Vorschläge zur automatischen Vervollständigung angezeigt, aus denen sie auswählen können.](https://b.stripecdn.com/docs-statics-srv/assets/ios-overview.4e83bb4e46fd7d131b5c4ff8abee27ea.png) ## Stripe einrichten [Serverseitig] [Clientseitig] 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. ## Vorschläge zur automatischen Vervollständigung von Adressen einrichten Autocomplete ist unter iOS standardmäßig aktiviert. ## Address Element konfigurieren Sie können das Address Element mit Details wie der Anzeige von Standardwerten, der Festlegung zulässiger Länder, der Anpassung des Erscheinungsbilds usw. konfigurieren. Eine vollständige Liste der Konfigurationsoptionen finden Sie unter [AddressViewController.Configuration](https://github.com/stripe/stripe-ios/blob/address-element-private-beta-2/Stripe/AddressViewController%2BConfiguration.swift#L72-L162). ```swift let addressConfiguration = AddressViewController.Configuration( additionalFields: .init(phone: .required), allowedCountries: ["US", "CA", "GB"], title: "Shipping Address" ) ``` ## Adressdaten abrufen Rufen Sie die Adressdetails ab, indem Sie `AddressViewControllerDelegate` anpassen und dann [addressViewControllerDidFinish](https://github.com/stripe/stripe-ios/blob/address-element-private-beta-2/Stripe/AddressViewController.swift#L19) verwenden, um die Ansichtssteuerung zu schließen. Der Adresswert ist entweder eine gültige [Adresse](https://github.com/stripe/stripe-ios/blob/8399ea6cfe4e32190238375882e0a793b483d426/Stripe/AddressViewController%2BConfiguration.swift#L16-L36) oder Null. ```swift extension MyViewController: AddressViewControllerDelegate { func addressViewControllerDidFinish(_ addressViewController: AddressViewController, with address: AddressViewController.AddressDetails?) { addressViewController.dismiss(animated: true) self.addressDetails = address } } ``` ## Address Element präsentieren Erstellen Sie einen [AddressViewController](https://github.com/stripe/stripe-ios/blob/address-element-private-beta-2/Stripe/AddressViewController.swift#L26) mit der Adresskonfiguration und dem Delegaten aus den vorherigen Schritten. Sie können es entweder in einem Navigationscontroller anzeigen oder auf einen Navigationscontroller übertragen. ```swift self.addressViewController = AddressViewController(configuration: addressConfiguration, delegate: self) let navigationController = UINavigationController(rootViewController: addressViewController) present(navigationController, animated: true) ``` ## Optional: Versandadressen im Payment Element vorab eingeben Wenn Sie das Mobile Payment Element verwenden, setzen Sie [PaymentSheet.Configuration.shippingDetails](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/configuration-swift.struct/shippingdetails/) auf die vom Adressenelement erfasste Adresse. Wenn die `shippingDetails` ausgefüllt ist, wird die Rechnungsadresse der Nutzer/innen automatisch vorausgefüllt und das Kontrollkästchen **Rechnungsadresse entspricht der Lieferadresse** angezeigt. Bestätigte PaymentIntents mit ausgefüllten `shippingDetails` enthalten zudem die Eigenschaft [shipping](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-shipping) intent, sobald der PaymentIntent bestätigt wird. ```swift var configuration = PaymentSheet.Configuration() // ... configuration.shippingDetails = { [weak self] in return self?.addressDetails } ``` ## Optional: Erscheinungsbild anpassen Nachdem Sie das Address Element zu Ihrer App hinzugefügt haben, können Sie dessen Darstellung an das Design der übrigen App anpassen. Sie können die Darstellung über die [Appearance-API](https://docs.stripe.com/elements/appearance-api/mobile.md?platform=ios) mithilfe von [AddressViewController.Configuration.appearance](https://github.com/stripe/stripe-ios/blob/address-element-private-beta-2/Stripe/AddressViewController%2BConfiguration.swift#L149) konfigurieren. ## Optional: Standardabrechnungsdetails festlegen 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" ``` ## Optional: Erfassung der Abrechnungsdetails anpassen 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. # iOS (SwiftUI) > This is a iOS (SwiftUI) for when payment-ui is mobile and platform is plugins. View the full page at https://docs.stripe.com/payments/mobile/collect-addresses?payment-ui=mobile&platform=plugins. Um vollständige Adressen für die Abrechnung oder den Versand zu erfassen, verwenden Sie das [Address Element](https://docs.stripe.com/payments/mobile/address-element.md) in SwiftUI. Sie können das Address Element auch für Folgendes nutzen: - [Telefonnummern](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/addresselement/addressdetails/phone) von Kundinnen/Kunden erfassen - Automatische Vervollständigung verwenden (in iOS standardmäßig aktiviert) - Füllen Sie Rechnungsinformationen vorab im Payment Element aus, indem Sie eine Versandadresse eingeben Stripe kombiniert die erfassten Adressinformationen und die Zahlungsmethode, um einen PaymentIntent *PaymentIntent* (API object that represents your intent to collect payment from a customer, tracking charge attempts and payment state changes throughout the process) zu erstellen. ![Beispiele für einen Bezahlvorgang, bei dem eine Nutzerin/ein Nutzer die Option Lieferadresse hinzufügen auswählt. Sie/er wird zu einer neuen Seite weitergeleitet, auf der die Lieferadresse in ein Formular eingeben werden kann. Die automatische Vervollständigung schlägt Ihrer Nutzerin/Ihrem Nutzer Optionen zur Auswahl vor.](https://b.stripecdn.com/docs-statics-srv/assets/ios-overview.4e83bb4e46fd7d131b5c4ff8abee27ea.png) ## Stripe einrichten [Serverseitig] [Clientseitig] 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. ## Vorschläge zur automatischen Vervollständigung von Adressen einrichten Autocomplete ist unter iOS standardmäßig aktiviert. ## Address Element konfigurieren Sie können das Address Element mit Informationen wie dem Anzeigen von Standardwerten, der Einstellung zulässiger Länder, der Anpassung des Erscheinungsbilds usw. konfigurieren. Eine vollständige Liste der Konfigurationsmöglichkeiten finden Sie unter `AddressElement.Configuration`. ```swift var configuration = AddressElement.Configuration() configuration.allowedCountries = ["US", "CA", "GB", "AU"] configuration.buttonTitle = "Save Address" ``` ## Address Element präsentieren ```swift import SwiftUI import StripePaymentSheet struct MyView: View { @State private var showingAddressElement = false @State private var collectedAddress: AddressElement.AddressDetails? var body: some View { VStack { Button("Collect Address") { showingAddressElement = true } .sheet(isPresented: $showingAddressElement) { AddressElement( address: $collectedAddress, configuration: configuration ) } // Display collected address if let address = collectedAddress { AddressView(address: address) } } } } ``` ## Adressdaten abrufen The Address Element automatically updates the bound `address` variable when the customer completes or cancels the address collection: ```swift struct AddressView: View { let address: AddressElement.AddressDetails var body: some View { VStack(alignment: .leading, spacing: 8) { Text("Collected Address:") .font(.headline) if let name = address.name { Text("Name: \(name)") } Text("Address: \(address.address.line1)") if let city = address.address.city { Text("City: \(city)") } Text("Country: \(address.address.country)") if let phone = address.phone { Text("Phone: \(phone)") } } .padding() } } ``` ## Optional: Erscheinungsbild anpassen Nachdem Sie das Address Element zu Ihrer App hinzugefügt haben, können Sie das Erscheinungsbild so anpassen, dass es zum Design der restlichen App passt. Sie können das Erscheinungsbild mit der Appearance API mithilfe von `AddressElement.Configuration.appearance` konfigurieren. ## Optional: Standardabrechnungsdetails festlegen 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" ``` ## Optional: Erfassung der Abrechnungsdetails anpassen 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. # Android > This is a Android for when payment-ui is mobile and platform is android. View the full page at https://docs.stripe.com/payments/mobile/collect-addresses?payment-ui=mobile&platform=android. Um vollständige Adressen für die Abrechnung oder den Versand zu erfassen, verwenden Sie das [Address Element](https://docs.stripe.com/payments/mobile/address-element.md). Sie können das Address Element auch für Folgendes nutzen: - Erfassen Sie [Telefonnummern](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet.addresselement/-address-launcher/-additional-fields-configuration/index.html) von Kundinnen/Kunden - Aktivieren Sie die [automatische Vervollständigung](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet.addresselement/-address-launcher/-configuration/index.html) - Füllen Sie Rechnungsinformationen vorab im Payment Element aus, indem Sie eine Versandadresse eingeben Stripe kombiniert die erfassten Adressinformationen und die Zahlungsmethode, um einen PaymentIntent *PaymentIntent* (API object that represents your intent to collect payment from a customer, tracking charge attempts and payment state changes throughout the process) zu erstellen. ![Beispiele für einen Bezahlvorgang, bei dem Nutzer/innen die Option „Versandadresse hinzufügen“ auswählen. Anschließend werden sie zu einer neuen Seite weitergeleitet, auf der sie ihre Versandadresse in ein Formular eingeben können (während der Eingabe der Adresse werden Vorschläge zur automatischen Vervollständigung angezeigt).](https://b.stripecdn.com/docs-statics-srv/assets/android-overview.6061212dc737aa700b79242cb5f77782.png) ## Stripe einrichten [Serverseitig] [Clientseitig] Zunächst benötigen Sie ein Stripe-Konto. [Registrieren Sie sich jetzt](https://dashboard.stripe.com/register). 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.8.0") // Include the financial connections SDK to support US bank account as a payment method implementation("com.stripe:financial-connections:23.8.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. ## Vorschläge zur automatischen Vervollständigung von Adressen einrichten Das Adresselement verwendet das [Google Places SDK](https://developers.google.com/maps/documentation/places/android-sdk/overview), um Vorschläge zur automatischen Vervollständigung von Adressen abzurufen. Um die Vorschläge zur automatischen Vervollständigung zu aktivieren, müssen Sie die Google Places SDK-Abhängigkeit in die `build.gradle`-Datei Ihrer App einbinden. #### Groovy ```groovy dependencies { implementation 'com.google.android.libraries.places:places:2.6.0' } ``` Für Vorschläge zur automatischen Vervollständigung von Adressen ist ein Google Places-API-Schlüssel erforderlich. Befolgen Sie die [Einrichtungsanleitung für das Google Places SDK](https://developers.google.com/maps/documentation/places/android-sdk/cloud-setup), um Ihren API-Schlüssel zu generieren. ## Address Element konfigurieren Sie können das Address Element mit Details wie der Anzeige von Standardwerten, der Festlegung zulässiger Länder, der Anpassung des Erscheinungsbilds usw. konfigurieren. Eine vollständige Liste der Konfigurationsoptionen finden Sie unter [AddressLauncher.Configuration](https://github.com/stripe/stripe-android/blob/master/paymentsheet/src/main/java/com/stripe/android/paymentsheet/addresselement/AddressLauncher.kt#L72). ```kotlin val addressConfiguration = AddressLauncher.Configuration( additionalFields: AddressLauncher.AdditionalFieldsConfiguration( phone: AdditionalFieldsConfiguration.FieldConfiguration.Required ), allowedCountries: setOf("US", "CA", "GB"), title: "Shipping Address", googlePlacesApiKey = "(optional) YOUR KEY HERE" ) ``` ## Adressdaten abrufen Rufen Sie die Adressdetails ab, indem Sie eine Instanz von `AddressLauncher` in der Lebenszyklusmethode `onCreate` Ihrer `Activity` oder Ihres `Fragment` erstellen und eine Callback-Methode erstellen, die die `AddressLauncherResultCallback`-Schnittstelle implementiert. ```kotlin private lateinit var addressLauncher: AddressLauncher private var shippingDetails: AddressDetails? = null override fun onCreate(savedInstanceState: Bundle?) { addressLauncher = AddressLauncher(this, ::onAddressLauncherResult) } private fun onAddressLauncherResult(result: AddressLauncherResult) { // TODO: Handle result and update your UI when (result) { is AddressLauncherResult.Succeeded -> { shippingDetails = result.address } is AddressLauncherResult.Canceled -> { // TODO: Handle cancel } } } ``` Das `AddressLauncherResult` kann `Succeeded` oder `Canceled` sein. Hier finden Sie weitere [Details zur Implementierung](https://github.com/stripe/stripe-android/blob/master/paymentsheet/src/main/java/com/stripe/android/paymentsheet/addresselement/AddressLauncherResult.kt). > Stripe verlangt, dass Sie den `AddressLauncher` während des `onCreate`-Lebenszyklusereignisses instanziieren und nicht danach. Andernfalls kann der Rückruf nicht ordnungsgemäß registriert werden und Ihre App stürzt ab. ## Address Element präsentieren Präsentieren Sie das Adresselement mit dem Adress-Launcher und der Konfiguration aus den vorherigen Schritten. ```kotlin addressLauncher.present( publishableKey = publishableKey, configuration = addressConfiguration ) ``` ## Optional: Versandadressen im Payment Element vorab eingeben Wenn Sie das mobile Payment Element verwenden, setzen Sie [PaymentSheet.Configuration.shippingDetails](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html) auf die Adresse, die über das Adressenelement erfasst wurde. Sobald `shippingDetails` ausgefüllt ist, wird die Rechnungsadresse der Nutzer/innen automatisch vorausgefüllt und sie sehen ein Kontrollkästchen ** Rechnungsadresse entspricht der Lieferadresse**. Bestätigte PaymentIntents mit ausgefüllten `shippingDetails` enthalten zudem die Eigenschaft [shipping](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-shipping) intent, sobald der PaymentIntent bestätigt wird. ```kotlin val configuration = PaymentSheet.Configuration.Builder("Example, Inc.") // ... .shippingDetails(shippingDetails) .build() ``` ## Optional: Erscheinungsbild anpassen Nachdem Sie das Address Element zu Ihrer App hinzugefügt haben, können Sie dessen Darstellung an das Design der übrigen App anpassen. Sie können die Darstellung über die [Appearance-API](https://docs.stripe.com/elements/appearance-api/mobile.md?platform=android) mithilfe von [AddressLauncher.Configuration.appearance](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet.addresselement/-address-launcher/-configuration/index.html) konfigurieren. ## Optional: Standardabrechnungsdetails festlegen 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() ``` ## Optional: Erfassung der Abrechnungsdetails anpassen ### 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. # React Native > This is a React Native for when payment-ui is mobile and platform is react-native. View the full page at https://docs.stripe.com/payments/mobile/collect-addresses?payment-ui=mobile&platform=react-native. Um vollständige Adressen für die Abrechnung oder den Versand zu erfassen, verwenden Sie das [Address Element](https://docs.stripe.com/payments/mobile/address-element.md). Sie können das Address Element auch für Folgendes nutzen: - Erfassen Sie [Telefonnummern](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet.addresselement/-address-launcher/-additional-fields-configuration/index.html) von Kundinnen/Kunden - Aktivieren Sie die [automatische Vervollständigung](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet.addresselement/-address-launcher/-configuration/index.html) - Füllen Sie Rechnungsinformationen vorab im Payment Element aus, indem Sie eine Versandadresse eingeben Stripe kombiniert die erfassten Adressinformationen und die Zahlungsmethode, um einen PaymentIntent *PaymentIntent* (API object that represents your intent to collect payment from a customer, tracking charge attempts and payment state changes throughout the process) zu erstellen. ![Beispiele für einen Bezahlvorgang, bei dem Nutzer/innen die Option „Versandadresse hinzufügen“ auswählen. Anschließend werden sie zu einer neuen Seite weitergeleitet, auf der sie ihre Versandadresse in ein Formular eingeben können (während der Eingabe der Adresse werden Vorschläge zur automatischen Vervollständigung angezeigt).](https://b.stripecdn.com/docs-statics-srv/assets/android-overview.6061212dc737aa700b79242cb5f77782.png) ## Stripe einrichten [Serverseitig] [Clientseitig] 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 Sie keine weiteren Abhängigkeiten installieren. ### 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. ```javascript import { StripeProvider } from '@stripe/stripe-react-native'; function App() { 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. ## Vorschläge zur automatischen Vervollständigung von Adressen einrichten Die automatische Vervollständigung ist standardmäßig unter iOS aktiviert, aber um Autovervollständigungsvorschläge unter Android zu aktivieren, müssen Sie die [Google Places SDK](https://developers.google.com/maps/documentation/places/android-sdk/overview)-Abhängigkeit in der Datei `build.gradle` Ihrer App berücksichtigen: #### Groovy ```groovy dependencies { implementation 'com.google.android.libraries.places:places:2.6.0' } ``` Für Vorschläge zur automatischen Vervollständigung von Adressen ist ein Google Places-API-Schlüssel erforderlich. Befolgen Sie die [Einrichtungsanleitung für das Google Places SDK](https://developers.google.com/maps/documentation/places/android-sdk/cloud-setup), um Ihren API-Schlüssel zu generieren. ## Address Element konfigurieren Sie können das Address Element mit Details wie der Anzeige von Standardwerten, der Festlegung zulässiger Länder, der Anpassung des Erscheinungsbilds usw. konfigurieren. Weitere Informationen finden Sie in der [Liste der verfügbaren Optionen](https://github.com/stripe/stripe-react-native/blob/master/src/components/AddressSheet.tsx#L19-L51). ```jsx ``` ## Address Element vorlegen und Details abrufen Rufen Sie die Adressdetails ab, indem Sie die Eigenschaft `visible` auf `true` festlegen und Callback-Methoden für die Eigenschaften `onSubmit` und `onError` hinzufügen: ```jsx { // Make sure to set `visible` back to false to dismiss the address element. setAddressSheetVisible(false); // Handle result and update your UI }} onError={(error) => { if (error.code === AddressSheetError.Failed) { Alert.alert('There was an error.', 'Check the logs for details.'); console.log(err?.localizedMessage); } // Make sure to set `visible` back to false to dismiss the address element. setAddressSheetVisible(false); }} /> ``` ## Optional: Versandadressen im Payment Element vorab eingeben Wenn Sie das mobile Payment Element verwenden, setzen Sie [defaultShippingDetails](https://github.com/stripe/stripe-react-native/blob/address-element-private-beta/src/types/PaymentSheet.ts#L17) auf die Adresse, die über das Adressenelement erfasst wurde. Sobald `defaultShippingDetails` ausgefüllt ist, wird die Rechnungsadresse der Kundinnen und Kunden automatisch vorausgefüllt und sie sehen ein Kontrollkästchen **Rechnungsadresse entspricht Lieferadresse**. Bestätigte PaymentIntents mit ausgefüllten `defaultShippingDetails` enthalten zudem die Eigenschaft [shipping](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-shipping) intent, sobald der PaymentIntent bestätigt wird. ```jsx const { error } = await initPaymentSheet({ ... defaultShippingDetails: addressDetails, }); ``` ## Optional: Erscheinungsbild anpassen Nachdem Sie das Address Element zu Ihrer App hinzugefügt haben, können Sie dessen Darstellung an das Design der übrigen App anpassen. Sie können die Darstellung über die [Appearance-API](https://docs.stripe.com/elements/appearance-api/mobile.md?platform=react-native) mithilfe der Komponente `appearance` property on the `` konfigurieren. ## Optional: Standardabrechnungsdetails festlegen Um Standardwerte für die im PaymentSheet erfassten Rechnungsdetails festzulegen, konfigurieren Sie die Eigenschaft `defaultBillingDetails`. Das `PaymentSheet` füllt seine Felder vorab mit den von Ihnen angegebenen Werten aus. ```javascript await initPaymentSheet({ // ... defaultBillingDetails: { email: 'foo@bar.com', address: { country: 'US', }, }, }); ``` ## Optional: Erfassung der Abrechnungsdetails anpassen Verwenden Sie `billingDetailsCollectionConfiguration`, 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 nicht beabsichtigen, die Werte zu erfassen, die für die Zahlungsmethode erforderlich sind, müssen Sie Folgendes tun: 1. Hängen Sie die Werte, die nicht von `PaymentSheet` erfasst werden, an die Eigenschaft `defaultBillingDetails` an. 1. Legen Sie `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` auf `true` fest. ```javascript await initPaymentSheet({ // ... defaultBillingDetails: { email: 'foo@bar.com', }, billingDetailsCollectionConfiguration: { name: PaymentSheet.CollectionMode.ALWAYS, email: PaymentSheet.CollectionMode.NEVER, address: PaymentSheet.AddressCollectionMode.FULL, 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.