# Zahlungen per EPS akzeptieren So akzeptieren Sie Zahlungen per EPS, einer gängigen Zahlungsmethode in Österreich. # Checkout > This is a Checkout for when payment-ui is checkout. View the full page at https://docs.stripe.com/payments/eps/accept-a-payment?payment-ui=checkout. > Stripe kann Ihren Kundinnen und Kunden automatisch die relevanten Zahlungsmethoden anzeigen, indem Währungen, Einschränkungen der Zahlungsmethode und andere Parameter ausgewertet werden. > > - Befolgen Sie den Leitfaden [Eine Zahlung akzeptieren](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=checkout&ui=stripe-hosted), um eine Checkout-Integration zu erstellen, die [dynamische Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md) verwendet. - Wenn Sie keine dynamischen Zahlungsmethoden verwenden möchten, befolgen Sie die folgenden Schritte, um die Zahlungsmethoden in Ihrer Checkout-Integration manuell zu konfigurieren. Bei EPS handelt es sich um eine Zahlungsmethode für die [einmalige Nutzung](https://docs.stripe.com/payments/payment-methods.md#usage), bei der Kundinnen/Kunden ihre Zahlungen [authentifizieren](https://docs.stripe.com/payments/payment-methods.md#customer-actions) müssen. Bei Zahlungen mit EPS werden *Kundinnen/Kunden* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) zur Autorisierung der Zahlung von Ihrer Website weggeleitet und dann wieder auf Ihre Website zurückgeleitet, wo Sie eine [sofortige Benachrichtigung](https://docs.stripe.com/payments/payment-methods.md#payment-notification) über den Erfolg oder das Fehlschlagen der Zahlung erhalten. > Bei der Nutzung von EPS gelten die [Allgemeinen Geschäftsbedingungen zu EPS](https://stripe.com/eps/legal). ## Kompatibilität bestimmen **Unterstützte Unternehmensstandorte**: Europe, US, CA, NZ, SG, HK, JP, AU, MX **Unterstützte Währungen**: `eur` **Transaktionswährungen**: `eur` **Zahlungsmodus**: Yes **Einrichtungsmodus**: No **Abonnementmodus**: No Für die Unterstützung von Zahlungen per EPS muss eine Checkout-Sitzung alle folgenden Bedingungen erfüllen: - Die *Preise* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) sämtlicher Posten müssen in derselben Währung sein. Falls Posten in verschiedenen Währungen vorhanden sind, muss für jede Währung eine separate Checkout-Sitzung erstellt werden. - Sie können nur einmalige Posten verwenden (wiederkehrende *Abonnement* (A Subscription represents the product details associated with the plan that your customer subscribes to. Allows you to charge the customer on a recurring basis)pläne werden nicht unterstützt). ## Zahlung akzeptieren > Erstellen Sie zunächst eine Integration, um mit Checkout [Zahlungen anzunehmen](https://docs.stripe.com/payments/accept-a-payment.md?integration=checkout), bevor Sie mit diesem Leitfaden fortfahren. Das führt Sie durch die Aktivierung von EPS und zeigt die Unterschiede zwischen dem Akzeptieren von Zahlungen mit dynamischen Zahlungsmethoden und dem manuellen Konfigurieren von Zahlungsmethoden. ### EPS als Zahlungsmethode aktivieren Führen Sie bei der Erstellung einer neuen [Checkout-Sitzung](https://docs.stripe.com/api/checkout/sessions.md) folgende Schritte aus: 1. Fügen Sie `eps` zur Liste der `payment_method_types` hinzu. 1. Stellen Sie sicher, dass alle `line_items` die Währung `eur` verwenden. #### Von Stripe gehostete Seite ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price_data][currency]=eur" \ -d "line_items[0][price_data][product_data][name]=T-shirt" \ -d "line_items[0][price_data][unit_amount]=2000" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ -d "payment_method_types[0]=card" \ -d "payment_method_types[1]=eps" \ --data-urlencode "success_url=https://example.com/success" ``` #### Eingebettetes Formular ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price_data][currency]=eur" \ -d "line_items[0][price_data][product_data][name]=T-shirt" \ -d "line_items[0][price_data][unit_amount]=2000" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ -d "payment_method_types[0]=card" \ -d "payment_method_types[1]=eps" \ --data-urlencode "return_url=https://example.com/return" \ -d ui_mode=embedded_page ``` ### Abwicklung Ihrer Bestellungen Informieren Sie sich über die [Ausführung von Bestellungen](https://docs.stripe.com/checkout/fulfillment.md), nachdem Sie eine Zahlung angenommen haben. ## Integration testen Wählen Sie beim Testen Ihrer Checkout-Integration „EPS“ als Zahlungsmethode aus und klicken Sie auf **Bezahlen**. ## Mit Rückerstattungen und angefochtenen Zahlungen umgehen Das Rückerstattungszeitfenster für EPS beträgt bis zu 180 Tage nach der Zahlung. Es gibt kein Verfahren für angefochtene Zahlungen. Kund/innen authentifizieren sich über ihre Bank. ## See also - [Checkout-Ausführung](https://docs.stripe.com/checkout/fulfillment.md) - [Checkout anpassen](https://docs.stripe.com/payments/checkout/customization.md) # iOS > This is a iOS for when payment-ui is mobile and platform is ios. View the full page at https://docs.stripe.com/payments/eps/accept-a-payment?payment-ui=mobile&platform=ios. Bei EPS handelt es sich um eine Zahlungsmethode für die [einmalige Nutzung](https://docs.stripe.com/payments/payment-methods.md#usage), bei der Kundinnen/Kunden ihre Zahlungen [authentifizieren](https://docs.stripe.com/payments/payment-methods.md#customer-actions) müssen. Bei Zahlungen mit EPS werden *Kundinnen/Kunden* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) zur Autorisierung der Zahlung von Ihrer Website weggeleitet und dann wieder auf Ihre Website zurückgeleitet, wo Sie eine [sofortige Benachrichtigung](https://docs.stripe.com/payments/payment-methods.md#payment-notification) über den Erfolg oder das Fehlschlagen der Zahlung erhalten. > Bei der Nutzung von EPS gelten die [Allgemeinen Geschäftsbedingungen zu EPS](https://stripe.com/eps/legal). ## Stripe einrichten [Serverseitig] [Clientseitig] Zunächst benötigen Sie ein Stripe-Konto. [Registrieren Sie sich jetzt](https://dashboard.stripe.com/register). ### Serverseitig Diese Integration erfordert Endpoints auf Ihrem Server, die mit der Stripe-API kommunizieren können. Nutzen Sie die offiziellen Bibliotheken für den Zugriff auf die Stripe-API von Ihrem Server aus: #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ### Clientseitig Das [Stripe 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 **StripePaymentsUI** 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 'StripePaymentsUI' ``` 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 StripePaymentsUI ``` #### 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/StripePaymentsUI/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 **StripePaymentsUI.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/StripePaymentsUI/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 UIKitimportStripePaymentsUI @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. ## PaymentIntent erstellen [Serverseitig] [Clientseitig] Ein [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) stellt Ihre Absicht dar, Zahlungen von Kundinnen und Kunden einzuziehen, und dokumentiert den gesamten Zahlungsvorgang. ### Serverseitig Erstellen Sie einen `PaymentIntent` auf Ihrem Server und geben Sie den einzuziehenden `amount` und die Währung `eur` an (EPS unterstützt keine anderen Währungen). Wenn Sie über eine bestehende [Payment Intents](https://docs.stripe.com/payments/payment-intents.md)-Integration verfügen, fügen Sie `eps` der Liste der [Arten von Zahlungsmethoden](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types) hinzu. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=eur \ -d "payment_method_types[]=eps" ``` ### Clientseitig Fordern Sie auf dem Client einen PaymentIntent von Ihrem Server an und speichern Sie sein Client-Geheimnis. #### Swift ```swift class CheckoutViewController: UIViewController { var paymentIntentClientSecret: String? func startCheckout() { // Request a PaymentIntent from your server and store its client secret } } ``` ## Angaben zur Zahlungsmethode erfassen [Clientseitig] Erfassen Sie in Ihrer App den vollständige Namen der Kundin/des Kunden. #### Swift ```swift class CheckoutViewController: UIViewController { private let nameField: UITextField = UITextField() // ... override func viewDidLoad() { super.viewDidLoad() nameField.textContentType = .name nameField.translatesAutoresizingMaskIntoConstraints = false view.addSubview(nameField) // ... } // ... } ``` ## Zahlung an Stripe senden [Clientseitig] Rufen Sie das Client-Geheimnis von der von Ihnen erstellten PaymentIntent ab, erstellen Sie ein [STPPaymentMethodBillingDetails](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentMethodBillingDetails.html) mit den Rechnungsdetails und rufen Sie [STPPaymentHandler confirmPayment](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentHandler.html#/c:@M@StripePayments@objc\(cs\)STPPaymentHandler\(im\)confirmPayment:withAuthenticationContext:completion:) auf. Dies zeigt eine Webansicht an, in der der/die Kund/in die Zahlung abschließen kann. Nach Abschluss wird der Completion-Block mit dem Ergebnis der Zahlung aufgerufen. #### Swift ```swift let paymentIntentParams = STPPaymentIntentParams(clientSecret: paymentIntentClientSecret) let billingDetails = STPPaymentMethodBillingDetails() billingDetails.name = nameField.text // EPS doesn't require additional parameters so we only need to pass the init-ed // STPPaymentMethoEPSParams instance to STPPaymentMethodParams let eps = STPPaymentMethodEPSParams() let paymentMethodParams = STPPaymentMethodParams(eps: eps, billingDetails: billingDetails, metadata: nil) paymentIntentParams.paymentMethodParams = paymentMethodParams STPPaymentHandler.shared().confirmPayment(paymentIntentParams, with: self) { (handlerStatus, paymentIntent, error) in switch handlerStatus { case .succeeded: // Payment succeeded // ... case .canceled: // Payment canceled // ... case .failed: // Payment failed // ... @unknown default: fatalError() } } ``` ## Optional: Ereignisse nach Zahlung verarbeiten Stripe übermittelt ein [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie im Dashboard einen *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) oder eine Partnerlösung, um diese Ereignisse zu empfangen und Aktionen auszuführen (Versenden einer Bestellbestätigung per E-Mail an die Kund/innen, Erfassen des Verkaufs in einer Datenbank oder Einleiten des Versandablaufs). Überwachen Sie diese Ereignisse, statt auf einen Callback vom Client zu warten. Auf dem Client könnte der Kunde/die Kundin das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist und böswillige Clients könnten die Antwort manipulieren. Wenn Sie Ihre Integration so einrichten, dass asynchrone Ereignisse überwacht werden, hilft Ihnen dies auch dabei, in Zukunft mehr Zahlungsmethoden zu akzeptieren. Hier erhalten Sie Informationen zu den [Unterschieden zwischen allen unterstützten Zahlungsmethoden](https://stripe.com/payments/payment-methods-guide). ### Ereignisse empfangen und Geschäftsaktionen ausführen Es gibt mehrere Möglichkeiten, Geschäftsaktionen zu empfangen und auszuführen. #### Manuell Verwenden Sie das Stripe-Dashboard, um alle Stripe-Zahlungen anzuzeigen, Zahlungsbelege per E-Mail zu senden, Auszahlungen abzuwickeln oder fehlgeschlagene Zahlungen erneut durchzuführen. - [Testzahlungen im Dashboard anzeigen](https://dashboard.stripe.com/test/payments) #### Benutzerdefinierter Code Erstellen Sie einen Webhook-Handler, um Ereignisse zu überwachen und benutzerdefinierte asynchrone Zahlungsabläufe zu erstellen. Mit der Stripe-CLI können Sie Ihre Webhook-Integration lokal testen und Fehler beheben. - [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) #### Vorgefertigte Apps Verarbeiten Sie häufige Geschäftsereignisse, wie [Automatisierung](https://stripe.partners/?f_category=automation) oder [Marketing und Vertrieb](https://stripe.partners/?f_category=marketing-and-sales) durch Integration einer Partneranwendung. # 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/eps/accept-a-payment?payment-ui=mobile&platform=android. Bei EPS handelt es sich um eine Zahlungsmethode für die [einmalige Nutzung](https://docs.stripe.com/payments/payment-methods.md#usage), bei der Kundinnen/Kunden ihre Zahlungen [authentifizieren](https://docs.stripe.com/payments/payment-methods.md#customer-actions) müssen. Bei Zahlungen mit EPS werden *Kundinnen/Kunden* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) zur Autorisierung der Zahlung von Ihrer Website weggeleitet und dann wieder auf Ihre Website zurückgeleitet, wo Sie eine [sofortige Benachrichtigung](https://docs.stripe.com/payments/payment-methods.md#payment-notification) über den Erfolg oder das Fehlschlagen der Zahlung erhalten. > Bei der Nutzung von EPS gelten die [Allgemeinen Geschäftsbedingungen zu EPS](https://stripe.com/eps/legal). ## Stripe einrichten [Serverseitig] [Clientseitig] Zunächst benötigen Sie ein Stripe-Konto. [Registrieren Sie sich jetzt](https://dashboard.stripe.com/register). ### Serverseitig Diese Integration erfordert Endpoints auf Ihrem Server, die mit der Stripe-API kommunizieren können. Nutzen Sie diese offiziellen Bibliotheken für den Zugriff auf die Stripe-API von Ihrem Server aus: #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ### Clientseitig Das [Stripe Android SDK](https://github.com/stripe/stripe-android) ist Open Source und [vollständig dokumentiert](https://stripe.dev/stripe-android/). Um das SDK zu installieren, fügen Sie `stripe-android` in den Block `dependencies` Ihrer [app/build.gradle](https://developer.android.com/studio/build/dependencies)-Datei ein: #### Kotlin ```kotlin plugins { id("com.android.application") } android { ... } dependencies { // ... // Stripe Android SDK implementation("com.stripe:stripe-android:23.3.0") // Include the financial connections SDK to support US bank account as a payment method implementation("com.stripe:financial-connections:23.3.0") } ``` > Details zur aktuellen SDK-Version und zu vorherigen Versionen finden Sie auf der Seite [Releases](https://github.com/stripe/stripe-android/releases) auf GitHub. Um bei Veröffentlichung eines neuen Release eine Benachrichtigung zu erhalten, [beobachten Sie Veröffentlichungen für das jeweilige Repository](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository). 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. Stripe-Beispiele nutzen auch [OkHttp](https://github.com/square/okhttp) und [GSON](https://github.com/google/gson), um HTTP-Anfragen an einen Server zu stellen. ## PaymentIntent erstellen [Serverseitig] [Clientseitig] Ein [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) stellt Ihre Absicht dar, Zahlungen von Kundinnen und Kunden einzuziehen, und dokumentiert den gesamten Zahlungsvorgang. ### Serverseitig Erstellen Sie einen `PaymentIntent` auf Ihrem Server und geben Sie den einzuziehenden `amount` und die Währung `eur` an (EPS unterstützt keine anderen Währungen). Wenn Sie über eine bestehende [Payment Intents](https://docs.stripe.com/payments/payment-intents.md)-Integration verfügen, fügen Sie `eps` der Liste der [Arten von Zahlungsmethoden](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types) hinzu. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=eur \ -d "payment_method_types[]=eps" ``` ### Clientseitig Fordern Sie auf dem Client einen PaymentIntent von Ihrem Server an und speichern Sie sein Client-Geheimnis. #### Kotlin ```kotlin class EpsPaymentActivity: AppCompatActivity() { private lateinit var paymentIntentClientSecret: String override fun onCreate(savedInstanceState: Bundle?) { // ... startCheckout() } private fun startCheckout() { // Request a PaymentIntent from your server and store its client secret } } ``` ## Angaben zur Zahlungsmethode erfassen [Clientseitig] Erfassen Sie in Ihrer App den vollständigen Namen der Kundin/des Kunden und erstellen Sie ein `PaymentMethodCreateParams` mit den Details. #### Kotlin ```kotlin val billingDetails = PaymentMethod.BillingDetails(name = "Jenny Rosen") val paymentMethodCreateParams = PaymentMethodCreateParams.createEps(billingDetails) ``` ## Zahlung an Stripe senden [Clientseitig] Rufen Sie vom erstellten PaymentIntent das Client-Geheimnis ab und rufen Sie [PaymentLauncher bestätigen](https://stripe.dev/stripe-android/payments-core/com.stripe.android.payments.paymentlauncher/-payment-launcher/index.html#74063765%2FFunctions%2F-1622557690) auf. Dies entspricht einer Webansicht, über die die Kund/innen die Zahlung durchführen können. Nach Abschluss wird `onPaymentResult` mit dem Ergebnis der Zahlung aufgerufen. #### Kotlin ```kotlin class EpsPaymentActivity : AppCompatActivity() { // ... private lateinit var paymentIntentClientSecret: String private val paymentLauncher: PaymentLauncher by lazy { val paymentConfiguration = PaymentConfiguration.getInstance(applicationContext) PaymentLauncher.Companion.create( this, paymentConfiguration.publishableKey, paymentConfiguration.stripeAccountId, ::onPaymentResult ) } private fun startCheckout() { // ... val confirmParams = ConfirmPaymentIntentParams .createWithPaymentMethodCreateParams( paymentMethodCreateParams = paymentMethodCreateParams, clientSecret = paymentIntentClientSecret ) paymentLauncher.confirm(confirmParams) } private fun onPaymentResult(paymentResult: PaymentResult) { when (paymentResult) { is PaymentResult.Completed -> { // show success UI } is PaymentResult.Canceled -> { // handle cancel flow } is PaymentResult.Failed -> { // handle failures // (for example, the customer might need to choose a new payment // method) } } } } ``` ## Optional: Ereignisse nach Zahlung verarbeiten Stripe übermittelt ein [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie im Dashboard einen *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) oder eine Partnerlösung, um diese Ereignisse zu empfangen und Aktionen auszuführen (Versenden einer Bestellbestätigung per E-Mail an die Kund/innen, Erfassen des Verkaufs in einer Datenbank oder Einleiten des Versandablaufs). Überwachen Sie diese Ereignisse, statt auf einen Callback vom Client zu warten. Auf dem Client könnte der Kunde/die Kundin das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist und böswillige Clients könnten die Antwort manipulieren. Wenn Sie Ihre Integration so einrichten, dass asynchrone Ereignisse überwacht werden, hilft Ihnen dies auch dabei, in Zukunft mehr Zahlungsmethoden zu akzeptieren. Hier erhalten Sie Informationen zu den [Unterschieden zwischen allen unterstützten Zahlungsmethoden](https://stripe.com/payments/payment-methods-guide). ### Ereignisse empfangen und Geschäftsaktionen ausführen Es gibt mehrere Möglichkeiten, Geschäftsaktionen zu empfangen und auszuführen. #### Manuell Verwenden Sie das Stripe-Dashboard, um alle Stripe-Zahlungen anzuzeigen, Zahlungsbelege per E-Mail zu senden, Auszahlungen abzuwickeln oder fehlgeschlagene Zahlungen erneut durchzuführen. - [Testzahlungen im Dashboard anzeigen](https://dashboard.stripe.com/test/payments) #### Benutzerdefinierter Code Erstellen Sie einen Webhook-Handler, um Ereignisse zu überwachen und benutzerdefinierte asynchrone Zahlungsabläufe zu erstellen. Mit der Stripe-CLI können Sie Ihre Webhook-Integration lokal testen und Fehler beheben. - [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) #### Vorgefertigte Apps Verarbeiten Sie häufige Geschäftsereignisse, wie [Automatisierung](https://stripe.partners/?f_category=automation) oder [Marketing und Vertrieb](https://stripe.partners/?f_category=marketing-and-sales) durch Integration einer Partneranwendung. # 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/eps/accept-a-payment?payment-ui=mobile&platform=react-native. Bei EPS handelt es sich um eine Zahlungsmethode für die [einmalige Nutzung](https://docs.stripe.com/payments/payment-methods.md#usage), bei der Kundinnen/Kunden ihre Zahlungen [authentifizieren](https://docs.stripe.com/payments/payment-methods.md#customer-actions) müssen. Bei Zahlungen mit EPS werden *Kundinnen/Kunden* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) zur Autorisierung der Zahlung von Ihrer Website weggeleitet und dann wieder auf Ihre Website zurückgeleitet, wo Sie eine [sofortige Benachrichtigung](https://docs.stripe.com/payments/payment-methods.md#payment-notification) über den Erfolg oder das Fehlschlagen der Zahlung erhalten. > Bei der Nutzung von EPS gelten die [Allgemeinen Geschäftsbedingungen zu EPS](https://stripe.com/eps/legal). ## Stripe einrichten [Serverseitig] [Clientseitig] ### Serverseitig Diese Integration erfordert Endpoints auf Ihrem Server, die mit der Stripe-API kommunizieren können. Nutzen Sie unsere offiziellen Bibliotheken für den Zugriff auf die Stripe-API von Ihrem Server aus: #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ### Clientseitig Das [React Native SDK](https://github.com/stripe/stripe-react-native) ist Open Source und vollständig dokumentiert. Intern werden [native iOS](https://github.com/stripe/stripe-ios) und [Android](https://github.com/stripe/stripe-android) SDKs verwendet. Um das React Native SDK von Stripe zu installieren, führen Sie einen der folgenden Befehle im Verzeichnis Ihres Projekts aus (je nachdem, welchen Paket-Manager Sie verwenden): #### yarn ```bash yarn add @stripe/stripe-react-native ``` #### npm ```bash npm install @stripe/stripe-react-native ``` Installieren Sie als Nächstes einige weitere erforderliche Abhängigkeiten: - Für iOS wechseln Sie in das Verzeichnis **ios** und führen Sie `pod install` aus, um sicherzustellen, dass Sie auch die erforderlichen nativen Dependencies installiert haben. - Für Android müssen keine Abhängigkeiten mehr installiert werden. > Wir empfehlen Ihnen, die [offizielle Anleitung zu TypeScript](https://reactnative.dev/docs/typescript#adding-typescript-to-an-existing-project) zu befolgen, um TypeScript zu unterstützen. ### Stripe Initialisierung Um Stripe in Ihrer React Native-App zu initialisieren, umschließen Sie entweder Ihren Zahlungsbildschirm mit der Komponente `StripeProvider` oder verwenden Sie die Initialisierungsmethode `initStripe`. Nur der [veröffentlichbare API-Schlüssel](https://docs.stripe.com/keys.md#obtain-api-keys) in `publishableKey` ist erforderlich. Das folgende Beispiel zeigt, wie Stripe mithilfe der Komponente `StripeProvider` initialisiert wird. ```jsx import { useState, useEffect } from 'react'; import { StripeProvider } from '@stripe/stripe-react-native'; function App() { const [publishableKey, setPublishableKey] = useState(''); const fetchPublishableKey = async () => { const key = await fetchKey(); // fetch key from your server here setPublishableKey(key); }; useEffect(() => { fetchPublishableKey(); }, []); return ( {/* Your app code here */} ); } ``` > Verwenden Sie Ihre API-[Testschlüssel](https://docs.stripe.com/keys.md#obtain-api-keys) beim Testen und Entwickeln Ihrer App und Ihre [Live-Modus](https://docs.stripe.com/keys.md#test-live-modes)-Schlüssel beim Veröffentlichen Ihrer App. ## PaymentIntent erstellen [Serverseitig] [Clientseitig] Ein [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) stellt Ihre Absicht dar, Zahlungen von Kundinnen und Kunden einzuziehen, und dokumentiert den gesamten Zahlungsvorgang. ### Serverseitig Erstellen Sie einen `PaymentIntent` auf Ihrem Server und geben Sie den einzuziehenden `amount` und die Währung `eur` an (EPS unterstützt keine anderen Währungen). Wenn Sie über eine bestehende [Payment Intents](https://docs.stripe.com/payments/payment-intents.md)-Integration verfügen, fügen Sie `eps` der Liste der [Arten von Zahlungsmethoden](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types) hinzu. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=eur \ -d "payment_method_types[]=eps" ``` ### Clientseitig Fordern Sie auf dem Client einen PaymentIntent von Ihrem Server an und speichern Sie sein Client-Geheimnis. ```javascript const fetchPaymentIntentClientSecret = async () => { const response = await fetch(`${API_URL}/create-payment-intent`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ currency: 'eur', payment_method_types: ['eps'], }), }); const { clientSecret, error } = await response.json(); return { clientSecret, error }; }; ``` ## Angaben zur Zahlungsmethode erfassen [Clientseitig] Erfassen Sie in Ihrer App den vollständige Namen der Kundin/des Kunden. ```javascript export default function EpsPaymentScreen() { const [name, setName] = useState(); const handlePayPress = async () => { // ... }; return ( setName(value.nativeEvent.text)} /> ); } ``` ## Zahlung an Stripe senden [Clientseitig] Rufen Sie das Client-Geheimnis von der erstellten PaymentIntent ab und rufen Sie `confirmPayment` auf. Dies entspricht einer Webansicht, in der die Kund/innen die Zahlung auf der Website oder in der App ihrer Bank durchführen können. Anschließend wird das Promise mit dem Ergebnis der Zahlung aufgelöst. ```javascript export default function EPSPaymentScreen() { const [name, setName] = useState(); const handlePayPress = async () => { const billingDetails: PaymentMethodCreateParams.BillingDetails = { name, }; }; const { error, paymentIntent } = await confirmPayment(clientSecret, { paymentMethodType: 'Eps', paymentMethodData: { billingDetails, } }); if (error) { Alert.alert(`Error code: ${error.code}`, error.message); } else if (paymentIntent) { Alert.alert( 'Success', `The payment was confirmed successfully! currency: ${paymentIntent.currency}` ); } return ( setName(value.nativeEvent.text)} /> ); } ``` ## Optional: Ereignisse nach Zahlung verarbeiten Stripe übermittelt ein [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie im Dashboard einen *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) oder eine Partnerlösung, um diese Ereignisse zu empfangen und Aktionen auszuführen (Versenden einer Bestellbestätigung per E-Mail an die Kund/innen, Erfassen des Verkaufs in einer Datenbank oder Einleiten des Versandablaufs). Überwachen Sie diese Ereignisse, statt auf einen Callback vom Client zu warten. Auf dem Client könnte der Kunde/die Kundin das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist und böswillige Clients könnten die Antwort manipulieren. Wenn Sie Ihre Integration so einrichten, dass asynchrone Ereignisse überwacht werden, hilft Ihnen dies auch dabei, in Zukunft mehr Zahlungsmethoden zu akzeptieren. Hier erhalten Sie Informationen zu den [Unterschieden zwischen allen unterstützten Zahlungsmethoden](https://stripe.com/payments/payment-methods-guide). ### Ereignisse empfangen und Geschäftsaktionen ausführen Es gibt mehrere Möglichkeiten, Geschäftsaktionen zu empfangen und auszuführen. #### Manuell Verwenden Sie das Stripe-Dashboard, um alle Stripe-Zahlungen anzuzeigen, Zahlungsbelege per E-Mail zu senden, Auszahlungen abzuwickeln oder fehlgeschlagene Zahlungen erneut durchzuführen. - [Testzahlungen im Dashboard anzeigen](https://dashboard.stripe.com/test/payments) #### Benutzerdefinierter Code Erstellen Sie einen Webhook-Handler, um Ereignisse zu überwachen und benutzerdefinierte asynchrone Zahlungsabläufe zu erstellen. Mit der Stripe-CLI können Sie Ihre Webhook-Integration lokal testen und Fehler beheben. - [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) #### Vorgefertigte Apps Verarbeiten Sie häufige Geschäftsereignisse, wie [Automatisierung](https://stripe.partners/?f_category=automation) oder [Marketing und Vertrieb](https://stripe.partners/?f_category=marketing-and-sales) durch Integration einer Partneranwendung. ## Optional: Umgang mit Deep Linking Wenn Kundinnen/Kunden Ihre App verlassen (zum Beispiel um sich in Safari oder ihrer Banking-App zu authentifizieren), bieten Sie ihnen eine Möglichkeit, automatisch zu Ihrer App zurückzukehren. Für viele Arten von Zahlungsmethoden *ist* eine Rückgabe-URL erforderlich. Wenn Sie keine angeben, können wir Ihren Nutzer/innen keine Zahlungsmethoden anbieten, für die eine Rückgabe-URL erforderlich ist, selbst wenn Sie diese aktiviert haben. So geben Sie eine Rückgabe-URL an: 1. [Registrieren](https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app#Register-your-URL-scheme) Sie eine benutzerdefinierte URL. Universelle Links werden nicht unterstützt. 1. [Konfigurieren](https://reactnative.dev/docs/linking) Sie Ihre benutzerdefinierte URL. 1. Richten Sie Ihre Root-Komponente so ein, dass sie die URL an das Stripe SDK weitergibt, wie unten gezeigt. > Wenn Sie Expo verwenden, [stellen Sie Ihr Schema](https://docs.expo.io/guides/linking/#in-a-standalone-app) in der Datei `app.json` ein. ```jsx import { useEffect, useCallback } from 'react'; import { Linking } from 'react-native'; import { useStripe } from '@stripe/stripe-react-native'; export default function MyApp() { const { handleURLCallback } = useStripe(); const handleDeepLink = useCallback( async (url: string | null) => { if (url) { const stripeHandled = await handleURLCallback(url); if (stripeHandled) { // This was a Stripe URL - you can return or add extra handling here as you see fit } else { // This was NOT a Stripe URL – handle as you normally would } } }, [handleURLCallback] ); useEffect(() => { const getUrlAsync = async () => { const initialUrl = await Linking.getInitialURL(); handleDeepLink(initialUrl); }; getUrlAsync(); const deepLinkListener = Linking.addEventListener( 'url', (event: { url: string }) => { handleDeepLink(event.url); } ); return () => deepLinkListener.remove(); }, [handleDeepLink]); return ( ); } ``` Weitere Informationen zu nativen URL-Schemen finden Sie in der Dokumentation für [Android](https://developer.android.com/training/app-links/deep-linking) und [iOS](https://developer.apple.com/documentation/xcode/allowing_apps_and_websites_to_link_to_your_content/defining_a_custom_url_scheme_for_your_app). # Elements > This is a Elements for when payment-ui is elements. View the full page at https://docs.stripe.com/payments/eps/accept-a-payment?payment-ui=elements. > Der Inhalt dieses Abschnitts bezieht sich auf ein *Legacy* (Technology that's no longer recommended)-Produkt. Verwenden Sie den Leitfaden [Zahlungen akzeptieren](https://docs.stripe.com/payments/accept-a-payment.md) für den aktuellsten Integrationspfad. Auch wenn Stripe dieses Produkt jetzt noch unterstützt, kann sich dies ändern, wenn das Produkt nicht mehr unterstützt wird. Bei EPS handelt es sich um eine Zahlungsmethode für die [einmalige Nutzung](https://docs.stripe.com/payments/payment-methods.md#usage), bei der Kundinnen/Kunden ihre Zahlungen [authentifizieren](https://docs.stripe.com/payments/payment-methods.md#customer-actions) müssen. Bei Zahlungen mit EPS werden *Kundinnen/Kunden* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) zur Autorisierung der Zahlung von Ihrer Website weggeleitet und dann wieder auf Ihre Website zurückgeleitet, wo Sie eine [sofortige Benachrichtigung](https://docs.stripe.com/payments/payment-methods.md#payment-notification) über den Erfolg oder das Fehlschlagen der Zahlung erhalten. > Bei der Nutzung von EPS gelten die [Allgemeinen Geschäftsbedingungen zu EPS](https://stripe.com/eps/legal). ## Stripe einrichten [Serverseitig] Zunächst benötigen Sie ein Stripe-Konto. [Registrieren Sie sich jetzt](https://dashboard.stripe.com/register). Nutzen Sie unsere offiziellen Bibliotheken für den Zugriff auf die Stripe-API über Ihre Anwendung: #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ## PaymentIntent erstellen [Serverseitig] Ein [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) stellt Ihre Absicht dar, Zahlungen von Kundinnen und Kunden einzuziehen, und dokumentiert den gesamten Zahlungsvorgang. Erstellen Sie einen `PaymentIntent` auf Ihrem Server und geben Sie den einzuziehenden `amount` und die Währung `eur` an (EPS unterstützt keine anderen Währungen). Wenn Sie über eine bestehende [Payment Intents](https://docs.stripe.com/payments/payment-intents.md)-Integration verfügen, fügen Sie `eps` der Liste der [Arten von Zahlungsmethoden](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types) hinzu. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=eur \ -d "payment_method_types[]=eps" ``` ### Client-Geheimnis abrufen Im PaymentIntent ist ein *Client-Geheimnis* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) enthalten, das auf dem Client verwendet wird, um Zahlungen sicher abzuschließen. Es gibt verschiedene Verfahren zum Übergeben des Client-Geheimnisses an den Client. #### Einseitige Anwendung Rufen Sie das Client-Geheimnis von einem Endpoint auf Ihrem Server ab, indem Sie die Browser-Funktion `fetch` verwenden. Diese Vorgehensweise funktioniert am besten, wenn es sich bei Ihrer Client-Seite um eine einseitige Anwendung handelt, insbesondere wenn sie mit einem modernen Frontend-Framework wie React erstellt wurde. Erstellen Sie den Server-Endpoint, der das Client-Geheimnis bereitstellt: #### Ruby ```ruby get '/secret' do intent = # ... Create or retrieve the PaymentIntent {client_secret: intent.client_secret}.to_json end ``` Und dann rufen Sie das Client-Geheimnis mit JavaScript auf der Client-Seite ab: ```javascript (async () => { const response = await fetch('/secret'); const {client_secret: clientSecret} = await response.json(); // Render the form using the clientSecret })(); ``` #### Serverseitiges Rendering Übergeben Sie das Client-Geheimnis von Ihrem Server an den Client. Diese Vorgehensweise funktioniert am besten, wenn Ihre Anwendung statische Inhalte auf dem Server generiert, bevor sie an den Browser gesendet werden. Fügen Sie das [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) in Ihr Bezahlformular ein. Rufen Sie in Ihrem serverseitigen Code das Client-Geheimnis aus dem PaymentIntent ab: #### Ruby ```erb
``` ```ruby get '/checkout' do @intent = # ... Fetch or create the PaymentIntent erb :checkout end ``` ## Angaben zur Zahlungsmethode erfassen [Clientseitig] Sie können jetzt mit [Stripe Elements](https://docs.stripe.com/payments/elements.md) Zahlungsinformationen auf dem Client erfassen. Elements beinhaltet vorgefertigte Komponenten der Nutzeroberfläche zur Erfassung von Zahlungsdetails. Ein Stripe Element enthält ein iframe, dass die Zahlungsdaten über eine HTTPS-Verbindung sicher an Stripe sendet. Die Adresse der Bezahlseite muss ebenfalls mit https:// beginnen, nicht mit http://, damit Ihre Integration funktioniert. Sie können Ihre Integration ohne HTTPS testen. Dann müssen Sie das Protokoll aber [aktivieren](https://docs.stripe.com/security/guide.md#tls), bevor Sie Ihre ersten Live-Zahlungen empfangen. ### Stripe Elements einrichten #### HTML + JS Stripe Elements ist ein Feature von Stripe.js und steht damit automatisch zur Verfügung. Fügen Sie das Stripe.js-Skript auf Ihrer Zahlungsseite ein, indem Sie es in den `head` Ihrer HTML-Datei einbinden. Laden Sie Stripe.js immer direkt von js.stripe.com, um die PCI-Compliance zu gewährleisten. Fügen Sie das Skript nicht in ein Bundle ein und hosten Sie selbst keine Kopie davon. ```html Checkout ``` Erstellen Sie auf Ihrer Checkout-Seite mit dem folgenden JavaScript eine Instanz von Elements: ```javascript const stripe = Stripe('<>'); const elements = stripe.elements(); ``` ### epsBank Element hinzufügen und konfigurieren > Diese Dokumentation bezieht sich auf eine *Legacy* (Technology that's no longer recommended)-Funktion, die in der neuesten Version von Stripe.js nicht mehr verfügbar ist. Wir empfehlen die Nutzung des [Payment Element](https://docs.stripe.com/payments/payment-element.md), einer Web-UI-Komponente, die über 40 Zahlungsmethoden akzeptiert, Eingaben validiert und Fehler behandelt. Weisen Sie Elements in Ihrem Zahlungsformular einen festen Platz zu. Erstellen Sie in Ihrem Zahlungsformular leere DOM-Nodes (Container) mit eindeutigen IDs und übergeben Sie diese IDs dann an Elements. #### HTML ```html
``` Wenn das oben erwähnte Formular geladen wurde, [erstellen Sie eine Instanz](https://docs.stripe.com/js/elements_object/create_element?type=epsBank) des Elements `epsBank` und verbinden Sie sie mit dem oben erstellten Element-Container: ```javascript const options = { // Custom styling can be passed to options when creating an Element style: { base: { padding: '10px 12px', color: '#32325d', fontSize: '16px', '::placeholder': { color: '#aab7c4' }, }, }, }; // Create an instance of the epsBank Element const epsBank = elements.create('epsBank', options); // Add an instance of the epsBank Element into // the `eps-bank-element`
epsBank.mount('#eps-bank-element'); ``` Elements sind vollständig anpassbar. Sie können [Elements so konfigurieren](https://docs.stripe.com/js/elements_object/create_element?type=epsBank#elements_create-options), dass sie zum Erscheinungsbild Ihrer Website passen und den Bezahlvorgang für Ihre Kundinnen/Kunden weiter optimieren. Außerdem lassen sich verschiedene Eingabestatus konfigurieren, sodass z. B. sichtbar wird, wann der Fokus auf dem Element liegt. #### React #### npm Installieren Sie [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) und den [Stripe.js-Loader](https://www.npmjs.com/package/@stripe/stripe-js) aus dem öffentlichen npm-Register. ```bash npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` #### umd Wir stellen auch einen UMD-Build für Websites zur Verfügung, die weder npm noch Module verwenden. Binden Sie das Skript Stripe.js ein, das eine globale `Stripe`-Funktion exportiert, und den UMD-Build von React Stripe.js, der ein globales `ReactStripe`-Objekt exportiert. Laden Sie das Skript Stripe.js immer direkt von **js.stripe.com**, um PCI-konform zu bleiben. Fügen Sie das Skript nicht in ein Bundle ein, oder hosten Sie nicht selbst eine Kopie davon. ```html ``` > Mit der [Demo in CodeSandbox](https://codesandbox.io/s/react-stripe-official-q1loc?fontsize=14&hidenavigation=1&theme=dark) können Sie React Stripe.js ausprobieren, ohne ein neues Projekt erstellen zu müssen. ### Stripe.js und Elements zu Ihrer Seite hinzufügen Um Element-Komponenten zu verwenden, schließen Sie die Komponente Ihrer Bezahlseite in einen [Elements-Anbieter](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider) ein. Rufen Sie `loadStripe` mit Ihrem veröffentlichbaren Schlüssel auf und übergeben Sie das zurückgegebene `Promise` an den `Elements`-Anbieter. ```jsx import React from 'react'; import ReactDOM from 'react-dom'; import {Elements} from '@stripe/react-stripe-js'; import {loadStripe} from '@stripe/stripe-js'; import CheckoutForm from './CheckoutForm'; // Make sure to call `loadStripe` outside of a component's render to avoid // recreating the `Stripe` object on every render. const stripePromise = loadStripe('<>'); function App() { return ( ); }; ReactDOM.render(, document.getElementById('root')); ``` ### EpsBankElement-Komponente hinzufügen und konfigurieren Verwenden Sie das `EpsBankElement`, um Ihren Kund/innen die Auswahl einer bevorzugten Bank zu ermöglichen. #### JSX ```jsx /** * Use the CSS tab above to style your Element's container. */ import React from 'react'; import {EpsBankElement} from '@stripe/react-stripe-js'; import './EpsBankSectionStyles.css' const EPS_ELEMENT_OPTIONS = { // Custom styling can be passed to options when creating an Element style: { base: { padding: '10px 12px', color: '#32325d', fontSize: '16px', '::placeholder': { color: '#aab7c4' }, }, }, }; function EpsBankSection() { return ( ); }; export default EpsBankSection; ``` Elements sind vollständig anpassbar. Sie können [Elements so konfigurieren](https://docs.stripe.com/js/elements_object/create_element?type=epsBank#elements_create-options), dass sie zum Erscheinungsbild Ihrer Website passen und den Bezahlvorgang für Ihre Kundinnen/Kunden weiter optimieren. Außerdem lassen sich verschiedene Eingabestatus konfigurieren, sodass z. B. sichtbar wird, wann der Fokus auf dem Element liegt. ## Zahlung an Stripe senden [Clientseitig] Anstatt das gesamte PaymentIntent-Objekt an den Client zu senden, wird die Verwendung des [Client-Geheimnisses](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) empfohlen. Dies unterscheidet sich von Ihren API-Schlüsseln, die Stripe-API-Anfragen authentifizieren. Achten Sie auf einen vorsichtigen Umgang mit dem Client-Geheimnis, da mit ihm die Zahlung abgeschlossen werden kann. Es darf nicht protokolliert, in URLs eingebettet oder Personen außer der Kundin/dem Kunden selbst zugänglich gemacht werden. #### HTML + JS Verwenden Sie [stripe.confirmEpsPayment](https://docs.stripe.com/js/payment_intents/confirm_eps_payment), um die Weiterleitung von Ihrer Seite zu verarbeiten und die Zahlung zu ermöglichen. Fügen Sie dieser Funktion eine [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) hinzu, um das Ziel anzugeben, an das Nutzer/innen weitergeleitet werden, nachdem sie die Zahlung auf der Website oder in der App ihrer Bank durchgeführt haben. ```javascript const form = document.getElementById('payment-form'); const accountholderName = document.getElementById('accountholder-name'); form.addEventListener('submit', (event) => { event.preventDefault(); // Redirects away from the client const {error} = await stripe.confirmEpsPayment( '{{PAYMENT_INTENT_CLIENT_SECRET}}', { payment_method: { eps: epsBank, billing_details: { name: accountholderName.value, }, }, return_url: 'https://example.com/checkout/complete', } ); }); ``` #### React Verwenden Sie [stripe.confirmEpsPayment](https://docs.stripe.com/js/payment_intents/confirm_eps_payment), um die Weiterleitung von Ihrer Seite zu verarbeiten und die Zahlung zu ermöglichen. Fügen Sie dieser Funktion eine [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) hinzu, um das Ziel anzugeben, an das Nutzer/innen weitergeleitet werden, nachdem sie die Zahlung auf der Website oder in der App ihrer Bank durchgeführt haben. Verwenden Sie die Hooks [useStripe](https://docs.stripe.com/sdks/stripejs-react.md#usestripe-hook) and [useElements](https://docs.stripe.com/sdks/stripejs-react.md#useelements-hook), um `stripe.confirmEpsPayment` über die Komponente Ihres Zahlungsformulars aufzurufen. Wenn Sie herkömmliche Klassenkomponenten gegenüber Hooks bevorzugen, können Sie stattdessen einen [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md#elements-consumer) verwenden. #### Hooks ```jsx import React from 'react'; import {useStripe, useElements, EpsBankElement} from '@stripe/react-stripe-js'; import EpsBankSection from './EpsBankSection'; export default function CheckoutForm() { const stripe = useStripe(); const elements = useElements(); const handleSubmit = async (event) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); if (!stripe || !elements) { // Stripe.js hasn't yet loaded. // Make sure to disable form submission until Stripe.js has loaded. return; } const epsBank = elements.getElement(EpsBankElement); // For brevity, this example is using uncontrolled components for // the accountholder's name. In a real world app you will // probably want to use controlled components. // https://reactjs.org/docs/uncontrolled-components.html // https://reactjs.org/docs/forms.html#controlled-components const accountholderName = event.target['accountholder-name']; const {error} = await stripe.confirmEpsPayment('{CLIENT_SECRET}', { payment_method: { eps: epsBank, billing_details: { name: accountholderName.value, }, }, return_url: 'https://example.com/checkout/complete', }); if (error) { // Show error to your customer. console.log(error.message); } // Otherwise the customer will be redirected away from your // page to complete the payment with their bank. }; return (
); } ``` #### Klassenkomponenten ```jsx import React from 'react'; import {ElementsConsumer, EpsBankElement} from '@stripe/react-stripe-js'; import EpsBankSection from './EpsBankSection'; class CheckoutForm extends React.Component { handleSubmit = async (event) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); const {stripe, elements} = this.props if (!stripe || !elements) { // Stripe.js hasn't yet loaded. // Make sure to disable form submission until Stripe.js has loaded. return; } const epsBank = elements.getElement(EpsBankElement); // For brevity, this example is using uncontrolled components for // the accountholder's name. In a real world app you will // probably want to use controlled components. // https://reactjs.org/docs/uncontrolled-components.html // https://reactjs.org/docs/forms.html#controlled-components const accountholderName = event.target['accountholder-name']; const {error} = await stripe.confirmEpsPayment('{CLIENT_SECRET}', { payment_method: { eps: epsBank, billing_details: { name: accountholderName.value, }, }, return_url: 'https://example.com/checkout/complete', }); if (error) { // Show error to your customer. console.log(error.message); } // Otherwise the customer will be redirected away from your // page to complete the payment with their bank. }; render() { const {stripe} = this.props; return (
); } } export default function InjectedCheckoutForm() { return ( {({stripe, elements}) => ( )} ); } ``` Wenn Ihr Kunde/Ihre Kundin eine Zahlung übermittelt, leitet Stripe ihn an die `return_url` weiter und fügt die folgenden URL-Abfrageparameter ein. Die Rückgabeseite kann diese nutzen, um den Status des PaymentIntent abzurufen, damit der Kunde/die Kundin den Zahlungsstatus anzeigen kann. Wenn Sie die `return_url` angeben, können Sie auch Ihre eigenen Abfrageparameter für die Verwendung auf der Rückgabeseite anhängen. | Parameter | Beschreibung | | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `payment_intent` | Die eindeutige ID für den `PaymentIntent`. | | `payment_intent_client_secret` | Das [Client-Geheimnis](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) des `PaymentIntent`-Objekts. Bei Abonnementintegrationen wird dieses client_secret auch über [`confirmation_secret`](https://docs.stripe.com/api/invoices/object.md#invoice_object-confirmation_secret) im `Invoice`-Objekt sichtbar gemacht | Wenn Kundinnen und Kunden auf Ihre Seite weitergeleitet werden, können Sie `payment_intent_client_secret` nutzen, um den PaymentIntent abzufragen und Ihren Kundinnen und Kunden den Transaktionsstatus anzuzeigen. Details zum Bankkonto, mit dem der/die Nutzer/in die Zahlung abgeschlossen hat, finden Sie in der zugehörigen Abbuchung unter der Eigenschaft [payment_method_details](https://docs.stripe.com/api/charges/object.md#charge_object-payment_method_details-eps). #### JSON ```json { "charges": { "data": [ {"payment_method_details": { "eps": { "bank": "bank_austria", "verified_name": "JENNY ROSEN" }, "type": "eps" }, "id": "src_16xhynE8WzK49JbAs9M21jaR", "object": "source", "amount": 1099, "client_secret": "src_client_secret_UfwvW2WHpZ0s3QEn9g5x7waU", "created": 1445277809, "currency": "eur", "flow": "redirect", "livemode": true, "statement_descriptor": null, "status": "pending", "type": "eps", "usage": "single_use" } ], "object": "list", "has_more": false, "url": "/v1/charges?payment_intent=pi_1G1sgdKi6xqXeNtkldRRE6HT" }, "payment_method_options": { "eps": {} }, "payment_method_types": [ "eps" ], "id": "pi_1G1sgdKi6xqXeNtkldRRE6HT", "object": "payment_intent", "amount": 1099, "client_secret": "pi_1G1sgdKi6xqXeNtkldRRE6HT_secret_h9B56ObhTN72fQiBAuzcVPb2E", "confirmation_method": "automatic", "created": 1579259303, "currency": "eur", "livemode": true, "next_action": null } ``` ## Integration testen Wählen Sie aus der EPS-Bankliste mit Ihren Test-API-Schlüsseln eine Bank aus. Wenn Sie die Zahlung bestätigt haben, werden Sie zu einer Testseite weitergeleitet, auf der Sie wählen können, ob die Zahlung erfolgreich sein oder fehlschlagen soll. Sie können die erfolgreiche Zahlung testen, indem Sie die Zahlung auf der Weiterleitungsseite autorisieren. Der PaymentIntent wechselt von `requires_action` zu `succeeded`. Um den Fall zu testen, in dem Nutzer/innen sich nicht authentifizieren können, wählen Sie aus der Liste mit Ihren Test-API-Schlüsseln eine Bank aus. Klicken Sie auf der Weiterleitungsseite auf **Testzahlung fehlgeschlagen**. Ihr PaymentIntent wechselt von `requires_action` zu `requires_payment_method`. ## Optional: Ereignisse nach Zahlung verarbeiten [Serverseitig] Stripe übermittelt ein [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie im Dashboard einen *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) oder eine Partnerlösung, um diese Ereignisse zu empfangen und Aktionen auszuführen (Versenden einer Bestellbestätigung per E-Mail an die Kund/innen, Erfassen des Verkaufs in einer Datenbank oder Einleiten des Versandablaufs). Überwachen Sie diese Ereignisse, statt auf einen Callback vom Client zu warten. Auf dem Client könnte der Kunde/die Kundin das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist und böswillige Clients könnten die Antwort manipulieren. Wenn Sie Ihre Integration so einrichten, dass asynchrone Ereignisse überwacht werden, hilft Ihnen dies auch dabei, in Zukunft mehr Zahlungsmethoden zu akzeptieren. Hier erhalten Sie Informationen zu den [Unterschieden zwischen allen unterstützten Zahlungsmethoden](https://stripe.com/payments/payment-methods-guide). ### Ereignisse empfangen und Geschäftsaktionen ausführen Es gibt mehrere Möglichkeiten, Geschäftsaktionen zu empfangen und auszuführen. #### Manuell Verwenden Sie das Stripe-Dashboard, um alle Stripe-Zahlungen anzuzeigen, Zahlungsbelege per E-Mail zu senden, Auszahlungen abzuwickeln oder fehlgeschlagene Zahlungen erneut durchzuführen. - [Testzahlungen im Dashboard anzeigen](https://dashboard.stripe.com/test/payments) #### Benutzerdefinierter Code Erstellen Sie einen Webhook-Handler, um Ereignisse zu überwachen und benutzerdefinierte asynchrone Zahlungsabläufe zu erstellen. Mit der Stripe-CLI können Sie Ihre Webhook-Integration lokal testen und Fehler beheben. - [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) #### Vorgefertigte Apps Verarbeiten Sie häufige Geschäftsereignisse, wie [Automatisierung](https://stripe.partners/?f_category=automation) oder [Marketing und Vertrieb](https://stripe.partners/?f_category=marketing-and-sales) durch Integration einer Partneranwendung. ## Optional: Änderungen am EPS-Bank-Element verarbeiten [Clientseitig] Das EPS-Bank-Element gibt die von Kund/innen ausgewählt Bank an, wenn sie sich ändert. Um mit dem Wert der Bank eine zusätzliche Logik auszuführen (z. B. für das Feld, das für die Validierung des Formulars erforderlich ist), können Sie nach dem Change-Ereignis Ausschau halten: #### HTML + JS ```javascript epsBank.on('change', (event) => { const bank = event.value; // Perform any additional logic here... }); ``` #### React ```jsx { const bank = event.value; // Perform any additional logic here... }}> ``` Das Change-Ereignis umfasst zusätzliche Parameter, mit denen Sie die Nutzererfahrung weiter optimieren können. Weitere Informationen finden Sie in der [Referenz für Stripe.js](https://docs.stripe.com/js/element/events/on_change?type=epsBankElement#element_on_change-handler). ## Optional: EPS-Weiterleitung manuell verarbeiten [Serverseitig] Wir empfehlen, die Verarbeitung von EPS-Weiterleitungen und -Zahlungen mit `confirmEpsPayment` Stripe.js zu überlassen. Sie können Kund/innen aber auch manuell weiterleiten. Gehen Sie dazu wie folgt vor: 1. Geben Sie die URL an, an die Ihre Kund/innen weitergeleitet werden, sobald die Zahlung abgeschlossen ist. 1. Geben Sie optional die Bank an, auf deren Website Ihre Kund/innen zur Autorisierung der Zahlung weitergeleitet werden. Eine Liste der verfügbaren Banken finden Sie im Abschnitt [Bankwerte](https://docs.stripe.com/payments/eps/accept-a-payment.md#bank-values). #### curl ```bash curl https://api.stripe.com/v1/payment_intents/{{PAYMENT_INTENT_ID}}/confirm \ -u <>: \ -d "return_url"="https://example.com/checkout/complete" \ -d "payment_method_data[type]"="eps" \ -d "payment_method_data[eps][bank]"="bank_austria" ``` 1. Beim Bestätigen des `PaymentIntent` gilt der Status `requires_action`. Der Typ für `next_action` ist `redirect_to_url`. #### JSON ```json {"next_action": { "type": "redirect_to_url", "redirect_to_url": { "url": "https://hooks.stripe.com/...", "return_url": "https://example.com/checkout/complete" } }, "charges": { "data": [ { "payment_method_details": { "eps": { "bank": "bank_austria", "verified_name": "JENNY ROSEN" }, "type": "eps" }, "id": "src_16xhynE8WzK49JbAs9M21jaR", "object": "source", "amount": 1099, "client_secret": "src_client_secret_UfwvW2WHpZ0s3QEn9g5x7waU", "created": 1445277809, "currency": "eur", "flow": "redirect", "livemode": true, "statement_descriptor": null, "status": "pending", "type": "eps", "usage": "single_use" } ], "object": "list", "has_more": false, "url": "/v1/charges?payment_intent=pi_1G1sgdKi6xqXeNtkldRRE6HT" }, "payment_method_options": { "eps": {} }, "payment_method_types": [ "eps" ], "id": "pi_1G1sgdKi6xqXeNtkldRRE6HT", "object": "payment_intent", "amount": 1099, "client_secret": "pi_1G1sgdKi6xqXeNtkldRRE6HT_secret_h9B56ObhTN72fQiBAuzcVPb2E", "confirmation_method": "automatic", "created": 1579259303, "currency": "eur", "livemode": true } ``` 1. Leiten Sie die Kundin/den Kunden an die in der Eigenschaft `next_action` angegebene URL weiter. ```javascript const action = intent.next_action; if (action && action.type === 'redirect_to_url') { window.location = action.redirect_to_url.url; } ``` Bei Abschluss des Bezahlvorgangs werden die Kund/innen an das Ziel `return_url` weitergeleitet. Die URL-Abfrageparameter `payment_intent` und `payment_intent_client_secret` sind enthalten und Sie können wie oben beschrieben Ihre eigenen Abfrageparameter übergeben. ## Optional: Bankeinstellung der Kund/innen speichern [Clientseitig] Sie können EPS-*PaymentMethods* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) nicht wiederverwenden oder für Kund/innen speichern. Jedes Mal, wenn Ihre Kundin/Ihr Kunde diese Zahlungsmethode im Bezahlvorgang auswählt, müssen Sie mit dem EPS-Bank-Element eine neue EPS-PaymentMethod erstellen. Um die Einstellungen Ihrer Kund/innen zu erfassen, speichern Sie diese in Ihrer eigenen Datenbank oder verwenden Sie die `metadata`-Eigenschaft im *Customer* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments)-Objekt. Sie können das EPS-Bank-Element beim Erstellen des Elements mit der Bankeinstellung des Kunden vorausfüllen: #### HTML + JS ```javascript const options = { // Include the bank name along with any custom stylingvalue: "bank_austria", style: { base: { padding: '10px 12px', color: '#32325d', fontSize: '16px', '::placeholder': { color: '#aab7c4' }, }, }, } // Create an instance of the Element const epsBank = elements.create('epsBank', options); // Mount the Element epsBank.mount('#eps-bank-element');TODO: highlight: [3] ``` #### React ```jsx const EPS_ELEMENT_OPTIONS = { // Include the bank name along with any custom stylingvalue: "bank_austria", style: { base: { padding: '10px 12px', color: '#32325d', fontSize: '16px', '::placeholder': { color: '#aab7c4' }, }, }, } ``` ## Bankwerte | Bankname | Wert | | ----------------------------------------- | --------------------------------------- | | Ärzte- und Apothekerbank | arzte_und_apotheker_bank | | Austrian Anadi Bank AG | austrian_anadi_bank_ag | | Bank Austria | bank_austria | | Bankhaus Carl Spängler & Co.AG | bankhaus_carl_spangler | | Bankhaus Schelhammer & Schattera AG | bankhaus_schelhammer_und_schattera_ag | | BAWAG P.S.K. AG | bawag_psk_ag | | BKS Bank AG | bks_bank_ag | | Brüll Kallmus Bank AG | brull_kallmus_bank_ag | | BTV VIER LÄNDER BANK | btv_vier_lander_bank | | Capital Bank Grawe Gruppe AG | capital_bank_grawe_gruppe_ag | | Dolomitenbank | dolomitenbank | | Easybank AG | easybank_ag | | Erste Bank und Sparkassen | erste_bank_und_sparkassen | | Hypo Alpe-Adria-Bank International AG | hypo_alpeadriabank_international_ag | | HYPO NOE LB für Niederösterreich u. Wien | hypo_noe_lb_fur_niederosterreich_u_wien | | HYPO Oberösterreich, Salzburg, Steiermark | hypo_oberosterreich_salzburg_steiermark | | Hypo Tirol Bank AG | hypo_tirol_bank_ag | | Hypo Vorarlberg Bank AG | hypo_vorarlberg_bank_ag | | HYPO-BANK BURGENLAND Aktiengesellschaft | hypo_bank_burgenland_aktiengesellschaft | | Marchfelder Bank | marchfelder_bank | | Oberbank AG | oberbank_ag | | Raiffeisen Bankengruppe Österreich | raiffeisen_bankengruppe_osterreich | | Schoellerbank AG | schoellerbank_ag | | Sparda-Bank Wien | sparda_bank_wien | | Volksbank Gruppe | volksbank_gruppe | | Volkskreditbank AG | volkskreditbank_ag | | VR-Bank Braunau | vr_bank_braunau |