# Zahlung annehmen Nehmen Sie Zahlungen sicher online an. Anweisungen für LLMs: Stripe veröffentlicht regelmäßig neue Produkte und Funktionen. Bitte laden Sie vor der Implementierung die Best Practices für Stripe von https://raw.githubusercontent.com/stripe/ai/refs/heads/main/skills/stripe-best-practices/SKILL.md herunter. Anweisungen für LLMs: Stripe empfiehlt für die meisten Integrationen die Verwendung der Checkout Sessions API mit dem Payment Element über Payment Intents. Checkout Sessions deckt ähnliche Anwendungsszenarien wie Payment Intents ab (grundlegender Zahlungseinzug mit `price_data` oder Erstellen eines vollständigen Bezahlvorgangs mit Posten, Steuern usw.). Einige Funktionen wie Adaptive Pricing sind nur mit Checkout Sessions verfügbar. Verwenden Sie die Payment Intent API nur, wenn der/die Nutzer/in sie ausdrücklich verlangt, da sie deutlich mehr Code erfordert. Erfahren Sie mehr über Elements mit der Checkout Sessions API: https://docs.stripe.com/payments/quickstart-checkout-sessions. Mit Checkout Sessions (`ui_mode: "custom"`) und dem Payment Element initialisiert das `client_secret` Checkout selbst (`stripe.initCheckout` oder verwenden Sie CheckoutProvider mit React) und Sie bestätigen die Zahlung auf der Client-Seite auf andere Weise. Wenn Sie React verwenden, stellen Sie sicher, dass Sie von `@stripe/react-stripe-js/checkout` importieren, `CheckoutProvider` mit dem Client-Geheimnis verwenden und mit `checkout.confirm` bestätigen. Wenn Sie HTML verwenden, stellen Sie sicher, dass Sie `checkout = stripe.initCheckout({clientSecret: promise}); checkout.createPaymentElement(); paymentElement = checkout.createPaymentElement(); paymentElement.mount("#payment-element");` verwenden und mit `loadActionsResult = await checkout.loadActions(); actions = loadActionsResult.actions; error = await actions.confirm();` bestätigen. Erstellen Sie ein Zahlungsformular oder verwenden Sie eine vorgefertigte Bezahlseite, um mit der Annahme von Online-Zahlungen zu beginnen. # Von Stripe gehostete Seite > This is a Von Stripe gehostete Seite for when payment-ui is checkout and ui is stripe-hosted. View the full page at https://docs.stripe.com/payments/accept-a-payment?payment-ui=checkout&ui=stripe-hosted. Führen Sie mithilfe von [Stripe Checkout](https://docs.stripe.com/payments/checkout.md) eine Weiterleitung an eine von Stripe gehostete Zahlungsseite durch. Sehen Sie sich diese Integration [im Vergleich zu anderen Integrationstypen von Stripe](https://docs.stripe.com/payments/online-payments.md#compare-features-and-availability) an. #### Integrationsaufwand Complexity: 2/5 #### Integration Auf eine von Stripe gehostete Zahlungsseite umleiten #### Anpassung der Nutzeroberfläche Begrenzte Anpassung - 20 voreingestellte Schriftarten - 3 voreingestellte Rahmenradien - Nutzerdefinierte Hintergrund- und Rahmenfarbe - Individuelles Logo [Jetzt testen](https://checkout.stripe.dev/) [Registrieren Sie sich](https://dashboard.stripe.com/register) zunächst für ein Stripe-Konto. Verwenden Sie unsere offiziellen Bibliotheken, um von Ihrer Anwendung aus auf die Stripe API zuzugreifen: #### 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' ``` ## Ihre Kund/innen zu Stripe Checkout weiterleiten [Clientseitig] [Serverseitig] Fügen Sie Ihrer Website eine Schaltfläche zum Bezahlen hinzu, über die ein serverseitiger Endpoint aufgerufen wird, um eine [Checkout-Sitzung](https://docs.stripe.com/api/checkout/sessions/create.md) zu erstellen. Sie können auch eine Checkout-Sitzung für [einen bestehenden Kunden/eine bestehende Kundin](https://docs.stripe.com/payments/existing-customers.md?platform=web&ui=stripe-hosted) erstellen. Dadurch können Sie Checkout-Felder mit bekannten Kontaktinformationen vorab ausfüllen und Ihre Kaufhistorie für diesen Kunden/diese Kundin vereinheitlichen. ```html Buy cool new product ``` Eine Checkout-Sitzung ist eine programmgesteuerte Darstellung dessen, was Ihren Kundinnen und Kunden bei der Weiterleitung zum Zahlungsformular angezeigt wird. Es gibt folgende Konfigurationsoptionen: - [Posten](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-line_items) für die Zahlungsabwicklung - Zu verwendende Währungen Sie müssen `success_url` mit dem URL-Wert einer Seite auf Ihrer Website ausfüllen, zu der Checkout Ihre Kundinnen und Kunden nach Abschluss der Zahlung zurückleitet. > Checkout-Sitzungen laufen standardmäßig 24 Stunden nach Erstellung ab. Leiten Sie Ihre Kundinnen und Kunden nach dem Erstellen einer Checkout-Sitzung zu der in der Antwort zurückgegebenen [URL](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-url) weiter. #### Ruby ```ruby # This example sets up an endpoint using the Sinatra framework. require 'json' require 'sinatra' require 'stripe' # Don't put any keys in code. Use a secrets vault or environment # variable to supply keys to your integration. This example # shows how to set a secret key for illustration purposes only. # # See https://docs.stripe.com/keys-best-practices and find your # keys at https://dashboard.stripe.com/apikeys. Stripe.api_key = '<>' post '/create-checkout-session' dosession = Stripe::Checkout::Session.create({ line_items: [{ price_data: { currency: 'usd', product_data: { name: 'T-shirt', }, unit_amount: 2000, }, quantity: 1, }], mode: 'payment', # These placeholder URLs will be replaced in a following step. success_url: 'https://example.com/success', }) redirect session.url, 303 end ``` ### Zahlungsmethoden Standardmäßig aktiviert Stripe Karten und andere gängige Zahlungsmethoden. Sie können einzelne Zahlungsmethoden im [Stripe Dashboard](https://dashboard.stripe.com/settings/payment_methods) aktivieren oder deaktivieren. In Checkout wertet Stripe die Währung und etwaige Einschränkungen aus und zeigt den Kundinnen/Kunden dann dynamisch die unterstützten Zahlungsmethoden an. Um zu sehen, wie Ihre Zahlungsmethoden Kundinnen und Kunden angezeigt werden, geben Sie eine Transaktions-ID ein oder legen Sie einen Bestellbetrag und eine Währung im Dashboard fest. Sie können Apple Pay und Google Pay in Ihren [Einstellungen für Zahlungsmethoden](https://dashboard.stripe.com/settings/payment_methods) aktivieren. Standardmäßig ist Apple Pay aktiviert und Google Pay deaktiviert. In einigen Fällen filtert Stripe die Optionen jedoch heraus, auch wenn sie aktiviert sind. Wir filtern Google Pay, wenn Sie [automatische Steuern aktivieren](https://docs.stripe.com/tax/checkout.md), ohne eine Versandadresse zu erfassen. Die von Stripe gehosteten Checkout-Seiten benötigen keine Integrationsänderungen, um Apple Pay oder Google Pay zu aktivieren. Stripe verarbeitet diese Zahlungen genauso wie andere Kartenzahlungen. ### Ihren Endpoint bestätigen Bestätigen Sie, dass auf Ihren Endpoint zugegriffen werden kann, indem Sie Ihren Webserver starten (beispielsweise `localhost:4242`) und den folgenden Befehl ausführen: ```bash curl -X POST -is "http://localhost:4242/create-checkout-session" -d "" ``` In Ihrem Terminal sollten Sie folgende Antwort sehen: ```bash HTTP/1.1 303 See Other Location: https://checkout.stripe.com/c/pay/cs_test_... ... ``` ### Testen Sie sollten jetzt eine funktionierende Schaltfläche zum Bezahlen haben, über die Ihre Kundinnen und Kunden zu Stripe Checkout weitergeleitet werden. 1. Klicken Sie auf die Schaltfläche zum Bezahlen. 1. Sie werden zum Zahlungsformular von Stripe Checkout weitergeleitet. Wenn Ihre Integration nicht funktioniert: 1. Öffnen Sie in den Entwickler-Tools Ihres Browsers die Registerkarte „Netzwerk“. 1. Klicken Sie auf die Schaltfläche zum Bezahlen und bestätigen Sie, dass eine XHR-Anfrage an Ihren serverseitigen Endpoint gesendet wurde (`POST /create-checkout-session`). 1. Prüfen Sie, ob die Anfrage den Status 200 zurückgibt. 1. Verwenden Sie in Ihrem Button-Click-Listener `console.log(session)`, um zu prüfen, ob die richtigen Daten zurückgegeben werden. ## Eine Bestätigungsseite anzeigen [Clientseitig] [Serverseitig] Es ist wichtig, dass Ihre Kund/innen nach erfolgreicher Übermittlung des Zahlungsformulars eine Bestätigungsseite angezeigt bekommen. Diese Bestätigungsseite wird auf Ihrer Website gehostet. So erstellen Sie eine einfache Bestätigungsseite: ```html Thanks for your order!

Thanks for your order!

We appreciate your business! If you have any questions, please email orders@example.com.

``` Aktualisieren Sie als Nächstes den Endpoint zur Erstellung der Checkout-Sitzung, um diese neue Seite zu verwenden: ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price_data][currency]"=usd \ -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 \ --data-urlencode success_url="http://localhost:4242/success.html" ``` > Beachten Sie den Leitfaden für [nutzerdefinierte Bestätigungsseiten](https://docs.stripe.com/payments/checkout/custom-success-page.md), wenn Sie Ihre Bestätigungsseite anpassen möchten. ### Testen 1. Klicken Sie auf Ihre Checkout-Schaltfläche. 1. Geben Sie die Zahlungsdetails mit den Testkartendaten ein: - Geben Sie als Kartennummer `4242 4242 4242 4242` ein. - Geben Sie für die Karte ein beliebiges Ablaufdatum in der Zukunft ein. - Geben Sie als Prüfziffer/CVC eine 3-stellige Zahl ein. - Geben Sie eine beliebige Postleitzahl ein. 1. Klicken Sie auf **Bezahlen**. 1. Sie werden an Ihre neue Bestätigungsseite weitergeleitet. Suchen Sie anschließend die neue Zahlung im Stripe-Dashboard. Erfolgreiche Zahlungen werden im Dashboard in der [Zahlungsliste](https://dashboard.stripe.com/payments) angezeigt. Wenn Sie auf eine Zahlung klicken, werden Sie zur Seite mit den Zahlungsdetails weitergeleitet. Der Abschnitt **Checkout-Übersicht** umfasst Rechnungsinformationen und die Liste der gekauften Artikel, die Sie zur manuellen Abwicklung der Bestellung verwenden können. ## Ereignisse nach Zahlung verarbeiten Stripe sendet das Ereignis [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed), wenn ein Kunde/eine Kundin eine Zahlung in der Checkout-Sitzung abschließt. Verwenden Sie das [Webhook-Tool des Dashboards](https://dashboard.stripe.com/webhooks) oder befolgen Sie die [Webhook-Anleitung](https://docs.stripe.com/webhooks/quickstart.md), um diese Ereignisse zu empfangen und zu verarbeiten. Dies kann zu Folgendem führen: - Senden Sie eine Bestellbestätigung per E-Mail an Ihre Kundinnen/Kunden. - Protokollieren Sie den Verkauf in einer Datenbank. - Starten Sie einen Versand-Workflow. Überwachen Sie diese Ereignisse, anstatt darauf zu warten, dass Ihre Kundinnen/Kunden auf Ihre Website zurückgeleitet werden. Es ist unzuverlässig, die Ausführung nur über die Landingpage Ihrer Zahlungsseite auszulösen. Wenn Sie Ihre Integration so einrichten, dass sie asynchrone Ereignisse überwacht, können Sie [verschiedene Arten von Zahlungsmethoden](https://stripe.com/payments/payment-methods-guide) mit einer einzelnen Integration akzeptieren. Weitere Informationen finden Sie in unserem [Fulfillment-Leitfaden für Checkout](https://docs.stripe.com/checkout/fulfillment.md). Verarbeiten Sie die folgenden Ereignisse, wenn Sie Zahlungen mit Checkout einziehen: | Ereignis | Beschreibung | Aktion | | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) | Wird gesendet, wenn ein Kunde/eine Kundin eine Checkout-Sitzung erfolgreich abschließt. | Senden Sie den Kundinnen/Kunden eine Auftragsbestätigung und *wickeln* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) Sie die Bestellung ab. | | [checkout.session.async_payment_succeeded](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_succeeded) | Wird gesendet, wenn eine Zahlung mit einer Zahlungsmethode mit Verzögerung, wie z. B. ACH-Lastschriftverfahren, erfolgreich ausgeführt wird. | Senden Sie den Kundinnen/Kunden eine Auftragsbestätigung und *wickeln* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) Sie die Bestellung ab. | | [checkout.session.async_payment_failed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_failed) | Wird gesendet, wenn eine Zahlung mit einer Zahlungsmethode mit Verzögerung, wie z. B. ACH-Lastschriftverfahren, fehlschlägt. | Benachrichtigen Sie die Kundin/den Kunden über den Fehler und bitten Sie ihn/sie, für einen erneuten Zahlungsversuch zur Sitzung zurückzukehren. | ## Integration testen So testen Sie die Integration Ihres von Stripe gehosteten Zahlungsformulars: 1. Erstellen Sie eine Checkout-Sitzung. 1. Geben Sie die Zahlungsdetails mit einer Methode aus der folgenden Tabelle ein. - Geben Sie für die Karte ein beliebiges Ablaufdatum in der Zukunft ein. - Geben Sie als Prüfziffer/CVC eine 3-stellige Zahl ein. - Geben Sie eine beliebige Postleitzahl ein. 1. Klicken Sie auf **Bezahlen**. Sie werden an Ihre `success_url` weitergeleitet. 1. Gehen Sie zum Dashboard und suchen Sie auf der Seite [Transaktionen](https://dashboard.stripe.com/test/payments?status%5B0%5D=successful) nach der Zahlung. Wenn Ihre Zahlung erfolgreich war, wird sie in dieser Liste angezeigt. 1. Klicken Sie auf Ihre Zahlung, um weitere Details anzuzeigen, wie beispielsweise eine Checkout-Zusammenfassung mit Rechnungsinformationen und die Liste der gekauften Artikel. Sie können diese Informationen zur Abwicklung der Bestellung verwenden. Erfahren Sie mehr über das [Testen Ihrer Integration](https://docs.stripe.com/testing.md). #### Karten | Kartennummer | Szenario | So führen Sie den Test durch | | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | | 4242424242424242 | Die Kartenzahlung ist erfolgreich und es ist keine Authentifizierung erforderlich. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | 4000002500003155 | Für die Kartenzahlung ist eine *Authentifizierung* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase) erforderlich. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | 4000000000009995 | Die Karte wird mit einem Ablehnungscode wie `insufficient_funds` abgelehnt. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | 6205500000000000004 | Die UnionPay-Karte hat eine variable Länge von 13 bis 19 Ziffern. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | #### Digitale Geldbörsen (Wallets) | Zahlungsmethode | Szenario | So führen Sie den Test durch | | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Alipay | Ihr Kunde/Ihre Kundin zahlt erfolgreich mit einer auf Weiterleitung basierenden Zahlungsmethode mit [sofortiger Benachrichtigung](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Wählen Sie eine beliebige, auf Weiterleitung basierende Zahlungsmethode aus, füllen Sie die erforderlichen Informationen aus und bestätigen Sie die Zahlung. Klicken Sie dann auf der Weiterleitungsseite auf **Testzahlung abschließen**. | #### Bankumleitungen | Zahlungsmethode | Szenario | So führen Sie den Test durch | | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | BECS-Lastschriftverfahren | Ihr/e Kund/in zahlt erfolgreich mit dem BECS-Lastschriftverfahren. | Füllen Sie das Formular mit der Kontonummer `900123456` und BSB `000000` aus. Der bestätigte PaymentIntent geht zunächst in den Status `processing` über und dann 3 Minuten später in den Status `succeeded`. | | BECS-Lastschriftverfahren | Die Zahlung Ihres/Ihrer Kund/in schlägt fehl mit Code `account_closed` fehl. | Füllen Sie das Formular mit der Kontonummer `111111113` und BSB `000000` aus. | | Bancontact, EPS, iDEAL und Przelewy24 | Ihr/e Kund/in konnte sich auf der iDEAL-Weiterleitungsseite für eine auf Weiterleitung basierende Zahlungsmethode mit sofortiger Benachrichtigung nicht authentifizieren. | Wählen Sie eine beliebige, auf Weiterleitung basierende Zahlungsmethode aus, füllen Sie die erforderlichen Informationen aus und bestätigen Sie die Zahlung. Klicken Sie dann auf der Weiterleitungsseite auf **Testzahlung fehlgeschlagen**. | | Pay by Bank | Ihr Kunde/Ihre Kundin zahlt erfolgreich mit einer auf Weiterleitung basierenden Zahlungsmethode mit [verzögerter Benachrichtigung](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Wählen Sie die Zahlungsmethode aus, füllen Sie die erforderlichen Informationen aus und bestätigen Sie die Zahlung. Klicken Sie dann auf der Weiterleitungsseite auf **Testzahlung abschließen**. | | Pay by Bank | Ihr/e Kund/in konnte sich auf der iDEAL-Weiterleitungsseite für eine auf Weiterleitung basierende Zahlungsmethode mit verzögerter Benachrichtigung nicht authentifizieren. | Wählen Sie die Zahlungsmethode aus, füllen Sie die erforderlichen Informationen aus und bestätigen Sie die Zahlung. Klicken Sie dann auf der Weiterleitungsseite auf **Testzahlung fehlgeschlagen**. | | BLIK | BLIK-Zahlungen können aus verschiedenen Gründen fehlschlagen. Es gibt sofortige Fehler (der Code ist abgelaufen oder ungültig), verzögerte Fehler (die Bank lehnt ab) oder Zeitüberschreitungen (der/die Kund/in hat nicht rechtzeitig reagiert). | Verwenden Sie E-Mail-Muster, um [die verschiedenen Fehler zu simulieren](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures) | #### Banklastschriften | Zahlungsmethode | Szenario | So führen Sie den Test durch | | ---------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | SEPA-Lastschrift | Ihr/e Kund/in zahlt erfolgreich mit dem SEPA-Lastschriftverfahren. | Füllen Sie das Formular mit der Kontonummer `AT321904300235473204` aus. Die bestätigte PaymentIntent geht zunächst in den Status „wird verarbeitet“ und dann drei Minuten später in den Status „erfolgreich“ über. | | SEPA-Lastschrift | Der Status der PaymentIntent Ihres/Ihrer Kund/in wechselt von `processing` zu `requires_payment_method`. | Füllen Sie das Formular mit der Kontonummer `AT861904300235473202` aus. | #### Gutscheine | Zahlungsmethode | Szenario | So führen Sie den Test durch | | --------------- | ------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- | | Boleto, OXXO | Ihr/e Kund/in bezahlt mit einem Boleto- oder OXXO-Gutschein. | Wählen Sie als Zahlungsmethode Boleto oder OXXO aus und übermitteln Sie die Zahlung. Schließen Sie das OXXO-Dialogfeld, nachdem es angezeigt wurde. | Hier finden Sie weitere Informationen zum [Testen](https://docs.stripe.com/testing.md) Ihrer Integration. ### Testkarten | Nummer | Beschreibung | | ------------------- | ---------------------------------------------------------------------------------------------- | | 4242 4242 4242 4242 | Die Zahlung ist erfolgreich und wird sofort verarbeitet. | | 4000 0000 0000 3220 | Für eine erfolgreiche Zahlung muss die 3D Secure 2-Authentifizierung durchgeführt werden. | | 4000 0000 0000 9995 | Zahlung schlägt immer mit dem Ablehnungscode `insufficient_funds` fehl. | ## Optional: Produkte und Preise erstellen Bevor Sie eine Checkout-Sitzung erstellen, können Sie *Produkte* (Products represent what your business sells—whether that's a good or a service) und *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) im Voraus anlegen. Verwenden Sie Produkte, um unterschiedliche physische Waren oder Servicestufen darzustellen und *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), um die Preisgestaltung jedes Produkts abzubilden. Sie können [Ihre Checkout-Sitzung so einrichten](https://docs.stripe.com/payments/checkout/pay-what-you-want.md), dass Trinkgelder und Spenden akzeptiert werden oder Produkte und Dienstleistungen zu frei wählbaren Preisen verkauft werden. Sie können zum Beispiel ein T-Shirt als Produkt mit einem Preis von 20 USD erstellen. Auf diese Weise können Sie Preise aktualisieren und hinzufügen, ohne die Details der zugrunde liegenden Produkte ändern zu müssen. Sie können Produkte und Preise entweder mit dem Stripe-Dashboard oder über die API erstellen. Erfahren Sie mehr darüber, [wie Produkte und Preise funktionieren](https://docs.stripe.com/products-prices/how-products-and-prices-work.md). #### API Es ist nur ein `name` erforderlich, um ein [Produkt](https://docs.stripe.com/api/products.md) mit der API zu erstellen. Checkout zeigt von Ihnen angegebene Informationen wie `name` des Produkts, `description` und `images` an. ```curl curl https://api.stripe.com/v1/products \ -u "<>:" \ -d name=T-shirt ``` Erstellen Sie als Nächstes einen [Preis](https://docs.stripe.com/api/prices.md), um zu definieren, wie viel Sie für ein Produkt berechnen möchten. Dazu gehört, wie viel das Produkt kostet und welche Währung verwendet werden soll. ```curl curl https://api.stripe.com/v1/prices \ -u "<>:" \ -d product="{{PRODUCT_ID}}" \ -d unit_amount=2000 \ -d currency=usd ``` #### Dashboard > Kopieren Sie Produkte, die in einer Sandbox erstellt wurden, in den Live-Modus, damit Sie sie nicht erneut erstellen müssen. Klicken Sie in der Detailansicht des Produkts im Dashboard oben rechts auf **In Live-Modus kopieren**. Dieser Schritt kann für jedes in einer Sandbox erstellte Produkt nur einmal durchgeführt werden. Nachfolgende Aktualisierungen des Testprodukts werden für das Liveprodukt nicht übernommen. Stellen Sie sicher, dass Sie sich in einer Sandbox befinden, indem Sie in der Kontoauswahl im Dashboard auf **Sandboxes** klicken. Definieren Sie als Nächstes die Artikel, die Sie verkaufen möchten. So erstellen Sie ein neues Produkt und einen neuen Preis: - Gehen Sie im Dashboard zum Abschnitt [Produkte](https://dashboard.stripe.com/test/products). - Klicken Sie auf **Produkt hinzufügen**. - Wählen Sie beim Festlegen des Preises **Einmalig** aus. Checkout zeigt von Ihnen angegebene Informationen wie Name des Produkts, Beschreibung und Bilder an. Jeder von Ihnen erstellte Preis hat eine ID. Wenn Sie eine Checkout-Sitzung erstellen, verweisen Sie auf die Preis-ID und die Menge. Wenn Sie in mehreren Währungen Verkäufe tätigen, legen Sie Ihren Preis in *mehreren Währungen* (A single Price object can support multiple currencies. Each purchase uses one of the supported currencies for the Price, depending on how you use the Price in your integration) fest. Checkout [erkennt die lokale Währung des/der Kund/in automatisch](https://docs.stripe.com/payments/checkout/localize-prices/manual-currency-prices.md) und gibt diese Währung an, wenn der Preis diese unterstützt. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d mode=payment \ -d "line_items[0][price]"={{PRICE_ID}} \ -d "line_items[0][quantity]"=1 \ --data-urlencode success_url="https://example.com/success?session_id={CHECKOUT_SESSION_ID}" ``` ## Optional: Kundendaten vorab angeben [Serverseitig] Wenn Sie die E-Mail-Adresse Ihrer Kundin/Ihres Kunden bereits erfasst haben und sie in einer Checkout-Sitzung vorab angeben möchten, übergeben Sie [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email) beim Erstellen der Checkout-Sitzung. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ --data-urlencode customer_email="customer@example.com" \ -d "line_items[0][price]"="{{PRICE_ID}}" \ -d "line_items[0][quantity]"=1 \ -d mode=payment \ --data-urlencode success_url="https://example.com/success" ``` ## Optional: Angaben zur Zahlungsmethode speichern [Serverseitig] Standardmäßig sind Zahlungsmethoden, die für einmalige Zahlungen mit Checkout verwendet werden, nicht für die zukünftige Verwendung verfügbar. ### Zahlungsmethoden speichern, um sie Off-Session zu belasten Sie können Checkout die für eine einmalige Zahlung verwendeten Zahlungsmethoden speichern lassen, indem Sie das Argument [payment_intent_data.setup_future_usage](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-setup_future_usage) übergeben. Das ist hilfreich, wenn Sie eine hinterlegte Zahlungsmethode für künftige Gebühren, wie Stornogebühren oder Gebühren bei Nichterscheinen, erfassen müssen. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d customer_creation=always \ -d "line_items[0][price_data][currency]"=usd \ -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 \ --data-urlencode success_url="https://example.com/success.html" \ -d "payment_intent_data[setup_future_usage]"=off_session ``` If you use Checkout in `subscription` mode, Stripe automatically saves the payment method to charge it for subsequent payments. Card payment methods saved to customers using either `setup_future_usage` or `subscription` mode don’t appear for return purchases in Checkout (more on this below). We recommend using [custom text](https://docs.stripe.com/payments/checkout/custom-components.md#customize-text) to link out to any relevant terms regarding the usage of saved payment information. > Die weltweiten Datenschutzgesetze sind komplex und vielschichtig. Wir empfehlen Ihnen, sich vor der Implementierung von [setup_future_usage](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-setup_future_usage) mit Ihrem Rechts- und Datenschutzteam in Verbindung zu setzen, da dies Ihr bestehendes Compliance-Framework für den Datenschutz beeinträchtigen könnte. Weitere Informationen zum Speichern von Zahlungsdaten finden Sie in den [Leitlinien des Europäischen Datenschutzausschusses](https://edpb.europa.eu/system/files/2021-05/recommendations022021_on_storage_of_credit_card_data_en_1.pdf). ### Zahlungsmethoden speichern, um sie in Checkout vorab auszufüllen Standardmäßig verwendet Checkout[Link](https://docs.stripe.com/payments/link/checkout-link.md) um Ihren Kunden die Möglichkeit zu geben, ihre Zahlungsinformationen sicher zu speichern und wiederzuverwenden. Wenn Sie es vorziehen, die Zahlungsmethoden selbst zu verwalten, verwenden Sie[saved_payment_method_options.payment_method_save](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-saved_payment_method_options-payment_method_save) wenn Sie eine Checkout Session erstellen, damit Ihre Kunden ihre Zahlungsmethoden für zukünftige Einkäufe in Checkout speichern können. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d customer_creation=always \ -d "line_items[0][price_data][currency]"=usd \ -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 \ --data-urlencode success_url="https://example.com/success.html" \ -d "saved_payment_method_options[payment_method_save]"=enabled ``` Wenn Sie diesen Parameter entweder im [Zahlungs](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-mode)- oder im [Abonnement](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-mode)-Modus übergeben, wird ein optionales Kontrollkästchen angezeigt, mit dem Kundinnen/Kunden ihre Zahlungsmethode für zukünftige Käufe explizit speichern können. Wenn Kundinnen/Kunden dieses Kontrollkästchen aktivieren, speichert Checkout die Zahlungsmethode mit [allow_redisplay: always](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay). Checkout verwendet diesen Parameter, um zu ermitteln, ob eine Zahlungsmethode für zukünftige Käufe vorausgefüllt werden kann. Wenn Sie `saved_payment_method_options.payment_method_save` verwenden, müssen Sie `setup_future_usage` nicht übergeben, um die Zahlungsmethode zu speichern. Wenn Ihre Connect-Plattform verwendet [kundenkonfigurierte Konten](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), benutze unser [Anleitung](https://docs.stripe.com/connect/use-accounts-as-customers.md) Ersetzen `Customer` und Ereignisreferenzen in Ihrem Code mit den entsprechenden Accounts v2 API-Referenzen. Für die Verwendung von [saved_payment_method_options.payment_method_save](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-saved_payment_method_options-payment_method_save) ist ein `Customer` erforderlich. Um einen neuen Kunden/eine neue Kundin zu speichern, legen Sie die [customer_creation der Checkout-Sitzung](https://docs.stripe.com/api/checkout/sessions/create.md) auf `always` fest. Andernfalls wird in der Sitzung weder der Kunde/die Kundin noch die Zahlungsmethode gespeichert. Wenn `payment_method_save` nicht übergeben wird oder wenn der Kunde/die Kundin nicht zustimmt, die Zahlungsmethode zu speichern, speichert Checkout weiterhin Zahlungsmethoden, die im Modus `subscription` oder mit `setup_future_usage` erstellt wurden. Diese Zahlungsmethoden haben den `allow_redisplay`-Wert `limited`, der verhindert, dass sie für wiederkehrende Käufe vorausgefüllt werden, und es Ihnen ermöglicht, die Regeln des Kartennetzwerks und die Datenschutzbestimmungen einzuhalten. Erfahren Sie, wie Sie [das durch diese Modi aktivierte Standardverhalten ändern](https://support.stripe.com/questions/prefilling-saved-cards-in-checkout) und wie Sie das `allow_redisplay`-Verhalten ändern oder außer Kraft setzen können. > Sie können Checkout verwenden, um Karten und andere Zahlungsmethoden zu speichern, um sie Off-Session zu belasten, aber Checkout füllt nur gespeicherte Karten vorab aus. So können Sie [gespeicherte Karten vorab ausfüllen](https://support.stripe.com/questions/prefilling-saved-cards-in-checkout). Um eine Zahlungsmethode ohne anfängliche Zahlung zu speichern, [verwenden Sie Checkout im Einrichtungsmodus](https://docs.stripe.com/payments/save-and-reuse.md?platform=checkout). ### Lassen Sie Kundinnen und Kunden gespeicherte Zahlungsmethoden entfernen Damit Ihre Kundinnen und Kunden eine gespeicherte Zahlungsmethode entfernen können, damit sie für zukünftige Zahlungen nicht wieder angezeigt wird, verwenden Sie beim Erstellen einer Checkout-Sitzung [saved_payment_method_options.payment_method_remove](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-saved_payment_method_options-payment_method_remove). ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d customer={{CUSTOMER_ID}} \ -d "line_items[0][price_data][currency]"=usd \ -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 \ --data-urlencode success_url="https://example.com/success.html" \ -d "saved_payment_method_options[payment_method_remove]"=enabled ``` Der Kunde/Die Kundin kann eine Zahlungsmethode nicht entfernen, wenn sie an ein aktives Abonnement gebunden ist und der Kunde/die Kundin keine Standardzahlungsmethode für Rechnungs- und Abonnementzahlungen gespeichert hat. ## Optional: Getrennte Autorisierung und Erfassung [Serverseitig] Stripe unterstützt Kartenzahlungen in zwei Schritten. Sie können also Karten autorisieren und die Gelder erst später erfassen. Wenn Stripe eine Zahlung autorisiert, garantiert der Kartenaussteller die Gelder und stellt den Zahlungsbetrag auf der Kundenkarte zurück. Sie müssen die Gelder dann in einem bestimmten Zeitraum erfassen – wie lange Sie Zeit haben, [hängt von der Karte ab](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md#auth-capture-limitations)). Wenn Sie die Zahlung nicht vor Ablauf der Autorisierung erfassen, wird die Zahlung storniert und der Kartenaussteller gibt die zurückgestellten Gelder wieder frei. Separating authorization and capture is useful if you need to take additional actions between confirming that a customer is able to pay and collecting their payment. For example, if you’re selling stock-limited items, you might need to confirm that an item purchased by your customer using Checkout is still available before capturing their payment and fulfilling the purchase. Accomplish this using the following workflow: 1. Überprüfen Sie, ob Stripe die Zahlungsmethode der Kundin/des Kunden autorisiert hat. 1. Kontrollieren Sie in Ihrem Bestandsverwaltungssystem, ob der Artikel verfügbar ist. 1. Geben Sie in Ihrem Bestandsverwaltungssystem an, dass der Kunde/die Kundin den Artikel gekauft hat. 1. Erfassen Sie die Zahlung der Kundin/des Kunden. 1. Informieren Sie die Kundin/den Kunden auf Ihrer Bestätigungsseite darüber, ob der Kauf erfolgreich war. Um anzugeben, dass Sie Autorisierung und Erfassung trennen möchten, müssen Sie beim Erstellen der Checkout-Sitzung den Wert von [payment_intent_data.capture_method](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-capture_method) auf `manual` festlegen. Dadurch wird Stripe angewiesen, nur den Betrag auf der Karte der Kundin/des Kunden zu autorisieren. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price]"={{PRICE_ID}} \ -d "line_items[0][quantity]"=1 \ -d mode=payment \ -d "payment_intent_data[capture_method]"=manual \ --data-urlencode success_url="https://example.com/success.html" ``` Eine nicht erfasste Zahlung können Sie entweder über den Endpoint [Dashboard](https://dashboard.stripe.com/test/payments?status%5B%5D=uncaptured) oder [Erfassung](https://docs.stripe.com/api/payment_intents/capture.md) erfassen. Um Zahlungen programmgesteuert zu erfassen, ist der Zugriff auf den PaymentIntent erforderlich, der während der Checkout-Sitzung erstellt wurde. Diesen können Sie über das [Session](https://docs.stripe.com/api/payment_intents/capture.md)-Objekt abrufen. ## Optional: Verwaltung von Kundenkonten [Kein Code] Lassen Sie Ihre Kundinnen/Kunden ihre eigenen Konten [verwalten](https://docs.stripe.com/customer-management.md) und senden sie ihnen einen Link zu Ihrem *Kundenportal* (The customer portal is a secure, Stripe-hosted page that lets your customers manage their subscriptions and billing details). Über das Kundenportal können sich Kundinnen/Kunden mit ihrer E-Mail-Adresse anmelden, um Abonnements zu verwalten, Zahlungsmethoden zu aktualisieren und vieles mehr. ## See also - [Rabatte hinzufügen](https://docs.stripe.com/payments/checkout/discounts.md) - [Steuern einziehen](https://docs.stripe.com/payments/checkout/taxes.md) - [Steuer-IDs erfassen](https://docs.stripe.com/tax/checkout/tax-ids.md) - [Versand hinzufügen](https://docs.stripe.com/payments/collect-addresses.md?payment-ui=checkout) - [Ihr Branding anpassen](https://docs.stripe.com/payments/checkout/customization.md) # Eingebettetes Formular > This is a Eingebettetes Formular for when payment-ui is checkout and ui is embedded-form. View the full page at https://docs.stripe.com/payments/accept-a-payment?payment-ui=checkout&ui=embedded-form. Betten Sie mit [Stripe Checkout](https://docs.stripe.com/payments/checkout.md) ein vorgefertigtes Zahlungsformular auf Ihrer Website ein. Sehen Sie sich diese Integration [im Vergleich zu anderen Integrationstypen von Stripe](https://docs.stripe.com/payments/online-payments.md#compare-features-and-availability) an. #### Integrationsaufwand Complexity: 2/5 #### Integration Vorgefertigtes Zahlungsformular auf Ihrer Website einbetten #### Anpassung der Nutzeroberfläche Begrenzte Anpassung - 20 voreingestellte Schriftarten - 3 voreingestellte Rahmenradien - Nutzerdefinierte Hintergrund- und Rahmenfarbe - Individuelles Logo Verwenden Sie die [Branding-Einstellungen](https://dashboard.stripe.com/settings/branding/checkout) im Stripe-Dashboard, um Checkout an Ihr Website-Design anzupassen. [Registrieren Sie sich](https://dashboard.stripe.com/register) zunächst für ein Stripe-Konto. Verwenden Sie unsere offiziellen Bibliotheken, um von Ihrer Anwendung aus auf die Stripe API zuzugreifen: #### 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' ``` ## Checkout-Sitzung erstellen [Serverseitig] From your server, create a *Checkout Session* (A Checkout Session represents your customer's session as they pay for one-time purchases or subscriptions through Checkout. After a successful payment, the Checkout Session contains a reference to the Customer, and either the successful PaymentIntent or an active Subscription) and set the [ui_mode](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-ui_mode) to `embedded`. You can configure the [Checkout Session](https://docs.stripe.com/api/checkout/sessions/create.md) with [line items](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-line_items) to include and options such as [currency](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-currency). Sie können auch eine Checkout-Sitzung für [einen bestehenden Kunden/eine bestehende Kundin](https://docs.stripe.com/payments/existing-customers.md?platform=web&ui=stripe-hosted) erstellen. Dadurch können Sie Checkout-Felder mit bekannten Kontaktinformationen vorab ausfüllen und Ihre Kaufhistorie für diesen Kunden/diese Kundin vereinheitlichen. Um Kundinnen/Kunden zu einer nutzerdefinierten Seite zurückzuleiten, die Sie auf Ihrer Website hosten, geben Sie die URL dieser Seite im Parameter [return_url](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-return_url) an. Fügen Sie die Vorlagenvariable `{CHECKOUT_SESSION_ID}` in die URL ein, um den Status der Sitzung auf der Rückgabeseite abzurufen. Checkout ersetzt die Variable vor der Weiterleitung automatisch durch die Checkout-Sitzungs-ID. Erfahren Sie mehr über die [Konfiguration der Rückgabeseite](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=checkout&ui=embedded-form#return-page) und weitere Optionen zur [Anpassung des Weiterleitungsverhalten](https://docs.stripe.com/payments/checkout/custom-success-page.md?payment-ui=embedded-form). Nachdem Sie die Checkout-Sitzung erstellt haben, verwenden Sie das `client_secret`, das in der Antwort auf [Checkout verbinden](https://docs.stripe.com/payments/accept-a-payment.md#mount-checkout) zurückgegeben wurde. #### Ruby ```ruby # This example sets up an endpoint using the Sinatra framework. require 'json' require 'sinatra' require 'stripe' # Don't put any keys in code. Use a secrets vault or environment # variable to supply keys to your integration. This example # shows how to set a secret key for illustration purposes only. # # See https://docs.stripe.com/keys-best-practices and find your # keys at https://dashboard.stripe.com/apikeys. Stripe.api_key = '<>' post '/create-checkout-session' do session = Stripe::Checkout::Session.create({ line_items: [{ price_data: { currency: 'usd', product_data: { name: 'T-shirt', }, unit_amount: 2000, }, quantity: 1, }], mode: 'payment',ui_mode: 'embedded',return_url: 'https://example.com/checkout/return?session_id={CHECKOUT_SESSION_ID}' }) {clientSecret: session.client_secret}.to_json end ``` ## Checkout verbinden [Clientseitig] #### HTML + JS Checkout ist als Teil von [Stripe.js](https://docs.stripe.com/js.md) verfügbar. Nehmen Sie das Stripe.js-Skript in Ihre Seite auf, indem Sie es zum Header Ihrer HTML-Datei hinzufügen. Als Nächstes erstellen Sie einen leeren DOM-Knoten (Container), der zum Verbinden verwendet wird. ```html

``` Initialisieren Sie Stripe.js mit Ihrem veröffentlichbaren API-Schlüssel. Erstellen Sie eine asynchrone `fetchClientSecret`-Funktion, die eine Anfrage an Ihren Server stellt, um eine Checkout-Sitzung zu erstellen und das Client-Geheimnis abzurufen. Übergeben Sie diese Funktion an `options`, wenn Sie die Checkout-Instanz erstellen: ```javascript // Initialize Stripe.js const stripe = Stripe('<>'); initialize(); // Fetch Checkout Session and retrieve the client secret async function initialize() { const fetchClientSecret = async () => { const response = await fetch("/create-checkout-session", { method: "POST", }); const { clientSecret } = await response.json(); return clientSecret; }; // Initialize Checkout const checkout = await stripe.initEmbeddedCheckout({ fetchClientSecret, }); // Mount Checkout checkout.mount('#checkout'); } ``` #### React Installieren Sie [react-stripe-js](https://docs.stripe.com/sdks/stripejs-react.md) und den Stripe.js-Loader von npm: ```bash npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` Um die eingebettete Checkout-Komponente zu verwenden, erstellen Sie einen `EmbeddedCheckoutProvider`. Rufen Sie `loadStripe` mit Ihrem veröffentlichbaren API-Schlüssel auf und übergeben Sie das zurückgegebene `Promise` an den Anbieter. Erstellen Sie eine asynchrone `fetchClientSecret`-Funktion, die eine Anfrage an Ihren Server stellt, um eine Checkout-Sitzung zu erstellen und das Client-Geheimnis abzurufen. Übergeben Sie diese Funktion an die vom Anbieter akzeptierte Eigenschaft `options`. ```jsx import * as React from 'react'; import {loadStripe} from '@stripe/stripe-js'; import { EmbeddedCheckoutProvider, EmbeddedCheckout } from '@stripe/react-stripe-js'; // Make sure to call `loadStripe` outside of a component’s render to avoid // recreating the `Stripe` object on every render. const stripePromise = loadStripe('pk_test_123'); const App = () => { const fetchClientSecret = useCallback(() => { // Create a Checkout Session return fetch("/create-checkout-session", { method: "POST", }) .then((res) => res.json()) .then((data) => data.clientSecret); }, []); const options = {fetchClientSecret}; return (

) } ``` Checkout wird in einem iFrame gerendert, der Zahlungsdaten sicher über eine HTTPS-Verbindung an Stripe sendet. > Vermeiden Sie es, Checkout in einem anderen iFrame zu platzieren, da bei einigen Zahlungsmethoden die Weiterleitung an eine andere Seite zur Zahlungsbestätigung erforderlich ist. ### Erscheinungsbild anpassen Passen Sie Checkout an das Design Ihrer Website an, indem Sie Hintergrundfarbe, Schaltflächenfarbe, Rahmenradius und Schriftarten in den [Branding-Einstellungen](https://dashboard.stripe.com/settings/branding) Ihres Kontos festlegen. Checkout wird standardmäßig ohne externes Padding oder Ränder gerendert. Um Ihren gewünschten Rand hinzuzufügen (z. B. 16px auf allen Seiten), empfehlen wir, ein Container-Element zu verwenden. ## Eine Rückgabeseite anzeigen Nachdem Ihre Kundinnen/Kunden einen Zahlungsversuch unternommen haben, leitet Stripe sie zu einer Rückgabeseite weiter, die Sie auf Ihrer Website hosten. Beim Erstellen der Checkout-Sitzung haben Sie die URL der Rückgabeseite im Parameter [return_url](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-return_url) angegeben. Erfahren Sie mehr über andere Optionen zum [Anpassen des Weiterleitungsverhaltens](https://docs.stripe.com/payments/checkout/custom-success-page.md?payment-ui=embedded-form). Rufen Sie beim Rendern Ihrer Rückgabeseite den Status der Checkout-Sitzung mithilfe der ID der Checkout-Sitzung in der URL ab. Gehen Sie je nach Sitzungsstatus wie folgt mit dem Ergebnis um: - `complete`: Die Zahlung war erfolgreich. Verwenden Sie die Informationen aus der Checkout-Sitzung, um eine Bestätigungsseite zu rendern. - `open`: Die Zahlung ist fehlgeschlagen oder wurde storniert. Stellen Sie erneut eine Verbindung zu Checkout her, damit Ihre Kundinnen/Kunden es nochmals versuchen können. #### Rubin ```ruby get '/session-status' do session = Stripe::Checkout::Session.retrieve(params[:session_id]) {status: session.status, customer_email: session.customer_details.email}.to_json end ``` ```javascript const session = await fetch(`/session_status?session_id=${session_id}`) if (session.status == 'open') { // Remount embedded Checkout } else if (session.status == 'complete') { // Show success page // Optionally use session.payment_status or session.customer_email // to customize the success page } ``` #### Auf Weiterleitung basierende Zahlungsmethoden Während der Zahlung leiten einige Zahlungsmethoden die Kundin/den Kunden auf eine Zwischenseite weiter, zum Beispiel eine Bankautorisierungsseite. Wenn sie diese Seite ausgefüllt haben, leitet Stripe sie zu Ihrer Rückgabeseite weiter. Erfahren Sie mehr über [auf Weiterleitung basierende Zahlungsmethoden und das Weiterleitungsverhalten](https://docs.stripe.com/payments/checkout/custom-success-page.md?payment-ui=embedded-form#redirect-based-payment-methods). ## Ereignisse nach der Zahlung verarbeiten Stripe sendet das Ereignis [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed), wenn ein Kunde/eine Kundin eine Zahlung in der Checkout-Sitzung abschließt. Verwenden Sie das [Webhook-Tool des Dashboards](https://dashboard.stripe.com/webhooks) oder befolgen Sie die [Webhook-Anleitung](https://docs.stripe.com/webhooks/quickstart.md), um diese Ereignisse zu empfangen und zu verarbeiten. Dies kann zu Folgendem führen: - Senden Sie eine Bestellbestätigung per E-Mail an Ihre Kundinnen/Kunden. - Protokollieren Sie den Verkauf in einer Datenbank. - Starten Sie einen Versand-Workflow. Überwachen Sie diese Ereignisse, anstatt darauf zu warten, dass Ihre Kundinnen/Kunden auf Ihre Website zurückgeleitet werden. Es ist unzuverlässig, die Ausführung nur über die Landingpage Ihrer Zahlungsseite auszulösen. Wenn Sie Ihre Integration so einrichten, dass sie asynchrone Ereignisse überwacht, können Sie [verschiedene Arten von Zahlungsmethoden](https://stripe.com/payments/payment-methods-guide) mit einer einzelnen Integration akzeptieren. Weitere Informationen finden Sie in unserem [Fulfillment-Leitfaden für Checkout](https://docs.stripe.com/checkout/fulfillment.md). Verarbeiten Sie die folgenden Ereignisse, wenn Sie Zahlungen mit Checkout einziehen: | Ereignis | Beschreibung | Aktion | | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) | Wird gesendet, wenn ein Kunde/eine Kundin eine Checkout-Sitzung erfolgreich abschließt. | Senden Sie den Kundinnen/Kunden eine Auftragsbestätigung und *wickeln* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) Sie die Bestellung ab. | | [checkout.session.async_payment_succeeded](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_succeeded) | Wird gesendet, wenn eine Zahlung mit einer Zahlungsmethode mit Verzögerung, wie z. B. ACH-Lastschriftverfahren, erfolgreich ausgeführt wird. | Senden Sie den Kundinnen/Kunden eine Auftragsbestätigung und *wickeln* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) Sie die Bestellung ab. | | [checkout.session.async_payment_failed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_failed) | Wird gesendet, wenn eine Zahlung mit einer Zahlungsmethode mit Verzögerung, wie z. B. ACH-Lastschriftverfahren, fehlschlägt. | Benachrichtigen Sie die Kundin/den Kunden über den Fehler und bitten Sie ihn/sie, für einen erneuten Zahlungsversuch zur Sitzung zurückzukehren. | ## Integration testen So testen Sie die Integration Ihres eingebetteten Zahlungsformulars: 1. Erstellen Sie eine eingebettete Checkout-Sitzung und verbinden Sie das Zahlungsformular auf Ihrer Seite. 1. Geben Sie die Zahlungsdetails mit einer Methode aus der folgenden Tabelle ein. - Geben Sie für die Karte ein beliebiges Ablaufdatum in der Zukunft ein. - Geben Sie als Prüfziffer/CVC eine 3-stellige Zahl ein. - Geben Sie eine beliebige Postleitzahl für die Rechnungsstellung ein. 1. Klicken Sie auf **Bezahlen**. Sie werden zu Ihrer `return_url` weitergeleitet. 1. Gehen Sie zum Dashboard und suchen Sie auf der [Transaktionsseite](https://dashboard.stripe.com/test/payments?status%5B0%5D=successful) nach der Zahlung. Wenn Ihre Zahlung erfolgreich war, wird sie in dieser Liste angezeigt. 1. Klicken Sie auf Ihre Zahlung, um weitere Details anzuzeigen, wie beispielsweise eine Checkout-Zusammenfassung mit Rechnungsinformationen und die Liste der gekauften Artikel. Sie können diese Informationen zur Abwicklung der Bestellung verwenden. Erfahren Sie mehr über das [Testen Ihrer Integration](https://docs.stripe.com/testing.md). #### Karten | Kartennummer | Szenario | So führen Sie den Test durch | | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | | 4242424242424242 | Die Kartenzahlung ist erfolgreich und es ist keine Authentifizierung erforderlich. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | 4000002500003155 | Für die Kartenzahlung ist eine *Authentifizierung* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase) erforderlich. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | 4000000000009995 | Die Karte wird mit einem Ablehnungscode wie `insufficient_funds` abgelehnt. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | 6205500000000000004 | Die UnionPay-Karte hat eine variable Länge von 13 bis 19 Ziffern. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | #### Digitale Geldbörsen (Wallets) | Zahlungsmethode | Szenario | So führen Sie den Test durch | | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Alipay | Ihr Kunde/Ihre Kundin zahlt erfolgreich mit einer auf Weiterleitung basierenden Zahlungsmethode mit [sofortiger Benachrichtigung](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Wählen Sie eine beliebige, auf Weiterleitung basierende Zahlungsmethode aus, füllen Sie die erforderlichen Informationen aus und bestätigen Sie die Zahlung. Klicken Sie dann auf der Weiterleitungsseite auf **Testzahlung abschließen**. | #### Bankumleitungen | Zahlungsmethode | Szenario | So führen Sie den Test durch | | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | BECS-Lastschriftverfahren | Ihr/e Kund/in zahlt erfolgreich mit dem BECS-Lastschriftverfahren. | Füllen Sie das Formular mit der Kontonummer `900123456` und BSB `000000` aus. Der bestätigte PaymentIntent geht zunächst in den Status `processing` über und dann 3 Minuten später in den Status `succeeded`. | | BECS-Lastschriftverfahren | Die Zahlung Ihres/Ihrer Kund/in schlägt fehl mit Code `account_closed` fehl. | Füllen Sie das Formular mit der Kontonummer `111111113` und BSB `000000` aus. | | Bancontact, EPS, iDEAL und Przelewy24 | Ihr/e Kund/in konnte sich auf der iDEAL-Weiterleitungsseite für eine auf Weiterleitung basierende Zahlungsmethode mit sofortiger Benachrichtigung nicht authentifizieren. | Wählen Sie eine beliebige, auf Weiterleitung basierende Zahlungsmethode aus, füllen Sie die erforderlichen Informationen aus und bestätigen Sie die Zahlung. Klicken Sie dann auf der Weiterleitungsseite auf **Testzahlung fehlgeschlagen**. | | Pay by Bank | Ihr Kunde/Ihre Kundin zahlt erfolgreich mit einer auf Weiterleitung basierenden Zahlungsmethode mit [verzögerter Benachrichtigung](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Wählen Sie die Zahlungsmethode aus, füllen Sie die erforderlichen Informationen aus und bestätigen Sie die Zahlung. Klicken Sie dann auf der Weiterleitungsseite auf **Testzahlung abschließen**. | | Pay by Bank | Ihr/e Kund/in konnte sich auf der iDEAL-Weiterleitungsseite für eine auf Weiterleitung basierende Zahlungsmethode mit verzögerter Benachrichtigung nicht authentifizieren. | Wählen Sie die Zahlungsmethode aus, füllen Sie die erforderlichen Informationen aus und bestätigen Sie die Zahlung. Klicken Sie dann auf der Weiterleitungsseite auf **Testzahlung fehlgeschlagen**. | | BLIK | BLIK-Zahlungen können aus verschiedenen Gründen fehlschlagen. Es gibt sofortige Fehler (der Code ist abgelaufen oder ungültig), verzögerte Fehler (die Bank lehnt ab) oder Zeitüberschreitungen (der/die Kund/in hat nicht rechtzeitig reagiert). | Verwenden Sie E-Mail-Muster, um [die verschiedenen Fehler zu simulieren](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures) | #### Banklastschriften | Zahlungsmethode | Szenario | So führen Sie den Test durch | | ---------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | SEPA-Lastschrift | Ihr/e Kund/in zahlt erfolgreich mit dem SEPA-Lastschriftverfahren. | Füllen Sie das Formular mit der Kontonummer `AT321904300235473204` aus. Die bestätigte PaymentIntent geht zunächst in den Status „wird verarbeitet“ und dann drei Minuten später in den Status „erfolgreich“ über. | | SEPA-Lastschrift | Der Status der PaymentIntent Ihres/Ihrer Kund/in wechselt von `processing` zu `requires_payment_method`. | Füllen Sie das Formular mit der Kontonummer `AT861904300235473202` aus. | #### Gutscheine | Zahlungsmethode | Szenario | So führen Sie den Test durch | | --------------- | ------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- | | Boleto, OXXO | Ihr/e Kund/in bezahlt mit einem Boleto- oder OXXO-Gutschein. | Wählen Sie als Zahlungsmethode Boleto oder OXXO aus und übermitteln Sie die Zahlung. Schließen Sie das OXXO-Dialogfeld, nachdem es angezeigt wurde. | Hier finden Sie weitere Informationen zum [Testen](https://docs.stripe.com/testing.md) Ihrer Integration. ## Optional: Weitere Zahlungsmethoden hinzufügen Standardmäßig unterstützt Checkout [viele Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/integration-options.md#choose-how-to-add-payment-methods). Sie müssen zusätzliche Schritte unternehmen, um einige Methoden wie Apple Pay, Google Pay und „Jetzt kaufen, später bezahlen“ zu aktivieren und anzuzeigen. ### Apple Pay und Google Pay Um Zahlungen mit Apple Pay und Google Pay zu akzeptieren, müssen Sie: - Aktivieren Sie sie in Ihren [Zahlungsmethodeneinstellungen](https://dashboard.stripe.com/settings/payment_methods). Apple Pay ist standardmäßig aktiviert. - Stellen Sie Ihre Anwendung über HTTPS in einer Entwicklungs- und Produktionsumgebung bereit. - [Registrieren Sie Ihre Domain](https://docs.stripe.com/payments/payment-methods/pmd-registration.md). - Ihre Anwendung wird in der Entwicklungs- und in der Produktionsumgebung über HTTPS angesprochen. Sie können einen Dienst wie [ngrok](https://ngrok.com/) verwenden, um Ihre Anwendung für lokale Tests bereitzustellen. Zusätzlich wird in einer Checkout-Sitzung die Apple Pay-Schaltfläche Kunden/Kundinnen nur angezeigt, wenn *alle* folgenden Bedingungen erfüllt sind: - Auf dem Kundengerät ist macOS Version 17 oder höher oder iOS Version 17 oder höher installiert. - Die Kundin/der Kunde verwendet Safari. - Die Kundin/der Kunde hat sich mit einer gültigen Karte bei Apple Pay registriert. In einer Checkout-Sitzung wird die Google Pay-Schaltfläche für Kundinnen/Kunden nur angezeigt, wenn *alle* der folgenden Bedingungen erfüllt sind: - Auf dem Kundengerät ist Chrome 61 oder neuer installiert. - Die Kundin/der Kunde hat sich mit einer gültigen Karte bei Google Pay registriert. > #### Regionale Tests > > Stripe Checkout unterstützt Apple Pay oder Google Pay für Stripe-Konten oder Kundinnen und Kunden in Indien nicht. Daher können Sie Ihre Apple Pay- oder Google Pay-Integration nicht testen, wenn sich Ihre IP-Adresse in Indien befindet, selbst wenn sich das Stripe-Konto außerhalb Indiens befindet. ## Optional: Produkte und Preise erstellen Bevor Sie eine Checkout-Sitzung erstellen, können Sie *Produkte* (Products represent what your business sells—whether that's a good or a service) und *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) im Voraus anlegen. Verwenden Sie Produkte, um unterschiedliche physische Waren oder Servicestufen darzustellen und *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), um die Preisgestaltung jedes Produkts abzubilden. Sie können [Ihre Checkout-Sitzung so einrichten](https://docs.stripe.com/payments/checkout/pay-what-you-want.md), dass Trinkgelder und Spenden akzeptiert werden oder Produkte und Dienstleistungen zu frei wählbaren Preisen verkauft werden. Sie können zum Beispiel ein T-Shirt als Produkt mit einem Preis von 20 USD erstellen. Auf diese Weise können Sie Preise aktualisieren und hinzufügen, ohne die Details der zugrunde liegenden Produkte ändern zu müssen. Sie können Produkte und Preise entweder mit dem Stripe-Dashboard oder über die API erstellen. Erfahren Sie mehr darüber, [wie Produkte und Preise funktionieren](https://docs.stripe.com/products-prices/how-products-and-prices-work.md). #### API Es ist nur ein `name` erforderlich, um ein [Produkt](https://docs.stripe.com/api/products.md) mit der API zu erstellen. Checkout zeigt von Ihnen angegebene Informationen wie `name` des Produkts, `description` und `images` an. ```curl curl https://api.stripe.com/v1/products \ -u "<>:" \ -d name=T-shirt ``` Erstellen Sie als Nächstes einen [Preis](https://docs.stripe.com/api/prices.md), um zu definieren, wie viel Sie für ein Produkt berechnen möchten. Dazu gehört, wie viel das Produkt kostet und welche Währung verwendet werden soll. ```curl curl https://api.stripe.com/v1/prices \ -u "<>:" \ -d product="{{PRODUCT_ID}}" \ -d unit_amount=2000 \ -d currency=usd ``` #### Dashboard > Kopieren Sie Produkte, die in einer Sandbox erstellt wurden, in den Live-Modus, damit Sie sie nicht erneut erstellen müssen. Klicken Sie in der Detailansicht des Produkts im Dashboard oben rechts auf **In Live-Modus kopieren**. Dieser Schritt kann für jedes in einer Sandbox erstellte Produkt nur einmal durchgeführt werden. Nachfolgende Aktualisierungen des Testprodukts werden für das Liveprodukt nicht übernommen. Stellen Sie sicher, dass Sie sich in einer Sandbox befinden, indem Sie in der Kontoauswahl im Dashboard auf **Sandboxes** klicken. Definieren Sie als Nächstes die Artikel, die Sie verkaufen möchten. So erstellen Sie ein neues Produkt und einen neuen Preis: - Gehen Sie im Dashboard zum Abschnitt [Produkte](https://dashboard.stripe.com/test/products). - Klicken Sie auf **Produkt hinzufügen**. - Wählen Sie beim Festlegen des Preises **Einmalig** aus. Checkout zeigt von Ihnen angegebene Informationen wie Name des Produkts, Beschreibung und Bilder an. Jeder von Ihnen erstellte Preis hat eine ID. Wenn Sie eine Checkout-Sitzung erstellen, verweisen Sie auf die Preis-ID und die Menge. Wenn Sie in mehreren Währungen Verkäufe tätigen, legen Sie Ihren Preis in *mehreren Währungen* (A single Price object can support multiple currencies. Each purchase uses one of the supported currencies for the Price, depending on how you use the Price in your integration) fest. Checkout [erkennt die lokale Währung des/der Kund/in automatisch](https://docs.stripe.com/payments/checkout/localize-prices/manual-currency-prices.md) und gibt diese Währung an, wenn der Preis diese unterstützt. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d mode=payment \ -d "line_items[0][price]"={{PRICE_ID}} \ -d "line_items[0][quantity]"=1 \ -d ui_mode=embedded \ --data-urlencode return_url="https://example.com/return" ``` ## Optional: Kundendaten vorab angeben [Serverseitig] Wenn Sie die E-Mail-Adresse Ihrer Kundin/Ihres Kunden bereits erfasst haben und sie in einer Checkout-Sitzung vorab angeben möchten, übergeben Sie [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email) beim Erstellen der Checkout-Sitzung. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ --data-urlencode customer_email="customer@example.com" \ -d "line_items[0][price]"="{{PRICE_ID}}" \ -d "line_items[0][quantity]"=1 \ -d mode=payment \ -d ui_mode=embedded \ --data-urlencode return_url="https://example.com/return" ``` ## Optional: Angaben zur Zahlungsmethode speichern [Serverseitig] Standardmäßig sind Zahlungsmethoden, die für einmalige Zahlungen mit Checkout verwendet werden, nicht für die zukünftige Verwendung verfügbar. ### Zahlungsmethoden speichern, um sie Off-Session zu belasten Sie können Checkout die für eine einmalige Zahlung verwendeten Zahlungsmethoden speichern lassen, indem Sie das Argument [payment_intent_data.setup_future_usage](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-setup_future_usage) übergeben. Das ist hilfreich, wenn Sie eine hinterlegte Zahlungsmethode für künftige Gebühren, wie Stornogebühren oder Gebühren bei Nichterscheinen, erfassen müssen. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d customer_creation=always \ -d "line_items[0][price_data][currency]"=usd \ -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 ui_mode=embedded \ --data-urlencode return_url="https://example.com/return" \ -d "payment_intent_data[setup_future_usage]"=off_session ``` If you use Checkout in `subscription` mode, Stripe automatically saves the payment method to charge it for subsequent payments. Card payment methods saved to customers using either `setup_future_usage` or `subscription` mode don’t appear for return purchases in Checkout (more on this below). We recommend using [custom text](https://docs.stripe.com/payments/checkout/custom-components.md#customize-text) to link out to any relevant terms regarding the usage of saved payment information. > Die weltweiten Datenschutzgesetze sind komplex und vielschichtig. Wir empfehlen Ihnen, sich vor der Implementierung von [setup_future_usage](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-setup_future_usage) mit Ihrem Rechts- und Datenschutzteam in Verbindung zu setzen, da dies Ihr bestehendes Compliance-Framework für den Datenschutz beeinträchtigen könnte. Weitere Informationen zum Speichern von Zahlungsdaten finden Sie in den [Leitlinien des Europäischen Datenschutzausschusses](https://edpb.europa.eu/system/files/2021-05/recommendations022021_on_storage_of_credit_card_data_en_1.pdf). ### Zahlungsmethoden speichern, um sie in Checkout vorab auszufüllen Standardmäßig verwendet Checkout[Link](https://docs.stripe.com/payments/link/checkout-link.md) um Ihren Kunden die Möglichkeit zu geben, ihre Zahlungsinformationen sicher zu speichern und wiederzuverwenden. Wenn Sie es vorziehen, die Zahlungsmethoden selbst zu verwalten, verwenden Sie[saved_payment_method_options.payment_method_save](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-saved_payment_method_options-payment_method_save) wenn Sie eine Checkout Session erstellen, damit Ihre Kunden ihre Zahlungsmethoden für zukünftige Einkäufe in Checkout speichern können. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d customer_creation=always \ -d "line_items[0][price_data][currency]"=usd \ -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 ui_mode=embedded \ --data-urlencode return_url="https://example.com/return" \ -d "saved_payment_method_options[payment_method_save]"=enabled ``` Wenn Sie diesen Parameter entweder im [Zahlungs](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-mode)- oder im [Abonnement](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-mode)-Modus übergeben, wird ein optionales Kontrollkästchen angezeigt, mit dem Kundinnen/Kunden ihre Zahlungsmethode für zukünftige Käufe explizit speichern können. Wenn Kundinnen/Kunden dieses Kontrollkästchen aktivieren, speichert Checkout die Zahlungsmethode mit [allow_redisplay: always](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay). Checkout verwendet diesen Parameter, um zu ermitteln, ob eine Zahlungsmethode für zukünftige Käufe vorausgefüllt werden kann. Wenn Sie `saved_payment_method_options.payment_method_save` verwenden, müssen Sie `setup_future_usage` nicht übergeben, um die Zahlungsmethode zu speichern. Wenn Ihre Connect-Plattform verwendet [kundenkonfigurierte Konten](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), benutze unser [Anleitung](https://docs.stripe.com/connect/use-accounts-as-customers.md) Ersetzen `Customer` und Ereignisreferenzen in Ihrem Code mit den entsprechenden Accounts v2 API-Referenzen. Für die Verwendung von [saved_payment_method_options.payment_method_save](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-saved_payment_method_options-payment_method_save) ist ein `Customer` erforderlich. Um einen neuen Kunden/eine neue Kundin zu speichern, legen Sie die [customer_creation der Checkout-Sitzung](https://docs.stripe.com/api/checkout/sessions/create.md) auf `always` fest. Andernfalls wird in der Sitzung weder der Kunde/die Kundin noch die Zahlungsmethode gespeichert. Wenn `payment_method_save` nicht übergeben wird oder wenn der Kunde/die Kundin nicht zustimmt, die Zahlungsmethode zu speichern, speichert Checkout weiterhin Zahlungsmethoden, die im Modus `subscription` oder mit `setup_future_usage` erstellt wurden. Diese Zahlungsmethoden haben den `allow_redisplay`-Wert `limited`, der verhindert, dass sie für wiederkehrende Käufe vorausgefüllt werden, und es Ihnen ermöglicht, die Regeln des Kartennetzwerks und die Datenschutzbestimmungen einzuhalten. Erfahren Sie, wie Sie [das durch diese Modi aktivierte Standardverhalten ändern](https://support.stripe.com/questions/prefilling-saved-cards-in-checkout) und wie Sie das `allow_redisplay`-Verhalten ändern oder außer Kraft setzen können. > Sie können Checkout verwenden, um Karten und andere Zahlungsmethoden zu speichern, um sie Off-Session zu belasten, aber Checkout füllt nur gespeicherte Karten vorab aus. So können Sie [gespeicherte Karten vorab ausfüllen](https://support.stripe.com/questions/prefilling-saved-cards-in-checkout). Um eine Zahlungsmethode ohne anfängliche Zahlung zu speichern, [verwenden Sie Checkout im Einrichtungsmodus](https://docs.stripe.com/payments/save-and-reuse.md?platform=checkout). ### Lassen Sie Kundinnen und Kunden gespeicherte Zahlungsmethoden entfernen Damit Ihre Kundinnen und Kunden eine gespeicherte Zahlungsmethode entfernen können, damit sie für zukünftige Zahlungen nicht wieder angezeigt wird, verwenden Sie beim Erstellen einer Checkout-Sitzung [saved_payment_method_options.payment_method_remove](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-saved_payment_method_options-payment_method_remove). ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d customer={{CUSTOMER_ID}} \ -d "line_items[0][price_data][currency]"=usd \ -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 ui_mode=embedded \ --data-urlencode return_url="https://example.com/return" \ -d "saved_payment_method_options[payment_method_remove]"=enabled ``` Der Kunde/Die Kundin kann eine Zahlungsmethode nicht entfernen, wenn sie an ein aktives Abonnement gebunden ist und der Kunde/die Kundin keine Standardzahlungsmethode für Rechnungs- und Abonnementzahlungen gespeichert hat. ## Optional: Verwaltung von Kundenkonten [Kein Code] Lassen Sie Ihre Kundinnen/Kunden ihre eigenen Konten [verwalten](https://docs.stripe.com/customer-management.md) und senden sie ihnen einen Link zu Ihrem *Kundenportal* (The customer portal is a secure, Stripe-hosted page that lets your customers manage their subscriptions and billing details). Über das Kundenportal können sich Kundinnen/Kunden mit ihrer E-Mail-Adresse anmelden, um Abonnements zu verwalten, Zahlungsmethoden zu aktualisieren und vieles mehr. ## Optional: Getrennte Autorisierung und Erfassung [Serverseitig] Stripe unterstützt Kartenzahlungen in zwei Schritten. Sie können also Karten autorisieren und die Gelder erst später erfassen. Wenn Stripe eine Zahlung autorisiert, garantiert der Kartenaussteller die Gelder und stellt den Zahlungsbetrag auf der Kundenkarte zurück. Sie müssen die Gelder dann in einem bestimmten Zeitraum erfassen – wie lange Sie Zeit haben, [hängt von der Karte ab](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md#auth-capture-limitations)). Wenn Sie die Zahlung nicht vor Ablauf der Autorisierung erfassen, wird die Zahlung storniert und der Kartenaussteller gibt die zurückgestellten Gelder wieder frei. Separating authorization and capture is useful if you need to take additional actions between confirming that a customer is able to pay and collecting their payment. For example, if you’re selling stock-limited items, you might need to confirm that an item purchased by your customer using Checkout is still available before capturing their payment and fulfilling the purchase. Accomplish this using the following workflow: 1. Überprüfen Sie, ob Stripe die Zahlungsmethode der Kundin/des Kunden autorisiert hat. 1. Kontrollieren Sie in Ihrem Bestandsverwaltungssystem, ob der Artikel verfügbar ist. 1. Geben Sie in Ihrem Bestandsverwaltungssystem an, dass der Kunde/die Kundin den Artikel gekauft hat. 1. Erfassen Sie die Zahlung der Kundin/des Kunden. 1. Informieren Sie die Kundin/den Kunden auf Ihrer Bestätigungsseite darüber, ob der Kauf erfolgreich war. Um anzugeben, dass Sie Autorisierung und Erfassung trennen möchten, müssen Sie beim Erstellen der Checkout-Sitzung den Wert von [payment_intent_data.capture_method](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-capture_method) auf `manual` festlegen. Dadurch wird Stripe angewiesen, nur den Betrag auf der Karte der Kundin/des Kunden zu autorisieren. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price]"={{PRICE_ID}} \ -d "line_items[0][quantity]"=1 \ -d mode=payment \ -d "payment_intent_data[capture_method]"=manual \ -d ui_mode=embedded \ --data-urlencode return_url="https://example.com/return" ``` Eine nicht erfasste Zahlung können Sie entweder über den Endpoint [Dashboard](https://dashboard.stripe.com/test/payments?status%5B%5D=uncaptured) oder [Erfassung](https://docs.stripe.com/api/payment_intents/capture.md) erfassen. Um Zahlungen programmgesteuert zu erfassen, ist der Zugriff auf den PaymentIntent erforderlich, der während der Checkout-Sitzung erstellt wurde. Diesen können Sie über das [Session](https://docs.stripe.com/api/payment_intents/capture.md)-Objekt abrufen. ## Optional: Bestellabwicklung Erfahren Sie, wie Sie nach einer Kundenzahlung [programmgesteuert benachrichtigt werden](https://docs.stripe.com/checkout/fulfillment.md). ## See also - [Rabatte hinzufügen](https://docs.stripe.com/payments/checkout/discounts.md) - [Steuern einziehen](https://docs.stripe.com/payments/checkout/taxes.md) - [Steuer-IDs erfassen](https://docs.stripe.com/tax/checkout/tax-ids.md) - [Versand hinzufügen](https://docs.stripe.com/payments/collect-addresses.md?payment-ui=checkout) - [Ihr Branding anpassen](https://docs.stripe.com/payments/checkout/customization.md) # Checkout Sessions API > This is a Checkout Sessions API for when payment-ui is elements and api-integration is checkout. View the full page at https://docs.stripe.com/payments/accept-a-payment?payment-ui=elements&api-integration=checkout. Erstellen Sie ein individuelles Zahlungsformular mit [Stripe Elements](https://docs.stripe.com/payments/elements.md) und der [Checkout Sessions API](https://docs.stripe.com/api/checkout/sessions.md). [Vergleichen Sie diese Integration mit den anderen Integrationstypen von Stripe](https://docs.stripe.com/payments/online-payments.md#compare-features-and-availability). Die Checkout Sessions API bietet integrierte Unterstützung für Steuerberechnungen, Rabatte, Versand und Währungsumrechnung, wodurch sich der Aufwand für die Erstellung von benutzerdefiniertem Code reduziert. Dies ist der empfohlene Ansatz für die meisten Integrationen. Erfahren Sie mehr darüber, [wann Sie Checkout-Sitzungen anstelle von PaymentIntents verwenden sollten](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md). Mit dem clientseitigen und serverseitigen Code wird ein Bezahlformular erstellt, das verschiedene Zahlungsmethoden akzeptiert. #### Integrationsaufwand Complexity: 3/5 #### Integrationstyp Komponenten der Nutzeroberfläche in einem nutzerdefinierten Zahlungsablauf kombinieren #### Anpassung der Nutzeroberfläche Anpassung auf CSS-Ebene mit der [Appearance API](https://docs.stripe.com/elements/appearance-api.md) ## Server einrichten [Serverseitig] Bevor Sie beginnen, müssen Sie sich für ein Stripe-Konto [registrieren](https://dashboard.stripe.com/register). Verwenden Sie die offiziellen Bibliotheken von Stripe, um von Ihrer Anwendung aus auf die API zuzugreifen. #### 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' ``` ## Checkout-Sitzung erstellen [Serverseitig] Fügen Sie auf Ihrem Server einen Endpoint hinzu, der eine [Checkout-Sitzung](https://docs.stripe.com/api/checkout/sessions/create.md) erstellt und sein [`client_secret`](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-client_secret) an Ihr Frontend zurückgibt. Eine Checkout-Sitzung stellt die Sitzung Ihrer Kundin/Ihres Kunden dar, während sie/er für einmalige Käufe oder Abos bezahlt. Checkout-Sitzungen laufen 24 Stunden nach Erstellung ab. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d ui_mode=custom \ -d "line_items[0][price_data][currency]"=usd \ -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 \ --data-urlencode return_url="https://example.com/return?session_id={CHECKOUT_SESSION_ID}" ``` ## Frontend einrichten [Clientseitig] #### HTML + JS Fügen Sie das Stripe.js-Skript auf Ihrer Bezahlseite ein, indem Sie es zum `head` der HTML-Datei hinzufügen. Laden Sie Stripe.js immer direkt von js.stripe.com, um PCI-konform zu bleiben. Fügen Sie das Skript nicht in ein Paket ein und hosten Sie selbst keine Kopie davon. Verwenden Sie unbedingt die neueste Version von Stripe.js. Erfahren Sie mehr über die [Stripe.js-Versionierung](https://docs.stripe.com/sdks/stripejs-versioning.md). ```html Checkout ``` > Stripe stellt ein npm-Paket bereit, mit dem Sie Stripe.js als Modul laden können. Siehe das [Projekt auf GitHub](https://github.com/stripe/stripe-js). Version [7.0.0](https://www.npmjs.com/package/%40stripe/stripe-js/v/7.0.0) oder höher ist erforderlich. Initialisieren Sie Stripe.js. ```js // Set your publishable key: remember to change this to your live publishable key in production // See your keys here: https://dashboard.stripe.com/apikeys const stripe = Stripe( '<>', ); ``` #### React 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 der öffentlichen npm-Registry. Sie benötigen mindestens Version 5.0.0 für React Stripe.js und Version 8.0.0 für den Stripe.js-Loader. ```bash npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` Initialisieren Sie eine `stripe`-Instanz auf Ihrem Frontend mit Ihrem veröffentlichbaren Schlüssel. ```javascript import {loadStripe} from '@stripe/stripe-js'; const stripe = loadStripe("<>"); ``` ## Bezahlvorgang initialisieren [Clientseitig] #### HTML + JS Rufen Sie [initCheckout](https://docs.stripe.com/js/custom_checkout/init) auf und geben Sie das `clientSecret` weiter. `initCheckout` gibt ein [Checkout](https://docs.stripe.com/js/custom_checkout)-Objekt zurück, das Daten aus der Checkout-Session und Methoden zur Aktualisierung enthält. Lesen Sie `total` und `lineItems` aus [actions.getSession()](https://docs.stripe.com/js/custom_checkout/session) und zeigen Sie sie in Ihrer Benutzeroberfläche an. So können Sie neue Funktionen mit minimalen Codeänderungen aktivieren. Zum Beispiel erfordert das Hinzufügen [manueller Währungspreise](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md) keine UI-Änderungen, wenn `total` angezeigt wird. ```html

``` ```javascript const clientSecret = fetch('/create-checkout-session', {method: 'POST'}) .then((response) => response.json()) .then((json) => json.client_secret); const checkout = stripe.initCheckout({clientSecret}); const loadActionsResult = await checkout.loadActions(); if (loadActionsResult.type === 'success') { const session = loadActionsResult.actions.getSession(); const checkoutContainer = document.getElementById('checkout-container'); checkoutContainer.append(JSON.stringify(session.lineItems, null, 2)); checkoutContainer.append(document.createElement('br')); checkoutContainer.append(`Total: ${session.total.total.amount}`); } ``` #### React Umhüllen Sie Ihre Anmeldung mit der [CheckoutProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider)-Komponente und übergeben Sie `clientSecret` sowie die `Stripe`-Instanz. ```jsx import React from 'react'; import {CheckoutProvider} from '@stripe/react-stripe-js/checkout'; import CheckoutForm from './CheckoutForm'; const clientSecret = fetch('/create-checkout-session', {method: 'POST'}) .then((response) => response.json()) .then((json) => json.client_secret); const App = () => { return ( ); }; export default App; ``` Greifen Sie auf das [Checkout](https://docs.stripe.com/js/custom_checkout)-Objekt in Ihrer Checkout-Formularkomponente, indem Sie den `useCheckout()`-Hook verwenden. Das `Checkout`-Objekt enthält Daten aus der Checkout-Sitzung und Methoden zu ihrer Aktualisierung. Lesen Sie `total` und `lineItems` aus dem `Checkout`-Objekt und zeigen Sie sie in Ihrer Benutzeroberfläche an. So können Sie Funktionen mit minimalen Codeänderungen aktivieren. Zum Beispiel erfordert das Hinzufügen [manueller Währungspreise](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md) keine UI-Änderungen, wenn `total` angezeigt wird. ```jsx import React from 'react'; import {useCheckout} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => {const checkoutState = useCheckout(); if (checkoutState.type === 'loading') { return (

); } if (checkoutState.type === 'error') { return (

Error: {checkoutState.error.message}

); } return ( ); }; ``` ## E-Mail-Adressen von Kundinnen/Kunden erfassen [Clientseitig] #### HTML + JS Bitte geben Sie beim Abschluss einer Checkout-Sitzung eine gültige E-Mail-Adresse an. Diese Anweisungen erstellen eine E-Mail-Eingabe und verwenden [updateEmail](https://docs.stripe.com/js/custom_checkout/update_email) aus dem Objekt `Checkout`. Alternativ können Sie: - Übergeben Sie die [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email) oder [customer](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) beim Erstellen der Checkout-Sitzung. Stripe überprüft die auf diese Weise angegebenen E-Mail-Adressen. - Geben Sie eine E-Mail-Adresse ein, die Sie bereits bei [checkout.confirm](https://docs.stripe.com/js/custom_checkout/confirm) validiert haben. ```html

``` ```javascript const checkout = stripe.initCheckout({clientSecret}); const loadActionsResult = await checkout.loadActions(); if (loadActionsResult.type === 'success') { const {actions} = loadActionsResult; const emailInput = document.getElementById('email'); const emailErrors = document.getElementById('email-errors'); emailInput.addEventListener('input', () => { // Clear any validation errors emailErrors.textContent = ''; }); emailInput.addEventListener('blur', () => { const newEmail = emailInput.value;actions.updateEmail(newEmail).then((result) => { if (result.error) { emailErrors.textContent = result.error.message; } }); }); } ``` #### React Bitte geben Sie beim Abschluss einer Checkout-Sitzung eine gültige E-Mail-Adresse an. Diese Anweisungen erstellen eine E-Mail-Eingabe und verwenden [updateEmail](https://docs.stripe.com/js/react_stripe_js/checkout/update_email) aus dem Objekt `Checkout`. Alternativ können Sie: - Übergeben Sie die [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email) oder [customer](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) beim Erstellen der Checkout-Sitzung. Stripe überprüft die auf diese Weise angegebenen E-Mail-Adressen. - Geben Sie eine E-Mail-Adresse ein, die Sie bereits auf [confirm](https://docs.stripe.com/js/react_stripe_js/checkout/confirm) validiert haben. ```jsx import React from 'react'; import {useCheckout} from '@stripe/react-stripe-js/checkout'; const EmailInput = () => { const checkoutState = useCheckout(); const [email, setEmail] = React.useState(''); const [error, setError] = React.useState(null); if (checkoutState.type === 'loading') { return (

); } else if (checkoutState.type === 'error') { return (

Error: {checkoutState.error.message}

); } const handleBlur = () => {checkoutState.checkout.updateEmail(email).then((result) => { if (result.type === 'error') { setError(result.error); } }) }; const handleChange = (e) => { setError(null); setEmail(e.target.value); }; return (

Email {error &&

{error.message}

}

); }; export default EmailInput; ``` ## Zahlungsdetails erfassen [Clientseitig] Erfassen Sie Zahlungsdetails auf dem Client mit dem [Payment Element](https://docs.stripe.com/payments/payment-element.md). Das Payment Element ist eine vorgefertigte Komponente der Nutzeroberfläche, das die Erfassung von Zahlungsdaten für verschiedene Zahlungsmethoden vereinfacht. Das Payment Element enthält einen iFrame, der Zahlungsinformationen über eine sichere HTTPS-Verbindung an Stripe sendet. Vermeiden Sie es, das Payment Element in einem anderen iFrame zu platzieren, da einige Zahlungsmethoden die Weiterleitung an eine andere Seite zur Zahlungsbestätigung voraussetzen. Wenn Sie sich für die Verwendung eines Iframes entscheiden und Apple Pay oder Google Pay akzeptieren möchten, muss das Attribut [Zulassen](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) des Iframes auf `"payment*"` gesetzt sein. Die Adresse der Bezahlseite muss mit `https://` beginnen, nicht mit `http://`, damit Ihre Integration funktioniert. Sie können Ihre Integration ohne HTTPS testen. Denken Sie jedoch daran, dieses zu [aktivieren](https://docs.stripe.com/security/guide.md#tls), wenn Sie bereit sind, Live-Zahlungen zu akzeptieren. #### HTML + JS Erstellen Sie zunächst ein Container-DOM-Element, um das [Payment Element](https://docs.stripe.com/payments/payment-element.md) zu verbinden. Erstellen Sie dann eine Instanz des `Payment Element` mit [checkout.createPaymentElement](https://docs.stripe.com/js/custom_checkout/create_payment_element) und verbinden Sie es durch Aufrufen von [element.mount](https://docs.stripe.com/js/element/mount), wobei Sie entweder einen CSS-Selektor oder das Container-DOM-Element angeben. ```html

``` ```javascript const paymentElement = checkout.createPaymentElement(); paymentElement.mount('#payment-element'); ``` Die unterstützten Optionen finden Sie in der [Stripe.js-Dokumentation](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options). Sie können das [Erscheinungsbild](https://docs.stripe.com/payments/checkout/customization/appearance.md) aller Elements anpassen, indem Sie [elementsOptions.appearance](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-appearance) übergeben, wenn Sie Checkout im Frontend initialisieren. #### React Stellen Sie die Komponente [Payment Element](https://docs.stripe.com/payments/payment-element.md) im [CheckoutProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider) bereit. ```jsx import React from 'react';import {PaymentElement, useCheckout} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => { const checkoutState = useCheckout(); if (checkoutState.type === 'loading') { return (

); } if (checkoutState.type === 'error') { return (

Error: {checkoutState.error.message}

); } return (

{JSON.stringify(checkoutState.checkout.lineItems, null, 2)} {/* A formatted total amount */} Total: {checkoutState.checkout.total.total.amount} ); }; export default CheckoutForm; ``` Die unterstützten Optionen finden Sie in der [Stripe.js-Dokumentation](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options). Sie können für alle Elemente [das Erscheinungsbild anpassen](https://docs.stripe.com/payments/checkout/customization/appearance.md), indem Sie [elementsOptions.appearance](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions-appearance) an den [CheckoutProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider) übergeben. ## Zahlung übermitteln [Clientseitig] #### HTML + JS Zeigen Sie eine Schaltfläche **Bezahlen** an, die [confirm](https://docs.stripe.com/js/custom_checkout/confirm) von der `Checkout`-Instanz aufruft, um die Zahlung zu übermitteln. ```html

``` ```js const checkout = stripe.initCheckout({clientSecret}); checkout.on('change', (session) => { document.getElementById('pay-button').disabled = !session.canConfirm; }); const loadActionsResult = await checkout.loadActions(); if (loadActionsResult.type === 'success') { const {actions} = loadActionsResult; const button = document.getElementById('pay-button'); const errors = document.getElementById('confirm-errors'); button.addEventListener('click', () => { // Clear any validation errors errors.textContent = ''; actions.confirm().then((result) => { if (result.type === 'error') { errors.textContent = result.error.message; } }); }); } ``` #### React Zeigen Sie eine Schaltfläche **Bezahlen** an, die [bestätigen](https://docs.stripe.com/js/custom_checkout/confirm) von [useCheckout](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout) aufruft, um die Zahlung zu übermitteln. ```jsx import React from 'react'; import {useCheckout} from '@stripe/react-stripe-js/checkout'; const PayButton = () => { const checkoutState = useCheckout(); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(null); if (checkoutState.type !== "success") { return null; } const handleClick = () => { setLoading(true);checkoutState.checkout.confirm().then((result) => { if (result.type === 'error') { setError(result.error) } setLoading(false); }) }; return (

{error &&

{error.message}

}

) }; export default PayButton; ``` ## Ihre Integration testen 1. Navigieren Sie zu Ihrer Bezahlseite. 1. Geben Sie in den Zahlungsdetails eine Zahlungsmethode aus der folgenden Tabelle ein. Für Kartenzahlungen: - Geben Sie für die Karte ein beliebiges Ablaufdatum in der Zukunft ein. - Geben Sie als Prüfziffer/CVC eine 3-stellige Zahl ein. - Geben Sie eine beliebige Postleitzahl ein. 1. Senden Sie die Zahlung an Stripe. 1. Gehen Sie zum Dashboard und suchen Sie auf der Seite [Transaktionen](https://dashboard.stripe.com/test/payments?status%5B0%5D=successful) nach der Zahlung. Wenn Ihre Zahlung erfolgreich war, wird sie in dieser Liste angezeigt. 1. Klicken Sie auf Ihre Zahlung, um weitere Details wie Rechnungsinformationen und die Liste der gekauften Artikel anzuzeigen. Sie können diese Informationen verwenden, um die [Bestellung abzuwickeln](https://docs.stripe.com/checkout/fulfillment.md). #### Karten | Kartennummer | Szenario | So führen Sie den Test durch | | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | | 4242424242424242 | Die Kartenzahlung ist erfolgreich und es ist keine Authentifizierung erforderlich. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | 4000002500003155 | Für die Kartenzahlung ist eine *Authentifizierung* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase) erforderlich. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | 4000000000009995 | Die Karte wird mit einem Ablehnungscode wie `insufficient_funds` abgelehnt. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | 6205500000000000004 | Die UnionPay-Karte hat eine variable Länge von 13 bis 19 Ziffern. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | #### Digitale Geldbörsen (Wallets) | Zahlungsmethode | Szenario | So führen Sie den Test durch | | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Alipay | Ihr Kunde/Ihre Kundin zahlt erfolgreich mit einer auf Weiterleitung basierenden Zahlungsmethode mit [sofortiger Benachrichtigung](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Wählen Sie eine beliebige, auf Weiterleitung basierende Zahlungsmethode aus, füllen Sie die erforderlichen Informationen aus und bestätigen Sie die Zahlung. Klicken Sie dann auf der Weiterleitungsseite auf **Testzahlung abschließen**. | #### Bankumleitungen | Zahlungsmethode | Szenario | So führen Sie den Test durch | | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | BECS-Lastschriftverfahren | Ihr/e Kund/in zahlt erfolgreich mit dem BECS-Lastschriftverfahren. | Füllen Sie das Formular mit der Kontonummer `900123456` und BSB `000000` aus. Der bestätigte PaymentIntent geht zunächst in den Status `processing` über und dann 3 Minuten später in den Status `succeeded`. | | BECS-Lastschriftverfahren | Die Zahlung Ihres/Ihrer Kund/in schlägt fehl mit Code `account_closed` fehl. | Füllen Sie das Formular mit der Kontonummer `111111113` und BSB `000000` aus. | | Bancontact, EPS, iDEAL und Przelewy24 | Ihr/e Kund/in konnte sich auf der iDEAL-Weiterleitungsseite für eine auf Weiterleitung basierende Zahlungsmethode mit sofortiger Benachrichtigung nicht authentifizieren. | Wählen Sie eine beliebige, auf Weiterleitung basierende Zahlungsmethode aus, füllen Sie die erforderlichen Informationen aus und bestätigen Sie die Zahlung. Klicken Sie dann auf der Weiterleitungsseite auf **Testzahlung fehlgeschlagen**. | | Pay by Bank | Ihr Kunde/Ihre Kundin zahlt erfolgreich mit einer auf Weiterleitung basierenden Zahlungsmethode mit [verzögerter Benachrichtigung](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Wählen Sie die Zahlungsmethode aus, füllen Sie die erforderlichen Informationen aus und bestätigen Sie die Zahlung. Klicken Sie dann auf der Weiterleitungsseite auf **Testzahlung abschließen**. | | Pay by Bank | Ihr/e Kund/in konnte sich auf der iDEAL-Weiterleitungsseite für eine auf Weiterleitung basierende Zahlungsmethode mit verzögerter Benachrichtigung nicht authentifizieren. | Wählen Sie die Zahlungsmethode aus, füllen Sie die erforderlichen Informationen aus und bestätigen Sie die Zahlung. Klicken Sie dann auf der Weiterleitungsseite auf **Testzahlung fehlgeschlagen**. | | BLIK | BLIK-Zahlungen können aus verschiedenen Gründen fehlschlagen. Es gibt sofortige Fehler (der Code ist abgelaufen oder ungültig), verzögerte Fehler (die Bank lehnt ab) oder Zeitüberschreitungen (der/die Kund/in hat nicht rechtzeitig reagiert). | Verwenden Sie E-Mail-Muster, um [die verschiedenen Fehler zu simulieren](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures) | #### Banklastschriften | Zahlungsmethode | Szenario | So führen Sie den Test durch | | ---------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | SEPA-Lastschrift | Ihr/e Kund/in zahlt erfolgreich mit dem SEPA-Lastschriftverfahren. | Füllen Sie das Formular mit der Kontonummer `AT321904300235473204` aus. Die bestätigte PaymentIntent geht zunächst in den Status „wird verarbeitet“ und dann drei Minuten später in den Status „erfolgreich“ über. | | SEPA-Lastschrift | Der Status der PaymentIntent Ihres/Ihrer Kund/in wechselt von `processing` zu `requires_payment_method`. | Füllen Sie das Formular mit der Kontonummer `AT861904300235473202` aus. | #### Gutscheine | Zahlungsmethode | Szenario | So führen Sie den Test durch | | --------------- | ------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- | | Boleto, OXXO | Ihr/e Kund/in bezahlt mit einem Boleto- oder OXXO-Gutschein. | Wählen Sie als Zahlungsmethode Boleto oder OXXO aus und übermitteln Sie die Zahlung. Schließen Sie das OXXO-Dialogfeld, nachdem es angezeigt wurde. | Hier finden Sie weitere Informationen zum [Testen](https://docs.stripe.com/testing.md) Ihrer Integration. ## Optional: Produkte und Preise erstellen Bevor Sie eine Checkout-Sitzung erstellen, können Sie *Produkte* (Products represent what your business sells—whether that's a good or a service) und *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) im Voraus anlegen. Verwenden Sie Produkte, um unterschiedliche physische Waren oder Servicestufen darzustellen und *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), um die Preisgestaltung jedes Produkts abzubilden. Sie können [Ihre Checkout-Sitzung so einrichten](https://docs.stripe.com/payments/checkout/pay-what-you-want.md), dass Trinkgelder und Spenden akzeptiert werden oder Produkte und Dienstleistungen zu frei wählbaren Preisen verkauft werden. Sie können zum Beispiel ein T-Shirt als Produkt mit einem Preis von 20 USD erstellen. Auf diese Weise können Sie Preise aktualisieren und hinzufügen, ohne die Details der zugrunde liegenden Produkte ändern zu müssen. Sie können Produkte und Preise entweder mit dem Stripe-Dashboard oder über die API erstellen. Erfahren Sie mehr darüber, [wie Produkte und Preise funktionieren](https://docs.stripe.com/products-prices/how-products-and-prices-work.md). #### API Es ist nur ein `name` erforderlich, um ein [Produkt](https://docs.stripe.com/api/products.md) mit der API zu erstellen. Checkout zeigt von Ihnen angegebene Informationen wie `name` des Produkts, `description` und `images` an. ```curl curl https://api.stripe.com/v1/products \ -u "<>:" \ -d name=T-shirt ``` Erstellen Sie als Nächstes einen [Preis](https://docs.stripe.com/api/prices.md), um zu definieren, wie viel Sie für ein Produkt berechnen möchten. Dazu gehört, wie viel das Produkt kostet und welche Währung verwendet werden soll. ```curl curl https://api.stripe.com/v1/prices \ -u "<>:" \ -d product="{{PRODUCT_ID}}" \ -d unit_amount=2000 \ -d currency=usd ``` #### Dashboard > Kopieren Sie Produkte, die in einer Sandbox erstellt wurden, in den Live-Modus, damit Sie sie nicht erneut erstellen müssen. Klicken Sie in der Detailansicht des Produkts im Dashboard oben rechts auf **In Live-Modus kopieren**. Dieser Schritt kann für jedes in einer Sandbox erstellte Produkt nur einmal durchgeführt werden. Nachfolgende Aktualisierungen des Testprodukts werden für das Liveprodukt nicht übernommen. Stellen Sie sicher, dass Sie sich in einer Sandbox befinden, indem Sie in der Kontoauswahl im Dashboard auf **Sandboxes** klicken. Definieren Sie als Nächstes die Artikel, die Sie verkaufen möchten. So erstellen Sie ein neues Produkt und einen neuen Preis: - Gehen Sie im Dashboard zum Abschnitt [Produkte](https://dashboard.stripe.com/test/products). - Klicken Sie auf **Produkt hinzufügen**. - Wählen Sie beim Festlegen des Preises **Einmalig** aus. Checkout zeigt von Ihnen angegebene Informationen wie Name des Produkts, Beschreibung und Bilder an. Jeder von Ihnen erstellte Preis hat eine ID. Wenn Sie eine Checkout-Sitzung erstellen, verweisen Sie auf die Preis-ID und die Menge. Wenn Sie in mehreren Währungen Verkäufe tätigen, legen Sie Ihren Preis in *mehreren Währungen* (A single Price object can support multiple currencies. Each purchase uses one of the supported currencies for the Price, depending on how you use the Price in your integration) fest. Checkout [erkennt die lokale Währung des/der Kund/in automatisch](https://docs.stripe.com/payments/checkout/localize-prices/manual-currency-prices.md) und gibt diese Währung an, wenn der Preis diese unterstützt. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d ui_mode=custom \ -d mode=payment \ -d "line_items[0][price]"={{PRICE_ID}} \ -d "line_items[0][quantity]"=1 \ --data-urlencode return_url="https://example.com/return?session_id={CHECKOUT_SESSION_ID}" ``` ## Optional: Kundendaten vorab angeben [Serverseitig] Wenn Sie die E-Mail-Adresse Ihrer Kundin/Ihres Kunden bereits erfasst haben und sie in einer Checkout-Sitzung vorab angeben möchten, übergeben Sie [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email) beim Erstellen der Checkout-Sitzung. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ --data-urlencode customer_email="customer@example.com" \ -d ui_mode=custom \ -d mode=payment \ -d "line_items[0][price]"={{PRICE_ID}} \ -d "line_items[0][quantity]"=1 \ --data-urlencode return_url="https://example.com/return?session_id={CHECKOUT_SESSION_ID}" ``` ## Optional: Angaben zur Zahlungsmethode speichern Erfahren Sie, wie [Sie eine Zahlung akzeptieren und die Zahlungsdaten Ihres Kunden bzw. Ihrer Kundin für zukünftige Käufe speichern können](https://docs.stripe.com/payments/save-during-payment.md). ## Optional: Änderungen der Checkout-Sitzung überwachen ### Änderungen der Checkout-Sitzung überwachen Sie können Änderungen an der [Checkout-Sitzung](https://docs.stripe.com/api/checkout/sessions.md) überwachen, indem Sie mit [checkout.on](https://docs.stripe.com/js/custom_checkout/change_event) einen Ereignis-Listener für das `change`-Ereignis hinzufügen. #### HTML + JS ```javascript checkout = stripe.initCheckout({ clientSecret: promise, elementsOptions: { appearance }, }); checkout.on('change', (session) => { // Handle changes to the checkout session }); ``` #### React ```jsx import React from 'react'; import { useCheckout } from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => { const checkoutState = useCheckout(); if (checkoutState.type === 'success') { checkoutState.checkout.on('change', (session) => { // Handle changes to the checkout session }); } }; ``` ## Optional: Rechnungs- und Versandadressen erfassen ## Rechnungsadresse erfassen Standardmäßig erfasst eine Checkout-Sitzung die minimalen Rechnungsdetails, die für die Zahlung über das Payment Element erforderlich sind. ### Billing Address Element verwenden Mit dem Billing Address Element können Sie vollständige Rechnungsadressen erfassen. Übergeben Sie zunächst [billing_address_collection=required](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-billing_address_collection), wenn Sie die Checkout-Sitzung erstellen. #### HTML + JS Erstellen Sie ein Container-DOM-Element, um das Billing Address Element zu verbinden. Erstellen Sie dann eine Instanz des Billing Address Element mit [checkout.createBillingAddressElement](https://docs.stripe.com/js/custom_checkout/create_billing_address_element) und verbinden Sie es durch Aufrufen von [element.mount](https://docs.stripe.com/js/element/mount), wobei Sie entweder einen CSS-Selektor oder das Container-DOM-Element angeben. ```html

``` ```javascript const billingAddressElement = checkout.createBillingAddressElement(); billingAddressElement.mount('#billing-address'); ``` Das Billing Address Element unterstützt die folgenden Optionen: - [Kontakte](https://docs.stripe.com/js/custom_checkout/create_billing_address_element#custom_checkout_create_billing_address_element-options-contacts) - [Anzeigen](https://docs.stripe.com/js/custom_checkout/create_billing_address_element#custom_checkout_create_billing_address_element-options-display) #### React Verbinden Sie die Komponente `BillingAddressElement` innerhalb des `CheckoutProvider`. ```jsx import React from 'react'; import {BillingAddressElement} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => { return (

) }; ``` Das Billing Address Element unterstützt die folgenden Eigenschaften: - [Kontakte](https://docs.stripe.com/js/custom_checkout/create_billing_address_element#custom_checkout_create_billing_address_element-options-contacts) - [Anzeigen](https://docs.stripe.com/js/custom_checkout/create_billing_address_element#custom_checkout_create_billing_address_element-options-display) ### Nutzerdefinierte Formulare verwenden Sie können Ihr eigenes Formular erstellen, um Rechnungsadressen zu erfassen. - Wenn Ihre Bezahlvorgangsseite vor der Bestätigung einen separaten Schritt zur Adressenerfassung enthält, rufen Sie [updateBillingAddress](https://docs.stripe.com/js/react_stripe_js/checkout/update_billing_address) auf, wenn Ihre Kundin/Ihr Kunde die Adresse übermittelt. - Andernfalls können Sie die Adresse übermitteln, wenn Ihre Kundin/Ihr Kunde auf die Schaltfläche „Bezahlen“ klickt, indem Sie [billingAddress](https://docs.stripe.com/js/custom_checkout/confirm#custom_checkout_session_confirm-options-billingAddress) an [„bestätigen“](https://docs.stripe.com/js/custom_checkout/confirm) übergeben. ### Rechnungsadressen zu Teil erfassen Um nur einen Teil der Rechnungsadressen zu erfassen, z. B. nur das Land und die Postleitzahl, übergeben Sie [billing_address_collection=auto](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-billing_address_collection). Wenn Sie nur einen Teil der Rechnungsadressen erfassen, müssen Sie [die Adressen manuell erfassen](https://docs.stripe.com/payments/accept-a-payment.md#collect-billing-addresses-manually). Standardmäßig erfasst das Payment Element automatisch die minimalen Rechnungsdetails, die für die Zahlung erforderlich sind. Um eine doppelte Erfassung von Rechnungsdetails zu vermeiden, übergeben Sie [fields.billingDetails=never](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options-fields-billingDetails) beim Erstellen des Payment Element. Wenn Sie nur einen Teil der Rechnungsdaten (z. B. den Namen der Kundin/des Kunden) erfassen möchten, übergeben Sie `never` nur für die Felder, die Sie selbst erfassen möchten. ## Versandadresse erfassen Um die Versandadresse eines Kunden/einer Kundin zu erfassen, übergeben Sie beim Erstellen der Checkout-Sitzung den Parameter [shipping_address_collection](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-shipping_address_collection). Wenn Sie eine Versandadresse erfassen, müssen Sie auch angeben, in welche Länder der Versand zulässig ist. Konfigurieren Sie die Eigenschaft [allowed_countries](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-shipping_address_collection-allowed_countries) mit einem Array aus [zweistelligen ISO-Ländercodes](https://www.nationsonline.org/oneworld/country_code_list.htm). ### So verwenden Sie das Shipping Address Element Mit dem Shipping Address Element können Sie komplette Versandadressen erfassen. #### HTML + JS Erstellen Sie ein Container-DOM-Element, um das Shipping Address Element zu verbinden. Erstellen Sie dann eine Instanz des Shipping Address Element mit [checkout.createShippingAddressElement](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element) und verbinden Sie es durch Aufrufen von [element.mount](https://docs.stripe.com/js/element/mount), wobei Sie entweder einen CSS-Selektor oder das Container-DOM-Element angeben. ```html

``` ```javascript const shippingAddressElement = checkout.createShippingAddressElement(); shippingAddressElement.mount('#shipping-address'); ``` Das Shipping Address Element unterstützt die folgenden Optionen: - [Kontakte](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element#custom_checkout_create_shipping_address_element-options-contacts) - [Anzeigen](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element#custom_checkout_create_shipping_address_element-options-display) #### React Verbinden Sie die Komponente `ShippingAddressElement` innerhalb des `CheckoutProvider`. ```jsx import React from 'react'; import {ShippingAddressElement} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => { return (

) }; ``` Das Shipping Address Element unterstützt die folgenden Eigenschaften: - [Kontakte](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element#custom_checkout_create_shipping_address_element-options-contacts) - [Anzeigen](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element#custom_checkout_create_shipping_address_element-options-display) ### Änderungen der Checkout-Sitzung überwachen Sie können Änderungen an der [Checkout-Sitzung](https://docs.stripe.com/api/checkout/sessions.md) überwachen, indem Sie einen Ereignis-Listener hinzufügen, um adressbezogene Änderungen zu verarbeiten. #### HTML + JS Verwenden Sie das [Session-Objekt](https://docs.stripe.com/js/custom_checkout/session_object), um den Versandbetrag in Ihrem Bezahlformular darzustellen. ```html

Totals

``` ```javascript const checkout = stripe.initCheckout({clientSecret}); const subtotal = document.getElementById('subtotal'); const shipping = document.getElementById('shipping'); const total = document.getElementById('total'); checkout.on('change', (session) => { subtotal.textContent = `Subtotal: ${session.total.subtotal.amount}`; shipping.textContent = `Shipping: ${session.total.shippingRate.amount}`; total.textContent = `Total: ${session.total.total.amount}`; }); ``` #### React Verwenden Sie [useCheckout](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout), um die Versandkosten in Ihrem Bezahlformular anzuzeigen. ```jsx import React from 'react'; import {useCheckout, ShippingAddressElement} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => { const checkoutState = useCheckout(); if (checkoutState.type === 'error') { return (

Error: {checkoutState.error.message}

); } return (

Checkout Summary

{checkoutState.type === 'success' && ( <>

              {JSON.stringify(checkoutState.checkout.lineItems, null, 2)}

Totals

              Subtotal: {checkoutState.checkout.total.subtotal.amount}
              Shipping: {checkoutState.checkout.total.shippingRate.amount}
              Total: {checkoutState.checkout.total.total.amount}

)}

) }; ``` ### Rechnungs- und Versandadressen synchronisieren Wenn Sie sowohl ein Rechnungsadressen-Element als auch ein Versandadressen-Element verwenden, können Sie ein Kontrollkästchen anzeigen, mit dem Kundinnen und Kunden ihre Rechnungs- und Versandadressen synchronisieren können. #### HTML + JS Übergeben Sie bei der Initialisierung von Checkout die Option [syncAddressCheckbox](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-syncAddressCheckbox) in `elementsOptions`, um zu konfigurieren, welches Adressen-Element das Kontrollkästchen anzeigt. ```javascript const checkout = stripe.initCheckout({ clientSecret, elementsOptions: { syncAddressCheckbox: 'shipping', }, }); ``` #### React Übergeben Sie die Option [syncAddressCheckbox](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions-syncAddressCheckbox) in `elementsOptions` an den `CheckoutProvider`, um zu konfigurieren, welches Adressen-Element das Kontrollkästchen anzeigt. ```jsx promise, elementsOptions: { syncAddressCheckbox: 'shipping', }, }} > ``` Setzen Sie den Wert auf `'billing'` oder `'shipping'`, um auszuwählen, welches Adressen-Element das Kontrollkästchen anzeigt. Setzen Sie ihn auf `'none'`, um das Kontrollkästchen auszublenden. ### Ein nutzerdefiniertes Formular verwenden Sie können Ihr eigenes Formular erstellen, um Versandadressen zu erfassen. - Wenn Ihre Bezahlvorgangsseite vor der Bestätigung einen separaten Schritt zur Adressenerfassung enthält, rufen Sie [updateShippingAddress](https://docs.stripe.com/js/react_stripe_js/checkout/update_shipping_address) auf, wenn Ihre Kundin/Ihr Kunde die Adresse übermittelt. - Andernfalls können Sie die Adresse übermitteln, wenn Ihre Kundin/Ihr Kunde auf die Schaltfläche „Bezahlen“ klickt, indem Sie [shippingAddress](https://docs.stripe.com/js/custom_checkout/confirm#custom_checkout_session_confirm-options-shippingAddress) an [„bestätigen“](https://docs.stripe.com/js/custom_checkout/confirm) übergeben. ## Optional: Getrennte Autorisierung und Erfassung [Serverseitig] Stripe unterstützt Kartenzahlungen in zwei Schritten. Sie können also Karten autorisieren und die Gelder erst später erfassen. Wenn Stripe eine Zahlung autorisiert, garantiert der Kartenaussteller die Gelder und stellt den Zahlungsbetrag auf der Kundenkarte zurück. Sie müssen die Gelder dann in einem bestimmten Zeitraum erfassen – wie lange Sie Zeit haben, [hängt von der Karte ab](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md#auth-capture-limitations)). Wenn Sie die Zahlung nicht vor Ablauf der Autorisierung erfassen, wird die Zahlung storniert und der Kartenaussteller gibt die zurückgestellten Gelder wieder frei. Separating authorization and capture is useful if you need to take additional actions between confirming that a customer is able to pay and collecting their payment. For example, if you’re selling stock-limited items, you might need to confirm that an item purchased by your customer using Checkout is still available before capturing their payment and fulfilling the purchase. Accomplish this using the following workflow: 1. Überprüfen Sie, ob Stripe die Zahlungsmethode der Kundin/des Kunden autorisiert hat. 1. Kontrollieren Sie in Ihrem Bestandsverwaltungssystem, ob der Artikel verfügbar ist. 1. Geben Sie in Ihrem Bestandsverwaltungssystem an, dass der Kunde/die Kundin den Artikel gekauft hat. 1. Erfassen Sie die Zahlung der Kundin/des Kunden. 1. Informieren Sie die Kundin/den Kunden auf Ihrer Bestätigungsseite darüber, ob der Kauf erfolgreich war. Um anzugeben, dass Sie Autorisierung und Erfassung trennen möchten, müssen Sie beim Erstellen der Checkout-Sitzung den Wert von [payment_intent_data.capture_method](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-capture_method) auf `manual` festlegen. Dadurch wird Stripe angewiesen, nur den Betrag auf der Karte der Kundin/des Kunden zu autorisieren. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price]"={{PRICE_ID}} \ -d "line_items[0][quantity]"=1 \ -d mode=payment \ -d "payment_intent_data[capture_method]"=manual \ -d return_url={{RETURN_URL}} \ -d ui_mode=custom ``` Eine nicht erfasste Zahlung können Sie entweder über den Endpoint [Dashboard](https://dashboard.stripe.com/test/payments?status%5B%5D=uncaptured) oder [Erfassung](https://docs.stripe.com/api/payment_intents/capture.md) erfassen. Um Zahlungen programmgesteuert zu erfassen, ist der Zugriff auf den PaymentIntent erforderlich, der während der Checkout-Sitzung erstellt wurde. Diesen können Sie über das [Session](https://docs.stripe.com/api/payment_intents/capture.md)-Objekt abrufen. ## Optional: Verwaltung von Kundenkonten [Kein Code] Lassen Sie Ihre Kundinnen/Kunden ihre eigenen Konten [verwalten](https://docs.stripe.com/customer-management.md) und senden sie ihnen einen Link zu Ihrem *Kundenportal* (The customer portal is a secure, Stripe-hosted page that lets your customers manage their subscriptions and billing details). Über das Kundenportal können sich Kundinnen/Kunden mit ihrer E-Mail-Adresse anmelden, um Abonnements zu verwalten, Zahlungsmethoden zu aktualisieren und vieles mehr. ## Optional: Bestellabwicklung Erfahren Sie, wie Sie [programmgesteuert benachrichtigt werden](https://docs.stripe.com/checkout/fulfillment.md?payment-ui=embedded-components), wenn ein Kunde/eine Kundin bezahlt. ## See also - [Rabatte für Einmalzahlungen einrichten](https://docs.stripe.com/payments/checkout/discounts.md?payment-ui=embedded-components) - [Steuern einziehen](https://docs.stripe.com/payments/checkout/taxes.md?payment-ui=embedded-components) - [Anpassbare Postenmengen aktivieren](https://docs.stripe.com/payments/checkout/adjustable-quantity.md?payment-ui=embedded-components) - [Schaltflächen für Zahlungen mit einem Klick hinzufügen](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md?payment-ui=embedded-components) # Payment Intents API > This is a Payment Intents API for when payment-ui is elements and api-integration is paymentintents. View the full page at https://docs.stripe.com/payments/accept-a-payment?payment-ui=elements&api-integration=paymentintents. Erstellen Sie ein individuelles Zahlungsformular mit [Stripe Elements](https://docs.stripe.com/payments/elements.md) und der [Payment Intents API](https://docs.stripe.com/api/payment_intents.md). [Vergleichen Sie diese Integration mit den anderen Integrationstypen von Stripe](https://docs.stripe.com/payments/online-payments.md#compare-features-and-availability). Die Payment Intents API ist eine untergeordnete API, die Sie zum Erstellen Ihres eigenen Bezahlvorgangs oder Zahlungsablaufs verwenden können. Sie erfordert aber deutlich mehr Code und laufende Wartung. Wir empfehlen für die meisten Integrationen [Payment Element mit Checkout-Sitzungen](https://docs.stripe.com/payments/quickstart-checkout-sessions.md), da es ähnliche Zahlungen wie Payment Intents abdeckt. Erfahren Sie mehr darüber, [wann Sie Checkout-Sitzungen anstelle von PaymentIntents verwenden sollten](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md). Mit dem clientseitigen und serverseitigen Code wird ein Bezahlformular erstellt, das verschiedene Zahlungsmethoden akzeptiert. #### Integrationsaufwand Complexity: 4/5 #### Integration Komponenten der Nutzeroberfläche in einem nutzerdefinierten Zahlungsablauf kombinieren #### Anpassung der Nutzeroberfläche Anpassung auf CSS-Ebene mit der [Appearance API](https://docs.stripe.com/elements/appearance-api.md) > #### Möchten Sie Stripe Tax, Rabatte, Versand oder Währungsumrechnung nutzen? > > Stripe verfügt über eine Integration für das Payment Element, die Steuern, Rabatte, Versand und Währungsumrechnung für Sie verwaltet. Weitere Informationen finden Sie unter [Bezahlvorgangseite erstellen](https://docs.stripe.com/payments/quickstart-checkout-sessions.md). ## Stripe einrichten [Serverseitig] [Erstellen Sie zunächst ein Stripe-Konto](https://dashboard.stripe.com/register) oder [melden Sie sich an](https://dashboard.stripe.com/login). Verwenden Sie unsere offiziellen Bibliotheken, um von Ihrer Anwendung aus auf die Stripe API zuzugreifen: #### 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] > Wenn Sie das Payment Element vor dem Erstellen eines PaymentIntent rendern möchten, finden Sie weitere Informationen unter [Erfassen von Zahlungsdetails vor dem Erstellen eines Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment). Das [PaymentIntent](https://docs.stripe.com/api/payment_intents.md)-Objekt stellt Ihre Absicht dar, Zahlungen abzuwickeln und Abbuchungsversuche und Zahlungsstatusänderungen im gesamten Zahlungsvorgang zu dokumentieren. In diesem Dokument finden Sie eine allgemeine Übersicht über die Zahlungsintegration. (See full diagram at https://docs.stripe.com/payments/accept-a-payment) ### PaymentIntent erstellen Erstellen Sie einen PaymentIntent auf Ihrem Server mit einem [Betrag](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount) und einer [Währung](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency). In der neuesten Version der API ist die Angabe des Parameters `automatic_payment_methods` optional, da Stripe die Funktionalität standardmäßig aktiviert. Sie können Zahlungsmethoden über das [Dashboard](https://dashboard.stripe.com/settings/payment_methods) verwalten. Stripe handhabt die Rückgabe der in Frage kommenden Zahlungsmethoden anhand von Faktoren wie Transaktionsbetrag, Währung und Zahlungsablauf aus. Stripe verwendet Ihre [Einstellungen für Zahlungsmethoden](https://dashboard.stripe.com/settings/payment_methods), um die von Ihnen aktivierten Zahlungsmethoden anzuzeigen. Um zu sehen, wie Ihre Zahlungsmethoden Kundinnen und Kunden angezeigt werden, geben Sie eine Transaktions-ID ein oder legen Sie einen Betrag und eine Währungen einer Bestellung im [Dashboard](https://dashboard.stripe.com/settings/payment_methods/review) fest. Zur Überschreibung von Zahlungsmethoden listen Sie alle Zahlungsmethoden, die Sie aktivieren möchten, manuell mit dem Attribut [payment_method_types](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_types) auf. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "automatic_payment_methods[enabled]"=true ``` > Legen Sie den zu zahlenden Betrag immer serverseitig fest, also in einer vertrauenswürdigen Umgebung, und nicht auf Client-Seite. So wird verhindert, dass böswillige Kund/innen ihre eigenen Preise festlegen können. ### 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 ``` ## Zahlungsdaten erfassen [Clientseitig] Erfassen Sie Zahlungsdetails auf dem Client mit dem [Payment Element](https://docs.stripe.com/payments/payment-element.md). Das Payment Element ist eine vorgefertigte Komponente der Nutzeroberfläche, die die Erfassung von Zahlungsdaten für eine Vielzahl von Zahlungsmethoden vereinfacht. Das Payment Element enthält einen iFrame, der Zahlungsinformationen über eine sichere HTTPS-Verbindung an Stripe sendet. Vermeiden Sie es, das Payment Element in einem anderen iFrame zu platzieren, da einige Zahlungsmethoden die Weiterleitung an eine andere Seite zur Zahlungsbestätigung voraussetzen. Wenn Sie sich für die Verwendung eines Iframes entscheiden und Apple Pay oder Google Pay akzeptieren möchten, muss das Attribut [Zulassen](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) des Iframes auf `"payment*"` gesetzt sein. Die Adresse der Bezahlseite muss mit `https://` beginnen, nicht mit `http://`, damit Ihre Integration funktioniert. Sie können Ihre Integration ohne HTTPS testen. Denken Sie jedoch daran, dieses zu [aktivieren](https://docs.stripe.com/security/guide.md#tls), wenn Sie bereit sind, Live-Zahlungen zu akzeptieren. #### HTML + JS ### Stripe.js einrichten Das Payment Element ist ein Feature von Stripe.js und steht damit automatisch zur Verfügung. Fügen Sie das Stripe.js-Skript auf Ihrer Bezahlseite ein, indem Sie es in den `head` Ihrer HTML-Datei einbinden. Laden Sie Stripe.js immer direkt von js.stripe.com, um die PCI-Konformität zu gewährleisten. Fügen Sie das Skript nicht in ein Paket ein und hosten Sie selbst keine Kopie davon. ```html Checkout ``` Erstellen Sie auf Ihrer Bezahlseite eine Instanz von Stripe mit dem folgenden JavaScript: ```javascript // Set your publishable key: remember to change this to your live publishable key in production // See your keys here: https://dashboard.stripe.com/apikeys const stripe = Stripe('<>'); ``` ### Payment Element Ihrer Bezahlseite hinzufügen Das Payment Element benötigt einen festen Platz auf Ihrer Zahlungsseite. Erstellen Sie einen leeren DOM-Knoten (Container) mit einer eindeutigen ID in Ihrem Zahlungsformular: ```html ``` Wenn das vorherige Formular geladen wurde, erstellen Sie eine Instanz des Payment Element und verbinden es mit dem DOM-Knoten (Container). Übergeben Sie das [Client-Geheimnis](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) aus dem vorherigen Schritt an `options`, wenn Sie die [Elements](https://docs.stripe.com/js/elements_object/create)-Instanz erstellen: Gehen Sie sorgfältig mit dem Client-Geheimnis um, denn es kann die Zahlung abschließen. Protokollieren Sie es nicht, betten Sie es nicht in URLs ein und geben Sie es nur dem/der Kund/in preis. ```javascript const options = { clientSecret: '{{CLIENT_SECRET}}', // Fully customizable with appearance API. appearance: {/*...*/}, }; // Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous stepconst elements = stripe.elements(options); // Create and mount the Payment Element const paymentElementOptions = { layout: 'accordion'}; const paymentElement = elements.create('payment', paymentElementOptions); paymentElement.mount('#payment-element'); ``` #### React ### Stripe.js einrichten 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 ``` ### Den Elements-Anbieter zu Ihrer Zahlungsseite hinzufügen und konfigurieren Um die Payment Element-Komponente 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. Übergeben Sie auch das [Client-Geheimnis](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) aus dem vorherigen Schritt als `options` 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() { const options = { // passing the client secret obtained in step 3 clientSecret: '{{CLIENT_SECRET}}', // Fully customizable with appearance API. appearance: {/*...*/}, }; return ( ); }; ReactDOM.render(, document.getElementById('root')); ``` ### Payment Element hinzufügen Verwenden Sie die Komponente `PaymentElement`, um Ihr Formular zu erstellen: ```jsx import React from 'react'; import {PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { return (

); }; export default CheckoutForm; ``` Stripe Elements ist eine Sammlung von Drop-In-Komponenten der Nutzeroberfläche. Um Ihr Formular weiter anzupassen oder andere Kundeninformationen zu erfassen, durchsuchen Sie die [Elements-Dokumentation](https://docs.stripe.com/payments/elements.md). Das Payment Element rendert ein dynamisches Formular, mit dem Kund/innen ihre gewünschte Zahlungsmethode auswählen können. Für jede Zahlungsmethode fordert das Formular die Kund/innen automatisch auf, alle erforderlichen Zahlungsdaten einzugeben. ### Erscheinungsbild anpassen Passen Sie das Payment Element an das Design Ihrer Website an, indem Sie beim Erstellen des `Elements`-Anbieters das [Erscheinungsbild-Objekt](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance) an `options` übergeben. ### Adressen einholen Standardmäßig erfasst das Payment Element nur die erforderlichen Angaben zur Rechnungsadresse. Einige Verhaltensweisen, wie z. B. die [Berechnung der Steuer](https://docs.stripe.com/api/tax/calculations/create.md) oder die Eingabe der Versanddaten, erfordern die vollständige Adresse Ihrer Kundin/Ihres Kunden. Sie können Folgendes tun: - Verwenden Sie das [Address Element](https://docs.stripe.com/elements/address-element.md), um die Vorteile der Funktionen der automatischen Vervollständigung und Lokalisierung zu nutzen, um die vollständige Adresse Ihrer Kundin oder Ihres Kunden zu erfassen. Dies trägt dazu bei, eine möglichst genaue Steuerberechnung zu gewährleisten. - Erfassen Sie Adressdaten mit Ihrem eigenen benutzerdefinierten Formular. ### Apple Pay-Händler-Token anfordern Wenn Sie Ihre Integration für die [Annahme von Zahlungen per Apple Pay](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=checkout) konfiguriert haben, empfehlen wir die Konfiguration der Apple Pay-Schnittstelle, um ein Händler-Token zurückzugeben und von Händlern/Händlerinnen initiierte Transaktionen zu ermöglichen. [Fordern Sie den entsprechenden Händler-Token-Typ](https://docs.stripe.com/apple-pay/merchant-tokens.md?pay-element=web-pe) im Payment Element an. ## Optional: Zahlungsmethoden von Kundinnen und Kunden speichern und abrufen Sie können das Payment Element so konfigurieren, dass die Zahlungsmethoden Ihrer Kundinnen und Kunden für die zukünftige Verwendung gespeichert werden. In diesem Abschnitt erfahren Sie, wie Sie die neue Funktion für [gespeicherte Zahlungsmethoden](https://docs.stripe.com/payments/save-customer-payment-methods.md) integrieren, mit der das Payment Element Folgendes tun kann: - Käufer/innen um Zustimmung zur Speicherung einer Zahlungsmethode bitten - Zahlungsmethoden speichern, wenn Käufer/innen zustimmen - Gespeicherte Zahlungsmethoden für zukünftige Käufe anzeigen - [Aktualisieren Sie verlorene oder abgelaufene Karten automatisch](https://docs.stripe.com/payments/cards/overview.md#automatic-card-updates), wenn Käufer/innen sie ersetzen ![Das Kontrollkästchen für Payment Element und eine gespeicherte Zahlungsmethode](https://b.stripecdn.com/docs-statics-srv/assets/spm-save.fe0b24afd0f0a06e0cf4eecb0ce2403a.png) Zahlungsmethoden speichern. ![Das Payment Element mit einer gespeicherten Zahlungsmethode ausgewählt](https://b.stripecdn.com/docs-statics-srv/assets/spm-saved.5dba5a8a190a9a0e9f1a99271bed3f4b.png) Verwenden Sie eine zuvor gespeicherte Zahlungsmethode erneut. ### Speichern der Zahlungsmethode im Payment Element aktivieren Wenn Sie einen [PaymentIntent](https://docs.stripe.com/api/payment_intents/.md) auf Ihrem Server erstellen, erstellen Sie auch eine [CustomerSession](https://docs.stripe.com/api/customer_sessions/.md), geben die [Kunden-ID](https://docs.stripe.com/api/customers/object.md#customer_object-id) an und aktivieren die [payment_element](https://docs.stripe.com/api/customer_sessions/object.md#customer_session_object-components-payment_element)-Komponente für Ihre Sitzung. Konfigurieren Sie, welche [Funktionen](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features) der gespeicherten Zahlungsmethode Sie aktivieren möchten. Durch Aktivieren von [payment_method_save](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features-payment_method_save) wird beispielsweise ein Kontrollkästchen angezeigt, über das Kundinnen und Kunden ihre Zahlungsdetails für die zukünftige Nutzung speichern können. Sie können `setup_future_usage` für einen PaymentIntent oder eine Checkout-Sitzung angeben, um das Standardverhalten zum Speichern von Zahlungsmethoden außer Kraft zu setzen. Dadurch wird sichergestellt, dass die Zahlungsmethode automatisch für die zukünftige Verwendung gespeichert wird, auch wenn der Kunde/die Kundin sie nicht explizit speichert. > Wenn Käufer/innen ihre gespeicherten Zahlungsmethoden entfernen dürfen, indem sie [payment_method_remove](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features-payment_method_remove) aktivieren, wirkt sich dies auf Abonnements aus, die mit dieser Zahlungsmethode abgerechnet werden. Durch das Entfernen der Zahlungsmethode wird die [PaymentMethod](https://docs.stripe.com/api/payment_methods.md) von diesem [Kunden/dieser Kundin](https://docs.stripe.com/api/customers.md) getrennt. #### Ruby ```ruby # Don't put any keys in code. Use a secrets vault or environment # variable to supply keys to your integration. This example # shows how to set a secret key for illustration purposes only. # # See https://docs.stripe.com/keys-best-practices and find your # keys at https://dashboard.stripe.com/apikeys. Stripe.api_key = '<>' post '/create-intent-and-customer-session' do intent = Stripe::PaymentIntent.create({ amount: 1099, currency: 'usd', # In the latest version of the API, specifying the `automatic_payment_methods` parameter # is optional because Stripe enables its functionality by default. automatic_payment_methods: {enabled: true}, customer: {{CUSTOMER_ID}}, }) customer_session = Stripe::CustomerSession.create({ customer: {{CUSTOMER_ID}}, components: { payment_element: { enabled: true, features: { payment_method_redisplay: 'enabled', payment_method_save: 'enabled', payment_method_save_usage: 'off_session', payment_method_remove: 'enabled', }, }, }, }) { client_secret: intent.client_secret, customer_session_client_secret: customer_session.client_secret }.to_json end ``` Ihre Elements-Instanz verwendet das *Client-Geheimnis* (A client secret is used with your publishable key to authenticate a request for a single object. Each client secret is unique to the object it's associated with) der CustomerSession, um auf die gespeicherten Zahlungsmethoden dieses Kunden/dieser Kundin zuzugreifen. [Umgang mit Fehlern](https://docs.stripe.com/error-handling.md), wenn Sie die CustomerSession korrekt erstellen. Wenn ein Fehler auftritt, müssen Sie das Client-Geheimnis der CustomerSession nicht für die Elements-Instanz bereitstellen, da dies optional ist. Erstellen Sie die Elements-Instanz mit den Client-Geheimnissen sowohl für den PaymentIntent als auch für die CustomerSession. Verwenden Sie dann diese Elements-Instanz, um ein Payment Element zu erstellen. ```javascript // Create the CustomerSession and obtain its clientSecret const res = await fetch("/create-intent-and-customer-session", { method: "POST" }); const { customer_session_client_secret: customerSessionClientSecret } = await res.json(); const elementsOptions = { clientSecret: '{{CLIENT_SECRET}}',customerSessionClientSecret, // Fully customizable with appearance API. appearance: {/*...*/}, }; // Set up Stripe.js and Elements to use in checkout form, passing the client secret // and CustomerSession's client secret obtained in a previous step const elements = stripe.elements(elementsOptions); // Create and mount the Payment Element const paymentElementOptions = { layout: 'accordion'}; const paymentElement = elements.create('payment', paymentElementOptions); paymentElement.mount('#payment-element'); ``` Bei der Bestätigung der PaymentIntent steuert Stripe.js automatisch die Einstellung [setup_future_usage](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-setup_future_usage) für den PaymentIntent und [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay) für die PaymentMethod, je nachdem, ob die Kundin/der Kunde das Kontrollkästchen aktiviert hat, um die Zahlungsdetails zu speichern. ### Erneute Erfassung der CVC erzwingen Geben Sie optional `require_cvc_recollection` [beim Erstellen der PaymentIntent](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-card-require_cvc_recollection) an, um die erneute Erfassung der Prüfziffer/CVC zu erzwingen, wenn ein Kunde/eine Kundin mit einer Karte bezahlt. ### Auswahl einer gespeicherten Zahlungsmethode erkennen Um dynamische Inhalte zu steuern, wenn eine gespeicherte Zahlungsmethode ausgewählt wird, überwachen Sie das `change`-Ereignis des Payment Element, das automatisch mit der ausgewählten Zahlungsmethode ausgefüllt wird. ```javascript paymentElement.on('change', function(event) { if (event.value.payment_method) { // Control dynamic content if a saved payment method is selected } }) ``` ## Optional: Link auf Ihrer Bezahlseite [Clientseitig] Beschleunigen Sie den Bezahlvorgang Ihrer Kundinnen/Kunden, indem Sie [Link](https://docs.stripe.com/payments/link.md) im [Payment Element](https://docs.stripe.com/payments/payment-element.md) verwenden. Sie können die Informationen für alle angemeldeten Kundinnen/Kunden, die Link bereits verwenden, automatisch ausfüllen, unabhängig davon, ob sie ihre Informationen ursprünglich in Link bei einem anderen Unternehmen gespeichert haben. Die standardmäßige Payment Element-Integration enthält eine Link-Aufforderung im Kartenformular. Um Link im Payment Element zu verwalten, gehen Sie zu Ihren [Einstellungen für Zahlungsmethoden](https://dashboard.stripe.com/settings/payment_methods). ![Authentifizierung oder Registrierung bei Link direkt im Payment Element während des Bezahlvorgangs](https://b.stripecdn.com/docs-statics-srv/assets/link-in-pe.2efb5138a4708b781b8a913ebddd9aba.png) Erfassen Sie eine Kunden-E-Mail-Adresse für die Link-Authentifizierung oder Registrierung ### Integrationsoptionen Es gibt zwei Möglichkeiten, Link in das Payment Element zu integrieren. Stripe empfiehlt, eine Kunden-E-Mail-Adresse an das Payment Element zu übergeben, falls verfügbar. Denken Sie daran, den Bezahlvorgang zu berücksichtigen, wenn Sie sich für eine der folgenden Optionen entscheiden: | Integrationsoption | Bezahlvorgang | Beschreibung | | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Kunden-E-Mail-Adresse an Payment Element übergeben (Empfohlen) | - Ihre Kundinnen und Kunden geben ihre E-Mail-Adresse ein, bevor sie zum Bezahlvorgang gelangen (zum Beispiel bei einem früheren Schritt der Kontoerstellung). - Sie bevorzugen es, Ihr eigenes E-Mail-Eingabefeld zu verwenden. | Übergeben Sie Kunden-E-Mail-Adressen programmgesteuert an das Payment Element. In diesem Szenario authentifiziert sich eine Kunde/eine Kundin bei Link direkt über das Zahlungsformular und nicht über eine separate Nutzeroberflächenkomponente. | | Kunden-E-Mail-Adresse im Payment Element erfassen | - Ihre Kundinnen und Kunden geben ihre E-Mail-Adresse ein und authentifizieren oder registrieren sich bei Link direkt während des Bezahlvorgangs im Payment Element. - Keine Codeänderung erforderlich. | Wenn sich ein Kunde/eine Kundin nicht bei Link registriert hat und eine unterstützte Zahlungsmethode im Payment Element auswählt, wird er/sie aufgefordert, seine/ihre Daten über Link zu speichern. Für diejenigen, die sich bereits registriert haben, trägt Link automatisch die Zahlungsinformationen ein. | Verwenden Sie [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues), um eine Kunden-E-Mail-Adresse an das Payment Element zu übergeben. ```javascript const paymentElement = elements.create('payment', { defaultValues: { billingDetails: { email: 'foo@bar.com', } }, // Other options }); ``` Weitere Informationen finden Sie unter [Erstellen einer benutzerdefinierten Bezahlseite mit Link](https://docs.stripe.com/payments/link/add-link-elements-integration.md). ## Optional: Updates vom Server abrufen [Clientseitig] Möglicherweise möchten Sie Attribute des PaymentIntent aktualisieren, nachdem das Payment Element gerendert wurde, z. B. den [Betrag](https://docs.stripe.com/api/payment_intents/update.md#update_payment_intent-amount) (z. B. für Rabattcodes oder Versandkosten). Auf Ihrem Server können Sie [den PaymentIntent aktualisieren](https://docs.stripe.com/api/payment_intents/update.md) und dann [elements.fetchUpdates](https://docs.stripe.com/js/elements_object/fetch_updates) aufrufen, um den neuen Betrag im Payment Element zu sehen. Dieses Beispiel zeigt Ihnen, wie Sie den Server-Endpoint erstellen, der den Betrag im PaymentIntent aktualisiert: #### Ruby ```ruby get '/update' do intent = Stripe::PaymentIntent.update( '{{PAYMENT_INTENT_ID}}', {amount: 1499}, ) {status: intent.status}.to_json end ``` Dieses Beispiel zeigt, wie die Nutzeroberfläche aktualisiert wird, um die Änderungen auf der Client-Seite zu berücksichtigen: ```javascript (async () => { const response = await fetch('/update'); if (response.status === 'requires_payment_method') { const {error} = await elements.fetchUpdates(); } })(); ``` ## Zahlung an Stripe senden [Clientseitig] Verwenden Sie [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment), um die Zahlung mit Details aus dem Payment Element vorzunehmen. Geben Sie für diese Funktion eine [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) an, um anzugeben, wohin Stripe die Nutzer/innen nach Durchführung der Zahlung weiterleiten soll. Ihre Nutzer/innen werden möglicherweise zunächst an eine zwischengeschaltete Seite weitergeleitet, wie z. B. eine Bankautorisierungsseite, bevor sie zur `return_url` weitergeleitet werden. Kartenzahlungen werden sofort zur `return_url` weitergeleitet, wenn eine Zahlung erfolgreich war. Wenn Sie Kartenzahlungen nach Abschluss der Zahlung nicht weiterleiten möchten, können Sie [redirect](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) auf `if_required` festlegen. Dadurch werden nur Kundinnen/Kunden weitergeleitet, die mit weiterleitungsbasierten Zahlungsmethoden bezahlen. #### HTML + JS ```javascript const form = document.getElementById('payment-form'); form.addEventListener('submit', async (event) => { event.preventDefault(); const {error} = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: 'https://example.com/order/123/complete', }, }); if (error) { // This point will only be reached if there is an immediate error when // confirming the payment. Show error to your customer (for example, payment // details incomplete) const messageContainer = document.querySelector('#error-message'); messageContainer.textContent = error.message; } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }); ``` #### React Verwenden Sie die Hooks [useStripe](https://docs.stripe.com/sdks/stripejs-react.md#usestripe-hook) und [useElements](https://docs.stripe.com/sdks/stripejs-react.md#useelements-hook), um [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) ü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. ```jsx import React, {useState} from 'react'; import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { const stripe = useStripe(); const elements = useElements(); const [errorMessage, setErrorMessage] = useState(null); 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 {error} = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: 'https://example.com/order/123/complete', }, }); if (error) { // This point will only be reached if there is an immediate error when // confirming the payment. Show error to your customer (for example, payment // details incomplete) setErrorMessage(error.message); } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }; return (

{/* Show error message to your customers */} {errorMessage &&

{errorMessage}

} ); }; export default CheckoutForm; ``` Achten Sie darauf, dass die `return_url` auf eine Seite Ihrer Website verweist, die den Status der Zahlung angibt. Wenn Stripe den/die Kund/in an die `return_url` weiterleitet, stellen wir die folgenden URL-Abfrageparameter bereit: | Parameter | Beschreibung | | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | | `payment_intent` | Die eindeutige ID für die `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. | > Wenn Sie über Tools verfügen, die die Browser-Sitzung der Kund/innen verfolgen, müssen Sie möglicherweise die Domain `stripe.com` zur Referenz-Ausschlussliste hinzufügen. Weiterleitungen haben zur Folge, dass einige Tools neue Sitzungen erstellen. Dies wiederum hindert Sie daran, die gesamte Sitzung zu verfolgen. Verwenden Sie einen der Abfrageparameter, um den PaymentIntent abzurufen. Überprüfen Sie den [Status des PaymentIntent](https://docs.stripe.com/payments/paymentintents/lifecycle.md), um zu entscheiden, was Ihren Kundinnen/Kunden angezeigt werden soll. Sie können bei der Angabe der `return_url` auch Ihre eigenen Abfrageparameter anhängen, die während des Weiterleitungsvorgangs erhalten bleiben. #### HTML + JS ```javascript // Initialize Stripe.js using your publishable key const stripe = Stripe('<>'); // Retrieve the "payment_intent_client_secret" query parameter appended to // your return_url by Stripe.js const clientSecret = new URLSearchParams(window.location.search).get( 'payment_intent_client_secret' ); // Retrieve the PaymentIntent stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => { const message = document.querySelector('#message') // Inspect the PaymentIntent `status` to indicate the status of the payment // to your customer. // // Some payment methods will [immediately succeed or fail][0] upon // confirmation, while others will first enter a `processing` state. // // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification switch (paymentIntent.status) { case 'succeeded': message.innerText = 'Success! Payment received.'; break; case 'processing': message.innerText = "Payment processing. We'll update you when payment is received."; break; case 'requires_payment_method': message.innerText = 'Payment failed. Please try another payment method.'; // Redirect your user back to your payment page to attempt collecting // payment again break; default: message.innerText = 'Something went wrong.'; break; } }); ``` #### React ```jsx import React, {useState, useEffect} from 'react'; import {useStripe} from '@stripe/react-stripe-js'; const PaymentStatus = () => { const stripe = useStripe(); const [message, setMessage] = useState(null); useEffect(() => { if (!stripe) { return; } // Retrieve the "payment_intent_client_secret" query parameter appended to // your return_url by Stripe.js const clientSecret = new URLSearchParams(window.location.search).get( 'payment_intent_client_secret' ); // Retrieve the PaymentIntent stripe .retrievePaymentIntent(clientSecret) .then(({paymentIntent}) => { // Inspect the PaymentIntent `status` to indicate the status of the payment // to your customer. // // Some payment methods will [immediately succeed or fail][0] upon // confirmation, while others will first enter a `processing` state. // // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification switch (paymentIntent.status) { case 'succeeded': setMessage('Success! Payment received.'); break; case 'processing': setMessage("Payment processing. We'll update you when payment is received."); break; case 'requires_payment_method': // Redirect your user back to your payment page to attempt collecting // payment again setMessage('Payment failed. Please try another payment method.'); break; default: setMessage('Something went wrong.'); break; } }); }, [stripe]); return message; }; export default PaymentStatus; ``` ## Ereignisse nach Zahlung verarbeiten [Serverseitig] Stripe sendet ein [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie [Webhook-Tool im Dashboard](https://dashboard.stripe.com/webhooks) oder folgen Sie der [Webhook-Anleitung](https://docs.stripe.com/webhooks/quickstart.md), um diese Ereignisse zu empfangen und führen Sie Aktionen aus, wie beispielsweise das Senden einer Bestellbestätigung per E-Mail, das Protokollieren des Verkaufs in der Datenbank oder das Starten eines Versand-Workflows. Überwachen Sie diese Ereignisse, statt auf einen Callback vom Client zu warten. Auf dem Client könnten die Kund/innen das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist. Bösartige Clients könnten dann die Antwort manipulieren. Wenn Sie Ihre Integration so einrichten, dass sie asynchrone Ereignisse überwacht, können Sie [verschiedene Arten von Zahlungsmethoden](https://stripe.com/payments/payment-methods-guide) mit einer einzelnen Integration akzeptieren. Neben der Abwicklung des `payment_intent.succeeded`-Ereignisses empfehlen wir die Abwicklung von diesen weiteren Ereignissen, wenn Sie Zahlungen mit dem Payment Element erfassen: | Ereignis | Beschreibung | Aktion | | ------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded) | Wird gesendet, wenn Kundinnen und Kunden eine Zahlung erfolgreich abgeschlossen haben. | Senden Sie den Kund/innen eine Auftragsbestätigung und *wickeln* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) Sie die Bestellung ab. | | [payment_intent.processing](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.processing) | Wird gesendet, wenn eine/e Kund/in eine Zahlung erfolgreich veranlasst hat, die Zahlung aber noch nicht abgeschlossen ist. Dieses Ereignis wird am häufigsten gesendet, wenn der Kunde/die Kundin eine Bankabbuchung veranlasst. In Zukunft folgt darauf entweder ein `payment_intent.succeeded`- oder ein `payment_intent.payment_failed`-Ereignis. | Senden Sie eine Bestellbestätigung an die Kund/innen, in der angegeben ist, dass die Zahlung noch aussteht. Bei digitalen Waren können Sie die Bestellung abwickeln, bevor Sie darauf warten, dass die Zahlung erfolgt. | | [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Wird gesendet, wenn ein Kunde/eine Kundin einen Zahlungsversuch durchführt, die Zahlung jedoch fehlschlägt. | Wenn eine Zahlung von `processing` zu `payment_failed` übergeht, bieten Sie der Kundin/dem Kunden einen weiteren Zahlungsversuch an. | ## Integration testen So testen Sie Ihre nutzerdefinierte Zahlungsintegration: 1. Erstellen Sie einen Payment Intent und rufen Sie das Client-Geheimnis ab. 1. Geben Sie die Zahlungsdetails mit einer Methode aus der folgenden Tabelle ein. - Geben Sie für die Karte ein beliebiges Ablaufdatum in der Zukunft ein. - Geben Sie als Prüfziffer/CVC eine 3-stellige Zahl ein. - Geben Sie eine beliebige Postleitzahl ein. 1. Übermitteln Sie die Zahlung an Stripe. Sie werden an Ihre `return_url` weitergeleitet. 1. Gehen Sie zum Dashboard und suchen Sie auf der Seite [Transaktionen](https://dashboard.stripe.com/test/payments?status%5B0%5D=successful) nach der Zahlung. Wenn Ihre Zahlung erfolgreich war, wird sie in dieser Liste angezeigt. 1. Klicken Sie auf Ihre Zahlung, um weitere Details wie Rechnungsinformationen und die Liste der gekauften Artikel anzuzeigen. Sie können diese Informationen zur Abwicklung der Bestellung verwenden. Erfahren Sie mehr über das [Testen Ihrer Integration](https://docs.stripe.com/testing.md). #### Karten | Kartennummer | Szenario | So führen Sie den Test durch | | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | | 4242424242424242 | Die Kartenzahlung ist erfolgreich und es ist keine Authentifizierung erforderlich. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | 4000002500003155 | Für die Kartenzahlung ist eine *Authentifizierung* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase) erforderlich. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | 4000000000009995 | Die Karte wird mit einem Ablehnungscode wie `insufficient_funds` abgelehnt. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | 6205500000000000004 | Die UnionPay-Karte hat eine variable Länge von 13 bis 19 Ziffern. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | #### Digitale Geldbörsen (Wallets) | Zahlungsmethode | Szenario | So führen Sie den Test durch | | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Alipay | Ihr Kunde/Ihre Kundin zahlt erfolgreich mit einer auf Weiterleitung basierenden Zahlungsmethode mit [sofortiger Benachrichtigung](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Wählen Sie eine beliebige, auf Weiterleitung basierende Zahlungsmethode aus, füllen Sie die erforderlichen Informationen aus und bestätigen Sie die Zahlung. Klicken Sie dann auf der Weiterleitungsseite auf **Testzahlung abschließen**. | #### Bankumleitungen | Zahlungsmethode | Szenario | So führen Sie den Test durch | | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | BECS-Lastschriftverfahren | Ihr/e Kund/in zahlt erfolgreich mit dem BECS-Lastschriftverfahren. | Füllen Sie das Formular mit der Kontonummer `900123456` und BSB `000000` aus. Der bestätigte PaymentIntent geht zunächst in den Status `processing` über und dann 3 Minuten später in den Status `succeeded`. | | BECS-Lastschriftverfahren | Die Zahlung Ihres/Ihrer Kund/in schlägt fehl mit Code `account_closed` fehl. | Füllen Sie das Formular mit der Kontonummer `111111113` und BSB `000000` aus. | | Bancontact, EPS, iDEAL und Przelewy24 | Ihr/e Kund/in konnte sich auf der iDEAL-Weiterleitungsseite für eine auf Weiterleitung basierende Zahlungsmethode mit sofortiger Benachrichtigung nicht authentifizieren. | Wählen Sie eine beliebige, auf Weiterleitung basierende Zahlungsmethode aus, füllen Sie die erforderlichen Informationen aus und bestätigen Sie die Zahlung. Klicken Sie dann auf der Weiterleitungsseite auf **Testzahlung fehlgeschlagen**. | | Pay by Bank | Ihr Kunde/Ihre Kundin zahlt erfolgreich mit einer auf Weiterleitung basierenden Zahlungsmethode mit [verzögerter Benachrichtigung](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Wählen Sie die Zahlungsmethode aus, füllen Sie die erforderlichen Informationen aus und bestätigen Sie die Zahlung. Klicken Sie dann auf der Weiterleitungsseite auf **Testzahlung abschließen**. | | Pay by Bank | Ihr/e Kund/in konnte sich auf der iDEAL-Weiterleitungsseite für eine auf Weiterleitung basierende Zahlungsmethode mit verzögerter Benachrichtigung nicht authentifizieren. | Wählen Sie die Zahlungsmethode aus, füllen Sie die erforderlichen Informationen aus und bestätigen Sie die Zahlung. Klicken Sie dann auf der Weiterleitungsseite auf **Testzahlung fehlgeschlagen**. | | BLIK | BLIK-Zahlungen können aus verschiedenen Gründen fehlschlagen. Es gibt sofortige Fehler (der Code ist abgelaufen oder ungültig), verzögerte Fehler (die Bank lehnt ab) oder Zeitüberschreitungen (der/die Kund/in hat nicht rechtzeitig reagiert). | Verwenden Sie E-Mail-Muster, um [die verschiedenen Fehler zu simulieren](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures) | #### Banklastschriften | Zahlungsmethode | Szenario | So führen Sie den Test durch | | ---------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | SEPA-Lastschrift | Ihr/e Kund/in zahlt erfolgreich mit dem SEPA-Lastschriftverfahren. | Füllen Sie das Formular mit der Kontonummer `AT321904300235473204` aus. Die bestätigte PaymentIntent geht zunächst in den Status „wird verarbeitet“ und dann drei Minuten später in den Status „erfolgreich“ über. | | SEPA-Lastschrift | Der Status der PaymentIntent Ihres/Ihrer Kund/in wechselt von `processing` zu `requires_payment_method`. | Füllen Sie das Formular mit der Kontonummer `AT861904300235473202` aus. | #### Gutscheine | Zahlungsmethode | Szenario | So führen Sie den Test durch | | --------------- | ------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- | | Boleto, OXXO | Ihr/e Kund/in bezahlt mit einem Boleto- oder OXXO-Gutschein. | Wählen Sie als Zahlungsmethode Boleto oder OXXO aus und übermitteln Sie die Zahlung. Schließen Sie das OXXO-Dialogfeld, nachdem es angezeigt wurde. | Hier finden Sie weitere Informationen zum [Testen](https://docs.stripe.com/testing.md) Ihrer Integration. ## Optional: Weitere Zahlungsmethoden hinzufügen Das Payment Element [unterstützt standardmäßig viele Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/integration-options.md#choose-how-to-add-payment-methods). Für die Aktivierung und Anzeige einiger Zahlungsmethoden sind zusätzliche Schritte erforderlich. ### Affirm Um Affirm verwenden zu können, müssen Sie es im [Dashboard](https://dashboard.stripe.com/settings/payment_methods) aktivieren. Wenn Sie einen PaymentIntent mit der Zahlungsmethode Affirm erstellen, müssen Sie eine [Versandadresse](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-shipping) angeben. In diesem Beispiel wird vorgeschlagen, die Versandinformationen an den Client weiterzugeben, nachdem der Kunde/die Kundin [seine/ihre Zahlungsmethode ausgewählt hat](https://docs.stripe.com/payments/accept-a-payment.md#web-create-intent). Erfahren Sie mehr über die Verwendung von [Affirm](https://docs.stripe.com/payments/affirm.md) mit Stripe. #### HTML + JS ```javascript const form = document.getElementById('payment-form'); form.addEventListener('submit', async (event) => { event.preventDefault(); const {error} = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: 'https://my-site.com/order/123/complete',shipping: { name: 'Jenny Rosen', address: { line1: '1 Street', city: 'Seattle', state: 'WA', postal_code: '95123', country: 'US' } }, } }); if (error) { // This point is reached if there's an immediate error when // confirming the payment. Show error to your customer (for example, // payment details incomplete) const messageContainer = document.querySelector('#error-message'); messageContainer.textContent = error.message; } else { // Your customer is redirected to your `return_url`. For some payment // methods like iDEAL, your customer is redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }); ``` #### React ```jsx import React, {useState} from 'react'; import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { const stripe = useStripe(); const elements = useElements(); const [errorMessage, setErrorMessage] = useState(null); 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 {error} = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: 'https://my-site.com/order/123/complete',shipping: { name: 'Jenny Rosen', address: { line1: '1 Street', city: 'Seattle', state: 'WA', postal_code: '95123', country: 'US' } }, } }); if (error) { // This point will only be reached if there is an immediate error when // confirming the payment. Show error to your customer (for example, // payment details incomplete) setErrorMessage(error.message); } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }; return (

{/* Show error message to your customers */} {errorMessage &&

{errorMessage}

} ) }; export default CheckoutForm; ``` #### Affirm testen In der folgenden Tabelle erfahren Sie, wie Sie verschiedene Szenarien testen können: | Szenario | So führen Sie den Test durch | | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------ | | Ihr/e Kund/in zahlt erfolgreich mit Affirm. | Füllen Sie das Formular aus (denken Sie daran, eine Lieferadresse anzugeben) und authentifizieren Sie die Zahlung. | | Ihr/e Kund/in konnte sich auf der Affirm-Weiterleitungsseite nicht authentifizieren. | Füllen Sie das Formular aus und klicken Sie auf der Weiterleitungsseite auf **Fehlgeschlagene Testzahlung**. | ### Afterpay (Clearpay) Wenn Sie einen PaymentIntent mit der Zahlungsmethode Afterpay erstellen, müssen Sie eine [Versandadresse](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-shipping) angeben. Erfahren Sie mehr über die Verwendung von [Afterpay](https://docs.stripe.com/payments/afterpay-clearpay.md) mit Stripe. Sie können Zahlungsmethoden über das [Dashboard](https://dashboard.stripe.com/settings/payment_methods) verwalten. Stripe handhabt die Rückgabe der in Frage kommenden Zahlungsmethoden basierend auf Faktoren wie dem Betrag und der Währung der Transaktion und dem Zahlungsablauf. Im folgenden Beispiel wird das Attribut [automatic_payment_methods](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-automatic_payment_methods-enabled) verwendet. Sie können jedoch auch `afterpay_clearpay` mit [Arten von Zahlungsmethoden](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types) auflisten. In der neuesten Version der API ist die Angabe des Parameters `automatic_payment_methods` optional, da Stripe seine Funktionalität standardmäßig aktiviert. Unabhängig von der gewählten Option müssen Sie unbedingt Afterpay Clearpay im [Dashboard](https://dashboard.stripe.com/settings/payment_methods) aktivieren. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "automatic_payment_methods[enabled]"=true \ -d "shipping[name]"="Jenny Rosen" \ -d "shipping[address][line1]"="1234 Main Street" \ -d "shipping[address][city]"="San Francisco" \ -d "shipping[address][state]"=CA \ -d "shipping[address][country]"=US \ -d "shipping[address][postal_code]"=94111 ``` #### Afterpay testen (Clearpay) In der folgenden Tabelle erfahren Sie, wie Sie verschiedene Szenarien testen können: | Szenario | So führen Sie den Test durch | | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | | Ihr/e Kund/in zahlt erfolgreich mit Afterpay. | Füllen Sie das Formular aus (denken Sie daran, eine Lieferadresse anzugeben) und authentifizieren Sie die Zahlung. | | Ihr/e Kund/in konnte sich auf der Afterpay-Weiterleitungsseite nicht authentifizieren. | Füllen Sie das Formular aus und klicken Sie auf der Weiterleitungsseite auf **Fehlgeschlagene Testzahlung**. | ### Apple Pay und Google Pay Wenn Sie [Kartenzahlungen aktivieren](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=paymentintents#create-the-paymentintent), zeigen wir Apple Pay und Google Pay für Kundinnen und Kunden an, deren Umgebung die [Wallet-Anzeigebedingungen](https://docs.stripe.com/testing/wallets.md) erfüllt. Um Zahlungen von diesen Wallets zu akzeptieren, müssen Sie außerdem Folgendes tun: - Aktivieren Sie sie in Ihren [Zahlungsmethodeneinstellungen](https://dashboard.stripe.com/settings/payment_methods). Apple Pay ist standardmäßig aktiviert. - Stellen Sie Ihre Anwendung über HTTPS in einer Entwicklungs- und Produktionsumgebung bereit. - [Registrieren Sie Ihre Domain](https://docs.stripe.com/payments/payment-methods/pmd-registration.md). - [Rufen Sie Aktualisierungen vom Server](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=paymentintents#fetch-updates) ab, wenn der Betrag eines [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) aktualisiert wird, um das Zahlungsmodal der Wallets synchron zu halten. > #### Regionale Tests > > Stripe Elements unterstützt weder Google Pay noch Apple Pay für Stripe-Konten und Kundinnen und Kunden in Indien. Daher können Sie Ihre Google Pay- oder Apple Pay-Integration nicht testen, wenn sich die IP-Adresse der testenden Person in Indien befindet, selbst wenn sich das Stripe-Konto außerhalb Indiens befindet. Erfahren Sie mehr über die Verwendung von [Apple Pay](https://docs.stripe.com/apple-pay.md) und [Google Pay](https://docs.stripe.com/google-pay.md) mit Stripe. ### ACH Direct Debit Wenn Sie das Payment Element mit der Zahlungsmethode ACH-Lastschriftverfahren verwenden, befolgen Sie diese Schritte: 1. Erstellen Sie ein [Kundenobjekt](https://docs.stripe.com/api/customers.md). ```curl curl -X POST https://api.stripe.com/v1/customers \ -u "<>:" ``` 1. Geben Sie beim Erstellen des `PaymentIntent` die Kunden-ID an. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d setup_future_usage=off_session \ -d customer={{CUSTOMER_ID}} \ -d "payment_method_types[]"=us_bank_account ``` 1. Wählen Sie eine [Verifizierungsmethode](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_options-us_bank_account-verification_method). Bei Verwendung der Zahlungsmethode ACH-Lastschrift mit dem Payment Element können Sie nur `automatic` oder `instant` auswählen. Erfahren Sie mehr über die Verwendung des [ACH-Lastschriftverfahrens](https://docs.stripe.com/payments/ach-direct-debit.md) mit Stripe. #### ACH-Lastschriftverfahren testen | Szenario | So führen Sie den Test durch | | ---------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Ihr/e Kund/in zahlt erfolgreich mit einem US-Bankkonto mittels sofortiger Verifizierung. | Wählen Sie **US-Bankkonto** aus und füllen Sie das Formular aus. Klicken Sie auf die Testinstitution. Folgen Sie den Anweisungen auf dem Modal, um Ihr Bankkonto zu verknüpfen. Klicken Sie auf Ihre Zahlungsschaltfläche. | | Ihr/e Kund/in zahlt erfolgreich mit einem US-Bankkonto mittels Mikroeinzahlungen. | Select **US bank account** and fill out the form. Click **Enter bank details manually instead**. Follow the instructions on the modal to link your bank account. You can use these [test account numbers](https://docs.stripe.com/payments/ach-direct-debit/accept-a-payment.md?platform=web#test-account-numbers). Click your payment button. | | Ihr/e Kund/in schließt die Verknüpfung des Bankkontos nicht ab. | Wählen Sie **US-Bankkonto** aus und klicken Sie auf die Testinstitution oder **Bankdaten stattdessen manuell eingeben**. Schließen Sie das Modal, ohne es abzuschließen. | ### BLIK Bei Verwendung des Payment Element mit BLIK können die Nutzer/innen das Modal schließen und sie auffordern, die Zahlung in ihrer Banking-App zu autorisieren. Dies löst eine Weiterleitung zu Ihrer `return_url` aus und der/die Nutzer/in kehrt nicht zur Bezahlseite zurück. Erfahren Sie mehr über die Verwendung von [BLIK](https://docs.stripe.com/payments/blik.md) mit Stripe. Um das Schließen des Modals durch Nutzer/innen zu handhaben, prüfen Sie im serverseitigen Handler für Ihre `return_url` den `status` des Payment Intent, um zu sehen, ob er `succeeded` ist oder immer noch `requires_action` (d. h. der/die Nutzer/in hat das Modal ohne Autorisierung geschlossen). Verfahren Sie mit jedem Fall einzeln. ### Zahlungsmethoden mit QR-Codes Bei Verwendung des Payment Elements mit einer Zahlungsmethode, die auf einem QR-Code basiert (WeChat Pay, PayNow, Pix, PromptPay, Cash App Pay), kann der/die Nutzer/in das QR-Code-Modal schließen. Dies löst eine Weiterleitung zu Ihrer `return_url` aus und der/die Nutzer/in kehrt nicht zur Bezahlseite zurück. Um das Schließen von QR-Code-Modals durch Nutzer/innen zu handhaben, prüfen Sie am serverseitigen Handler für Ihre `return_url` den `status` der Payment Intent, um zu sehen, ob er `succeeded` ist oder immer noch `requires_action` (d. h. der/die Nutzer/in hat das Modal geschlossen, ohne zu bezahlen), wobei jeder Fall nach Bedarf behandelt wird. Alternativ können Sie die automatische Weiterleitung zu Ihrer `return_url` verhindern, indem Sie den erweiterten optionalen Parameter [`redirect=if_required`](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) übergeben, der die Weiterleitung beim Schließen eines QR-Code-Modals verhindert. ### Barzahlung per App Das Payment Element rendert ein dynamisches Formular im Desktop-Web oder im mobilen Web unterschiedlich, da es unterschiedliche Kundenauthentifizierungsmethoden verwendet. Erfahren Sie mehr über die Verwendung von [Cash App Pay](https://docs.stripe.com/payments/cash-app-pay.md) mit Stripe. #### Element der mobilen Web-App Cash App Pay ist eine auf Weiterleitung basierende Zahlungsmethode im mobilen Web. Ihre Kundinnen und Kunden werden im Live-Modus zur Cash App oder zu einer Testzahlungsseite in einer Testumgebung weitergeleitet. Nachdem die Zahlung abgeschlossen ist, werden sie zur `return_url` umgeleitet, unabhängig davon, ob Sie `redirect=if_required` festlegen oder nicht. #### Desktop -Web-App-Element Cash App Pay ist eine QR-Code-Zahlungsmethode im Desktop-Web, bei der das Payment Element ein QR-Code-Modal rendert. Ihr/e Kund/in muss den QR-Code mit einer QR-Code-Scanner-Anwendung oder der mobilen Cash-App-Anwendung scannen. Im Live-Modus werden Kundinnen und Kunden zur `return_url` weitergeleitet, sobald sie zur Cash App weitergeleitet werden. Im Test-Modus können sie die Zahlung genehmigen oder ablehnen, bevor sie zur `return_url` weitergeleitet werden. Kundinnen und Kunden können das QR-Code-Modal auch schließen, bevor die Zahlung abgeschlossen wird. Dadurch wird eine Weiterleitung zu Ihrer `return_url` ausgelöst. Stellen Sie sicher, dass die `return_url` mit einer Seite auf Ihrer Website übereinstimmt, um den `status` des Payment Intent zu überprüfen. Der `status` des Payment Intent kann `succeeded`, `failed` oder `requires_action` lauten (z. B. hat der/die Kund/in das Modal geschlossen, ohne den QR-Code zu scannen). Alternativ können Sie die automatische Weiterleitung an Ihre `return_url` verhindern, indem Sie den erweiterten optionalen Parameter `redirect=if_required` übergeben, der die Weiterleitung beim Schließen eines QR-Code-Modals verhindert. ### PayPal Um PayPal zu verwenden, müssen Sie sicherstellen, dass Sie sich in einer [registrierten Domain](https://docs.stripe.com/payments/payment-methods/pmd-registration.md) befinden. ## Stripe Ihren Kundinnen/Kunden anzeigen Stripe erfasst Informationen über Kundeninteraktionen mit Elements , um Ihnen Dienste bereitzustellen, Betrug vorzubeugen und seine Dienste zu verbessern. Dies umfasst auch die Verwendung von Cookies und IP-Adressen, um zu ermitteln, welche Elements ein/e Kund/in während einer einzelnen Checkout-Sitzung gesehen hat. Sie sind dafür verantwortlich, alle Rechte und Zustimmungen offenzulegen und einzuholen, die Stripe benötigen, um Ihre Daten auf diese Weise zu nutzen. Weitere Informationen finden Sie in unserem [Datenschutzcenter](https://stripe.com/legal/privacy-center#as-a-business-user-what-notice-do-i-provide-to-my-end-customers-about-stripe). ## See also - [Stripe Elements](https://docs.stripe.com/payments/elements.md) - [Zukünftige Zahlungen einrichten](https://docs.stripe.com/payments/save-and-reuse.md) - [Zahlungsdetails während der Zahlung speichern](https://docs.stripe.com/payments/save-during-payment.md) - [Berechnung von Sales Tax, GST und USt. in Ihrem Zahlungsablauf](https://docs.stripe.com/tax/custom.md) # In-App-Integration für iOS > This is a In-App-Integration für iOS for when payment-ui is mobile and platform is ios. View the full page at https://docs.stripe.com/payments/accept-a-payment?payment-ui=mobile&platform=ios. ![](https://b.stripecdn.com/docs-statics-srv/assets/ios-overview.9e0d68d009dc005f73a6f5df69e00458.png) Integrieren Sie die vorgefertigte Zahlungs-UI von Stripe in den Bezahlvorgang Ihrer iOS app mit der [PaymentSheet](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html)-Klasse. Sehen Sie sich unsere Beispielintegration [auf GitHub](https://github.com/stripe/stripe-ios/tree/master/Example/PaymentSheet%20Example) an. ## Stripe einrichten [Serverseitig] [Clientseitig] Zunächst benötigen Sie ein Stripe-Konto. [Registrieren Sie sich jetzt](https://dashboard.stripe.com/register). ### Serverseitig Diese Integration erfordert Endpoints auf Ihrem Server, die mit der Stripe-API kommunizieren können. Nutzen Sie unsere offiziellen Bibliotheken für den Zugriff auf die Stripe-API von Ihrem Server aus: #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ### Clientseitig Das [Stripe iOS SDK](https://github.com/stripe/stripe-ios) ist Open Source, [vollständig dokumentiert](https://stripe.dev/stripe-ios/index.html) und kompatibel mit Apps, die iOS 13 oder höher unterstützen. #### Swift Package Manager Führen Sie zur Installation des SDK die folgenden Schritte aus: 1. Wählen Sie in Xcode **Datei** > **Add Package Dependencies** (Paketabhängigkeiten hinzufügen) aus und geben Sie als Repository-URL `https://github.com/stripe/stripe-ios-spm` ein. 1. Wählen auf unserer [Veröffentlichungsseite](https://github.com/stripe/stripe-ios/releases) die neueste Version aus. 1. Fügen Sie das Produkt **StripePaymentSheet** zum [Ziel Ihrer App](https://developer.apple.com/documentation/swift_packages/adding_package_dependencies_to_your_app) hinzu. #### CocoaPods 1. Falls noch nicht geschehen, installieren Sie bitte die aktuellste Version von [CocoaPods](https://guides.cocoapods.org/using/getting-started.html). 1. Wenn Sie keine bestehende [Podfile](https://guides.cocoapods.org/syntax/podfile.html) haben, führen Sie folgenden Befehl aus, um eine zu erstellen: ```bash pod init ``` 1. Fügen Sie folgende Zeile in Ihre `Podfile` ein: ```podfile pod 'StripePaymentSheet' ``` 1. Führen Sie folgenden Befehl aus: ```bash pod install ``` 1. Vergessen Sie nicht, ab jetzt in Zukunft anstelle der Datei `.xcodeproj` die Datei `.xcworkspace` zum Öffnen Ihres Projekts in Xcode zu verwenden. 1. Führen Sie für zukünftige Updates auf die jeweils aktuelle Version des SDK Folgendes aus: ```bash pod update StripePaymentSheet ``` #### Carthage 1. Falls noch nicht geschehen, installieren Sie bitte die aktuelle Version von [Carthage](https://github.com/Carthage/Carthage#installing-carthage). 1. Fügen Sie folgende Zeile in Ihre `Cartfile` ein: ```cartfile github "stripe/stripe-ios" ``` 1. Befolgen Sie die [Carthage-Installationsanweisungen](https://github.com/Carthage/Carthage#if-youre-building-for-ios-tvos-or-watchos). Vergewissern Sie sich, dass Sie alle [hier](https://github.com/stripe/stripe-ios/tree/master/StripePaymentSheet/README.md#manual-linking) aufgeführten erforderlichen Frameworks einbetten. 1. Führen Sie für zukünftige Updates auf die aktuelle Version unseres SDK einfach folgenden Befehl aus: ```bash carthage update stripe-ios --platform ios ``` #### Manuelles Framework 1. Gehen Sie auf unsere [GitHub-Release-Seite](https://github.com/stripe/stripe-ios/releases/latest), laden Sie **Stripe.xcframework.zip** herunter und entpacken Sie die Datei. 1. Ziehen Sie **StripePaymentSheet.xcframework** in den Abschnitt **Embedded Binaries** (Eingebettete Binärdateien) der Einstellungen unter **General** (Allgemeines) Ihres Xcode-Projekts. Aktivieren Sie dabei die Option **Copy items if needed** (Elemente kopieren, falls nötig). 1. Wiederholen Sie Schritt 2 für alle [hier](https://github.com/stripe/stripe-ios/tree/master/StripePaymentSheet/README.md#manual-linking) aufgeführten erforderlichen Frameworks. 1. Wiederholen Sie für zukünftige Updates auf die jeweils aktuelle Version des SDK die Schritte 1–3. > Details zur aktuellen SDK-Version und zu vorherigen Versionen finden Sie auf der Seite [Releases](https://github.com/stripe/stripe-ios/releases) auf GitHub. Um bei Veröffentlichung einer neuen Version eine Benachrichtigung zu erhalten, [achten Sie auf die Releases zum jeweiligen Repository](https://help.github.com/en/articles/watching-and-unwatching-releases-for-a-repository#watching-releases-for-a-repository). ## Zahlungsmethoden aktivieren Zeigen Sie Ihre [Einstellungen für Zahlungsmethoden](https://dashboard.stripe.com/settings/payment_methods) an und aktivieren Sie die Zahlungsmethoden, die Sie unterstützen möchten. Sie müssen mindestens eine Zahlungsmethode aktiviert haben, um einen *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods) zu erstellen. Standardmäßig aktiviert Stripe Karten und andere gängige Zahlungsmethoden, mit denen Sie mehr Kundinnen und Kunden erreichen können. Wir empfehlen jedoch, zusätzliche Zahlungsmethoden zu aktivieren, die für Ihr Unternehmen und Ihre Kundschaft relevant sind. Weitere Informationen zur Unterstützung von Produkten und Zahlungsmethoden finden Sie auf der Seite [Unterstützte Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) und der [Preisseite](https://stripe.com/pricing/local-payment-methods) für Gebühren. ## Endpoint hinzufügen [Serverseitig] > #### Hinweis > > Um das PaymentSheet vor dem Erstellen eines PaymentIntent anzuzeigen, finden Sie weitere Informationen unter [Erfassen von Zahlungsdetails vor dem Erstellen eines Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment). Wenn Ihre Connect-Plattform verwendet [kundenkonfigurierte Konten](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), benutze unser [Anleitung](https://docs.stripe.com/connect/use-accounts-as-customers.md) Ersetzen `Customer` und Ereignisreferenzen in Ihrem Code mit den entsprechenden Accounts v2 API-Referenzen. Diese Integration verwendet drei Stripe-API-Objekte: 1. [PaymentIntent](https://docs.stripe.com/api/payment_intents.md): Stripe verwendet diesen, um Ihre Absicht darzustellen, Zahlungen von Ihren Kundinnen/Kunden anzufordern, wobei Abbuchungsversuche und Zahlungsstatusänderungen im gesamten Vorgang dokumentiert werden. 1. (Optional) [Kunde/Kundin](https://docs.stripe.com/api/customers.md): Um eine Zahlungsmethode für zukünftige Zahlungen einzurichten, müssen Sie sie *einem Kunden/einer Kundin* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) zuordnen. Erstellen Sie ein Customer-Objekt, wenn Ihre Kundin/Ihr Kunde ein Konto bei Ihrem Unternehmen anlegt. Wenn eine Zahlung als Gast durchgeführt wird, können Sie vor der Zahlung ein Customer-Objekt erstellen und es zu einem späteren Zeitpunkt mit Ihrer eigenen internen Darstellung des Kundenkontos verknüpfen. 1. (Optional) [CustomerSession](https://docs.stripe.com/api/customer_sessions.md): Informationen im Kundenobjekt sind vertraulich und können nicht direkt über die App abgerufen werden. Eine CustomerSession gewährt dem SDK vorübergehenden, bereichsbezogenen Zugriff auf den Kunden/die Kundin und stellt zusätzliche Konfigurationsoptionen bereit. Hier finden Sie eine vollständige Liste der [Konfigurationsoptionen](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components). > Wenn Sie niemals Karten für eine/n Kund/in speichern und wiederkehrenden Kund/innen nicht erlauben, gespeicherte Karten wiederzuverwenden, können Sie das Customer-Objekt und das CustomerSession-Objekt aus Ihrer Integration weglassen. Aus Sicherheitsgründen kann Ihre App diese Objekte nicht erstellen. Fügen Sie stattdessen einen Endpoint auf Ihrem Server hinzu, der: 1. Ruft den Kunden/die Kundin ab oder erstellt einen neuen/eine neue. 1. Erstellt eine [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) für den Kunden/die Kundin. 1. Erstellt einen PaymentIntent mit dem [Betrag](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount), der [Währung](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency) und [dem Kunden/der Kundin](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer). 1. Gibt das *Client-Geheimnis* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) des PaymentIntent, das `client_secret` der CustomerSession, die [ID](https://docs.stripe.com/api/customers/object.md#customer_object-id) des Kundenobjekts und Ihren [veröffentlichbaren Schlüssel](https://dashboard.stripe.com/apikeys) an Ihre App zurück. Die Zahlungsmethoden, die Kund/innen während des Bezahlvorgangs angezeigt werden, sind ebenfalls in der PaymentIntent enthalten. Sie können Stripe Zahlungsmethoden aus Ihren Dashboard-Einstellungen abrufen lassen oder sie manuell auflisten. Gleich welche Option Sie wählen, die in der PaymentIntent übergebene Währung filtert die Zahlungsmethoden, die dem/r Kund/in angezeigt werden. Wenn Sie beispielsweise `eur` für den PaymentIntent übergeben und OXXO im Dashboard aktiviert ist, wird dem/r Kund/in OXXO nicht angezeigt, da OXXO `eur`-Zahlungen nicht unterstützt. Sofern Ihre Integration keine codebasierte Option zum Anbieten von Zahlungsmethoden erfordert, empfiehlt Stripe die automatisierte Option, da Stripe die Währung, Einschränkungen für Zahlungsmethoden und andere Parameter auswertet, um die Liste der unterstützten Zahlungsmethoden zu ermitteln. Zahlungsmethoden, die die Konversion steigern und die für die Währung und den Standort des/r Kund/in am relevantesten sind, erhalten Priorität. #### Zahlungsmethoden über das Dashboard verwalten Zahlungsmethoden können Sie über das [Dashboard](https://dashboard.stripe.com/settings/payment_methods) verwalten. Stripe handhabt die Rückgabe geeigneter Zahlungsmethoden basierend auf Faktoren wie Betrag, Währung und Zahlungsablauf der Transaktion. Der PaymentIntent wird mit den Zahlungsmethoden erstellt, die Sie im Dashboard konfiguriert haben. Wenn Sie das Dashboard nicht verwenden möchten oder wenn Sie Zahlungsmethoden manuell angeben möchten, können Sie sie mit dem Attribut `payment_method_types` auflisten. #### Curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ # In the latest version of the API, specifying the `automatic_payment_methods` parameter # is optional because Stripe enables its functionality by default. -d "automatic_payment_methods[enabled]"=true \ ``` #### Zahlungsmethoden manuell auflisten #### Curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "payment_method_types[]"="bancontact" \ -d "payment_method_types[]"="card" \ -d "payment_method_types[]"="ideal" \ -d "payment_method_types[]"="klarna" \ -d "payment_method_types[]"="sepa_debit" \ ``` > Jede Zahlungsmethode muss die im PaymentIntent übergebene Währung unterstützen, und Ihr Unternehmen muss in einem der Länder ansässig sein, die jede Zahlungsmethode unterstützt. Auf der Seite [Optionen für die Integration von Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/integration-options.md) finden Sie weitere Informationen zu den unterstützten Zahlungsmethoden. ## Zahlungsdaten erfassen [Clientseitig] Um das mobile Payment Element auf Ihrem Checkout-Bildschirm anzuzeigen, stellen Sie bitte Folgendes sicher: - Zeigen Sie vom Kunden/von der Kundin gekaufte Produkte und den Gesamtbetrag an - Verwenden Sie das [Address Element](https://docs.stripe.com/elements/address-element.md?platform=ios), um alle benötigten Versanddaten des Kunden/der Kundin zu erfassen - Fügen Sie eine Checkout-Schaltfläche ein, um die Nutzeroberfläche von Stripe anzuzeigen #### UIKit Rufen Sie auf dem Checkout-Bildschirm Ihrer App das PaymentIntent-Client-Geheimnis, das CustomerSession-Client-Geheimnis, die Kunden-ID und den veröffentlichbaren Schlüssel von dem Endpoint ab, den Sie im vorherigen Schritt erstellt haben. Legen Sie Ihren veröffentlichbaren Schlüssel mit `STPAPIClient.shared` fest und initialisieren Sie das [PaymentSheet](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html). #### iOS (Swift) ```swift import UIKit@_spi(CustomerSessionBetaAccess) import StripePaymentSheet class CheckoutViewController: UIViewController { @IBOutlet weak var checkoutButton: UIButton! var paymentSheet: PaymentSheet? let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint override func viewDidLoad() { super.viewDidLoad() checkoutButton.addTarget(self, action: #selector(didTapCheckoutButton), for: .touchUpInside) checkoutButton.isEnabled = false // MARK: Fetch the PaymentIntent client secret, CustomerSession client secret, Customer ID, and publishable key var request = URLRequest(url: backendCheckoutUrl) request.httpMethod = "POST" let task = URLSession.shared.dataTask(with: request, completionHandler: { [weak self] (data, response, error) in guard let data = data, let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any], let customerId = json["customer"] as? String, let customerSessionClientSecret = json["customerSessionClientSecret"] as? String, let paymentIntentClientSecret = json["paymentIntent"] as? String, let publishableKey = json["publishableKey"] as? String, let self = self else { // Handle error return } STPAPIClient.shared.publishableKey = publishableKey// MARK: Create a PaymentSheet instance var configuration = PaymentSheet.Configuration() configuration.merchantDisplayName = "Example, Inc." configuration.customer = .init(id: customerId, customerSessionClientSecret: customerSessionClientSecret) // Set `allowsDelayedPaymentMethods` to true if your business handles // delayed notification payment methods like US bank accounts. configuration.allowsDelayedPaymentMethods = true self.paymentSheet = PaymentSheet(paymentIntentClientSecret:paymentIntentClientSecret, configuration: configuration) DispatchQueue.main.async { self.checkoutButton.isEnabled = true } }) task.resume() } } ``` Wenn Kund/innen auf die Schaltfläche **Checkout** tippen, rufen Sie bitte `present` auf, um das Zahlungsformular anzuzeigen. Nachdem die Zahlung abgeschlossen wurde, verwirft Stripe das Formular und der Abschlussblock wird mit einem [PaymentSheetResult](https://stripe.dev/stripe-ios/stripe-paymentsheet/Enums/PaymentSheetResult.html) aufgerufen. #### iOS (Swift) ```swift @objc func didTapCheckoutButton() { // MARK: Start the checkout process paymentSheet?.present(from: self) { paymentResult in // MARK: Handle the payment result switch paymentResult { case .completed: print("Your order is confirmed") case .canceled: print("Canceled!") case .failed(let error): print("Payment failed: \(error)") } } } ``` #### SwiftUI Erstellen Sie ein `ObservableObject`-Modell für Ihren Bezahlbildschirm. Dieses Modell veröffentlicht ein [PaymentSheet](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html) und ein [PaymentSheetResult](https://stripe.dev/stripe-ios/stripe-paymentsheet/Enums/PaymentSheetResult.html). ```swift import StripePaymentSheet import SwiftUI class CheckoutViewModel: ObservableObject { let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint @Published var paymentSheet: PaymentSheet? @Published var paymentResult: PaymentSheetResult? } ``` Rufen Sie das PaymentIntent-Client-Geheimnis, das CustomerSession-Client-Geheimnis, die Kunden-ID und den veröffentlichbaren Schlüssel von dem Endpoint ab, den Sie im vorherigen Schritt erstellt haben. Legen Sie Ihren veröffentlichbaren Schlüssel mit `STPAPIClient.shared` fest und initialisieren Sie das [PaymentSheet](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html). ```swift @_spi(CustomerSessionBetaAccess) import StripePaymentSheet import SwiftUI class CheckoutViewModel: ObservableObject { let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint @Published var paymentSheet: PaymentSheet? @Published var paymentResult: PaymentSheetResult? func preparePaymentSheet() { // MARK: Fetch thePaymentIntent and Customer information from the backend var request = URLRequest(url: backendCheckoutUrl) request.httpMethod = "POST" let task = URLSession.shared.dataTask(with: request, completionHandler: { [weak self] (data, response, error) in guard let data = data, let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any], let customerId = json["customer"] as? String, let customerSessionClientSecret = json["customerSessionClientSecret"] as? String, letpaymentIntentClientSecret = json["paymentIntent"] as? String, let publishableKey = json["publishableKey"] as? String, let self = self else { // Handle error return } STPAPIClient.shared.publishableKey = publishableKey// MARK: Create a PaymentSheet instance var configuration = PaymentSheet.Configuration() configuration.merchantDisplayName = "Example, Inc." configuration.customer = .init(id: customerId, customerSessionClientSecret: customerSessionClientSecret) // Set `allowsDelayedPaymentMethods` to true if your business handles // delayed notification payment methods like US bank accounts. configuration.allowsDelayedPaymentMethods = true DispatchQueue.main.async { self.paymentSheet = PaymentSheet(paymentIntentClientSecret:paymentIntentClientSecret, configuration: configuration) } }) task.resume() } } struct CheckoutView: View { @ObservedObject var model = CheckoutViewModel() var body: some View { VStack { if model.paymentSheet != nil { Text("Ready to pay.") } else { Text("Loading…") } }.onAppear { model.preparePaymentSheet() } } } ``` Fügen Sie Ihrer `View` ein [PaymentSheet.PaymentButton](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/PaymentButton.html) hinzu. Diese verhält sich ähnlich wie eine SwiftUI-`Button` und kann durch Hinzufügen einer `View` angepasst werden. Wenn Sie auf die Schaltfläche tippen, wird das PaymentSheet angezeigt. Beim Abschließen der Zahlung verwirft Stripe das PaymentSheet und der `onCompletion`-Handler mit einem [PaymentSheetResult](https://stripe.dev/stripe-ios/stripe-paymentsheet/Enums/PaymentSheetResult.html)-Objekt aufgerufen. ```swift @_spi(CustomerSessionBetaAccess) import StripePaymentSheet import SwiftUI class CheckoutViewModel: ObservableObject { let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint @Published var paymentSheet: PaymentSheet? @Published var paymentResult: PaymentSheetResult? func preparePaymentSheet() { // MARK: Fetch the PaymentIntent and Customer information from the backend var request = URLRequest(url: backendCheckoutUrl) request.httpMethod = "POST" let task = URLSession.shared.dataTask(with: request, completionHandler: { [weak self] (data, response, error) in guard let data = data, let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any], let customerId = json["customer"] as? String, let customerSessionClientSecret = json["customerSessionClientSecret"] as? String, let paymentIntentClientSecret = json["paymentIntent"] as? String, let publishableKey = json["publishableKey"] as? String, let self = self else { // Handle error return } STPAPIClient.shared.publishableKey = publishableKey // MARK: Create a PaymentSheet instance var configuration = PaymentSheet.Configuration() configuration.merchantDisplayName = "Example, Inc." configuration.customer = .init(id: customerId, customerSessionClientSecret: customerSessionClientSecret) // Set `allowsDelayedPaymentMethods` to true if your business can handle payment methods // that complete payment after a delay, like SEPA Debit and Sofort. configuration.allowsDelayedPaymentMethods = true DispatchQueue.main.async { self.paymentSheet = PaymentSheet(paymentIntentClientSecret: paymentIntentClientSecret, configuration: configuration) } }) task.resume() } func onPaymentCompletion(result: PaymentSheetResult) { self.paymentResult = result } } struct CheckoutView: View { @ObservedObject var model = CheckoutViewModel() var body: some View { VStack {if let paymentSheet = model.paymentSheet { PaymentSheet.PaymentButton( paymentSheet: paymentSheet, onCompletion: model.onPaymentCompletion ) { Text("Buy") } } else { Text("Loading…") }if let result = model.paymentResult { switch result { case .completed: Text("Payment complete") case .failed(let error): Text("Payment failed: \(error.localizedDescription)") case .canceled: Text("Payment canceled.") } } }.onAppear { model.preparePaymentSheet() } } } ``` Wenn das Ergebnis von `PaymentSheetResult` `.completed` lautet, informieren Sie den/die Nutzer/in, (zum Beispiel durch die Anzeige einer Bestellbestätigung). Wenn Sie `allowsDelayedPaymentMethods` auf true festlegen, werden Zahlungsmethoden mit [verzögerter Benachrichtigung](https://docs.stripe.com/payments/payment-methods.md#payment-notification) wie US-Bankkonten zugelassen. Für diese Zahlungsmethoden ist der endgültige Zahlungsstatus nicht bekannt, wenn das `PaymentSheet` abgeschlossen wird. Stattdessen ist sie erfolgreich oder schlägt fehl. Wenn Sie diese Art von Zahlungsmethoden unterstützen, informieren Sie den Kunden/die Kundin darüber, dass seine/ihre Bestellung bestätigt ist, und führen seine/ihre Bestellung erst aus (z. B. das Produkt versenden), wenn die Zahlung erfolgreich ist. ## Rückgabe-URL einrichten [Clientseitig] Der Kunde/Die Kundin verlässt ggf. Ihre App, um sich zu authentifizieren (z. B. in Safari oder einer Banking-App). Damit sie nach der Authentifizierung automatisch zu Ihrer App zurückkehren können, [konfigurieren Sie ein benutzerdefiniertes URL-Schema](https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app) und richten Sie Ihren App-Delegate so ein, dass die URL an das SDK weitergeleitet wird. Stripe unterstützt keine [universellen Links](https://developer.apple.com/documentation/xcode/allowing-apps-and-websites-to-link-to-your-content). #### SceneDelegate #### Swift ```swift // This method handles opening custom URL schemes (for example, "your-app://stripe-redirect") func scene(_ scene: UIScene, openURLContexts URLContexts: Set) { guard let url = URLContexts.first?.url else { return } let stripeHandled = StripeAPI.handleURLCallback(with: url) if (!stripeHandled) { // This was not a Stripe url – handle the URL normally as you would } } ``` #### AppDelegate #### Swift ```swift // This method handles opening custom URL schemes (for example, "your-app://stripe-redirect") func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool { let stripeHandled = StripeAPI.handleURLCallback(with: url) if (stripeHandled) { return true } else { // This was not a Stripe url – handle the URL normally as you would } return false } ``` #### SwiftUI #### Swift ```swift @main struct MyApp: App { var body: some Scene { WindowGroup { Text("Hello, world!").onOpenURL { incomingURL in let stripeHandled = StripeAPI.handleURLCallback(with: incomingURL) if (!stripeHandled) { // This was not a Stripe url – handle the URL normally as you would } } } } } ``` Legen Sie zusätzlich die [returnURL](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV9returnURLSSSgvp) in Ihrem [PaymentSheet.Configuration](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html)-Objekt auf die URL für Ihre App fest. ```swift var configuration = PaymentSheet.Configuration() configuration.returnURL = "your-app://stripe-redirect" ``` ## Ereignisse nach Zahlung verarbeiten [Serverseitig] Stripe sendet ein [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie [Webhook-Tool im Dashboard](https://dashboard.stripe.com/webhooks) oder folgen Sie der [Webhook-Anleitung](https://docs.stripe.com/webhooks/quickstart.md), um diese Ereignisse zu empfangen und führen Sie Aktionen aus, wie beispielsweise das Senden einer Bestellbestätigung per E-Mail, das Protokollieren des Verkaufs in der Datenbank oder das Starten eines Versand-Workflows. Überwachen Sie diese Ereignisse, statt auf einen Callback vom Client zu warten. Auf dem Client könnten die Kund/innen das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist. Bösartige Clients könnten dann die Antwort manipulieren. Wenn Sie Ihre Integration so einrichten, dass sie asynchrone Ereignisse überwacht, können Sie [verschiedene Arten von Zahlungsmethoden](https://stripe.com/payments/payment-methods-guide) mit einer einzelnen Integration akzeptieren. Neben der Abwicklung des `payment_intent.succeeded`-Ereignisses empfehlen wir die Abwicklung von diesen weiteren Ereignissen, wenn Sie Zahlungen mit dem Payment Element erfassen: | Ereignis | Beschreibung | Aktion | | ------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded) | Wird gesendet, wenn Kundinnen und Kunden eine Zahlung erfolgreich abgeschlossen haben. | Senden Sie den Kund/innen eine Auftragsbestätigung und *wickeln* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) Sie die Bestellung ab. | | [payment_intent.processing](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.processing) | Wird gesendet, wenn eine/e Kund/in eine Zahlung erfolgreich veranlasst hat, die Zahlung aber noch nicht abgeschlossen ist. Dieses Ereignis wird am häufigsten gesendet, wenn der Kunde/die Kundin eine Bankabbuchung veranlasst. In Zukunft folgt darauf entweder ein `payment_intent.succeeded`- oder ein `payment_intent.payment_failed`-Ereignis. | Senden Sie eine Bestellbestätigung an die Kund/innen, in der angegeben ist, dass die Zahlung noch aussteht. Bei digitalen Waren können Sie die Bestellung abwickeln, bevor Sie darauf warten, dass die Zahlung erfolgt. | | [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Wird gesendet, wenn ein Kunde/eine Kundin einen Zahlungsversuch durchführt, die Zahlung jedoch fehlschlägt. | Wenn eine Zahlung von `processing` zu `payment_failed` übergeht, bieten Sie der Kundin/dem Kunden einen weiteren Zahlungsversuch an. | ## Integration testen #### Karten | Kartennummer | Szenario | So führen Sie den Test durch | | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | | 4242424242424242 | Die Kartenzahlung ist erfolgreich und es ist keine Authentifizierung erforderlich. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | 4000002500003155 | Für die Kartenzahlung ist eine *Authentifizierung* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase) erforderlich. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | 4000000000009995 | Die Karte wird mit einem Ablehnungscode wie `insufficient_funds` abgelehnt. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | 6205500000000000004 | Die UnionPay-Karte hat eine variable Länge von 13 bis 19 Ziffern. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | #### Bankumleitungen | Zahlungsmethode | Szenario | So führen Sie den Test durch | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Bancontact, iDEAL | Ihr/e Kund/in konnte sich auf der iDEAL-Weiterleitungsseite für eine auf Weiterleitung basierende Zahlungsmethode mit sofortiger Benachrichtigung nicht authentifizieren. | Wählen Sie eine beliebige, auf Weiterleitung basierende Zahlungsmethode aus, füllen Sie die erforderlichen Informationen aus und bestätigen Sie die Zahlung. Klicken Sie dann auf der Weiterleitungsseite auf **Testzahlung fehlgeschlagen**. | | Pay by Bank | Ihr Kunde/Ihre Kundin zahlt erfolgreich mit einer auf Weiterleitung basierenden Zahlungsmethode mit [verzögerter Benachrichtigung](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Wählen Sie die Zahlungsmethode aus, füllen Sie die erforderlichen Informationen aus und bestätigen Sie die Zahlung. Klicken Sie dann auf der Weiterleitungsseite auf **Testzahlung abschließen**. | | Pay by Bank | Ihr/e Kund/in konnte sich auf der iDEAL-Weiterleitungsseite für eine auf Weiterleitung basierende Zahlungsmethode mit verzögerter Benachrichtigung nicht authentifizieren. | Wählen Sie die Zahlungsmethode aus, füllen Sie die erforderlichen Informationen aus und bestätigen Sie die Zahlung. Klicken Sie dann auf der Weiterleitungsseite auf **Testzahlung fehlgeschlagen**. | | BLIK | BLIK-Zahlungen können aus verschiedenen Gründen fehlschlagen. Es gibt sofortige Fehler (der Code ist abgelaufen oder ungültig), verzögerte Fehler (die Bank lehnt ab) oder Zeitüberschreitungen (der/die Kund/in hat nicht rechtzeitig reagiert). | Verwenden Sie E-Mail-Muster, um [die verschiedenen Fehler zu simulieren](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures) | #### Banklastschriften | Zahlungsmethode | Szenario | So führen Sie den Test durch | | ---------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | SEPA-Lastschrift | Ihr/e Kund/in zahlt erfolgreich mit dem SEPA-Lastschriftverfahren. | Füllen Sie das Formular mit der Kontonummer `AT321904300235473204` aus. Die bestätigte PaymentIntent geht zunächst in den Status „wird verarbeitet“ und dann drei Minuten später in den Status „erfolgreich“ über. | | SEPA-Lastschrift | Der Status der PaymentIntent Ihres/Ihrer Kund/in wechselt von `processing` zu `requires_payment_method`. | Füllen Sie das Formular mit der Kontonummer `AT861904300235473202` aus. | Hier finden Sie weitere Informationen zum [Testen](https://docs.stripe.com/testing.md) Ihrer Integration. ## Optional: Link aktivieren Aktivieren Sie Link in Ihren [Einstellungen für Zahlungsmethoden](https://dashboard.stripe.com/settings/payment_methods), damit Ihre Kundinnen/Kunden ihre Zahlungsinformationen sicher speichern und wiederverwenden können. Diese müssen die Zahlung dann nur mit einem Klick auf die Express-Schaltfläche von Link abschließen. ### Übergeben Sie die E-Mail-Adresse Ihrer Kundinnen/Kunden an das Mobile Payment Element Link authentifiziert Kundinnen/Kunden über ihre E-Mail-Adresse. Stripe empfiehlt, möglichst viele Informationen vorab auszufüllen, um den Bezahlvorgang zu optimieren. Um den Namen, die E-Mail-Adresse und die Telefonnummer der Kundin/des Kunden vorab auszufüllen, geben Sie bei der Initialisierung von `PaymentSheet.Configuration` Ihre Kundeninformationen für `defaultBillingDetails` an. ```swift var configuration = PaymentSheet.Configuration() configuration.defaultBillingDetails.name = "Jenny Rosen" configuration.defaultBillingDetails.email = "jenny.rosen@example.com" configuration.defaultBillingDetails.phone = "888-888-8888" ``` ## Optional: Apple Pay aktivieren > Wenn auf Ihrem Checkout-Bildschirm die Schaltfläche **Apple Pay** angezeigt wird, folgen Sie der [Apple Pay-Anleitung](https://docs.stripe.com/apple-pay.md#present-payment-sheet) und verwenden Sie `ApplePayContext`, um Zahlungen über Ihre Apple Pay-Schaltfläche einzuziehen. Mit `PaymentSheet` können Sie andere Arten von Zahlungsmethoden abwickeln. ### Für eine Apple-Händler-ID registrieren Beantragen Sie eine Apple-Händler-ID, indem Sie sich auf der Apple Developer-Website [für eine neue Kennung registrieren](https://developer.apple.com/account/resources/identifiers/add/merchant). Tragen Sie eine Beschreibung und eine Kennung in das Formular ein. Die Beschreibung ist nur für Ihre internen Zwecke bestimmt und kann später geändert werden. Stripe empfiehlt, dass Sie den Namen Ihrer App als Kennung verwenden, zum Beispiel `merchant.com.{{YOUR_APP_NAME}}`. ### Neues Apple Pay-Zertifikat erstellen Erstellen Sie ein Zertifikat für Ihre App, um Zahlungsdaten zu verschlüsseln. Gehen Sie zu den [iOS-Zertifikateinstellungen](https://dashboard.stripe.com/settings/ios_certificates) im Dashboard, klicken Sie auf **Neue Anwendung hinzufügen** und befolgen Sie die Anleitung. Laden Sie eine Certificate Signing Request (CSR)-Datei herunter, um ein sicheres Zertifikat von Apple zu erhalten, mit dem Sie Apple Pay verwenden können. Eine CSR-Datei muss verwendet werden, um genau ein Zertifikat auszustellen. Wenn Sie Ihre Apple-Händler-ID wechseln, müssen Sie zu den [iOS-Zertifikateinstellungen](https://dashboard.stripe.com/settings/ios_certificates) im Dashboard gehen, um eine neue CSR und ein Zertifikat zu erhalten. ### Mit Xcode integrieren Fügen Sie Ihrer App die **Apple Pay**-Funktion hinzu. Öffnen Sie in Xcode Ihre Projekteinstellungen, klicken Sie auf die Registerkarte **Signing & Capabilities** (Anmeldung und Funktionen) und fügen Sie die **Apple Pay**-Funktion hinzu. Möglicherweise werden Sie an dieser Stelle aufgefordert, sich bei Ihrem Entwicklerkonto anzumelden. Wählen Sie die zuvor erstellte Händler-ID aus. Ihre App sollte nun Apple Pay unterstützen. ![](https://b.stripecdn.com/docs-statics-srv/assets/xcode.a701d4c1922d19985e9c614a6f105bf1.png) Apple Pay-Funktion in Xcode aktivieren ### Apple Pay hinzufügen #### Einmalige Zahlung Um Apple Pay zum PaymentSheet hinzuzufügen, setzen Sie [applePay](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV8applePayAC05ApplefD0VSgvp), nachdem Sie `PaymentSheet.Configuration` mit Ihrer Apple-Händler-ID und dem [Ländercode Ihres Unternehmens](https://dashboard.stripe.com/settings/account) initialisiert haben. #### iOS (Swift) ```swift var configuration = PaymentSheet.Configuration() configuration.applePay = .init( merchantId: "merchant.com.your_app_name", merchantCountryCode: "US" ) ``` #### Wiederkehrende Zahlungen Um Apple Pay zum PaymentSheet hinzuzufügen, setzen Sie [applePay](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV8applePayAC05ApplefD0VSgvp), nachdem Sie `PaymentSheet.Configuration` mit Ihrer Apple-Händler-ID und dem [Ländercode Ihres Unternehmens](https://dashboard.stripe.com/settings/account) initialisiert haben. Gemäß den [Apple-Richtlinien](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Supporting-subscriptions) für wiederkehrende Zahlungen müssen Sie auch zusätzliche Attribute für `PKPaymentRequest` festlegen. Fügen Sie in [ApplePayConfiguration.paymentRequestHandlers](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/applepayconfiguration/handlers/paymentrequesthandler) einen Handler hinzu, um die [PKPaymentRequest.paymentSummaryItems](https://developer.apple.com/documentation/passkit/pkpaymentrequest/1619231-paymentsummaryitems) mit dem Betrag zu konfigurieren, den Sie berechnen möchten (z. B. 9,95 USD pro Monat). Sie können auch [Händler-Token](https://developer.apple.com/apple-pay/merchant-tokens/) übernehmen, indem Sie die Eigenschaften `recurringPaymentRequest` oder `automaticReloadPaymentRequest` für `PKPaymentRequest` festlegen. Weitere Informationen zur Verwendung wiederkehrender Zahlungen mit Apple Pay finden Sie in der [PassKit-Dokumentation von Apple](https://developer.apple.com/documentation/passkit/pkpaymentrequest). #### iOS (Swift) ```swift let customHandlers = PaymentSheet.ApplePayConfiguration.Handlers( paymentRequestHandler: { request in // PKRecurringPaymentSummaryItem is available on iOS 15 or later if #available(iOS 15.0, *) { let billing = PKRecurringPaymentSummaryItem(label: "My Subscription", amount: NSDecimalNumber(string: "59.99")) // Payment starts today billing.startDate = Date() // Payment ends in one year billing.endDate = Date().addingTimeInterval(60 * 60 * 24 * 365) // Pay once a month. billing.intervalUnit = .month billing.intervalCount = 1 // recurringPaymentRequest is only available on iOS 16 or later if #available(iOS 16.0, *) { request.recurringPaymentRequest = PKRecurringPaymentRequest(paymentDescription: "Recurring", regularBilling: billing, managementURL: URL(string: "https://my-backend.example.com/customer-portal")!) request.recurringPaymentRequest?.billingAgreement = "You'll be billed $59.99 every month for the next 12 months. To cancel at any time, go to Account and click 'Cancel Membership.'" } request.paymentSummaryItems = [billing] request.currencyCode = "USD" } else { // On older iOS versions, set alternative summary items. request.paymentSummaryItems = [PKPaymentSummaryItem(label: "Monthly plan starting July 1, 2022", amount: NSDecimalNumber(string: "59.99"), type: .final)] } return request } ) var configuration = PaymentSheet.Configuration() configuration.applePay = .init(merchantId: "merchant.com.your_app_name", merchantCountryCode: "US", customHandlers: customHandlers) ``` ### Bestellverfolgung Um Informationen zur [Bestellverfolgung](https://developer.apple.com/design/human-interface-guidelines/technologies/wallet/designing-order-tracking) in iOS 16 oder höher hinzuzufügen, konfigurieren Sie einen [authorizationResultHandler](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/applepayconfiguration/handlers/authorizationresulthandler) in Ihren `PaymentSheet.ApplePayConfiguration.Handlers`. Stripe ruft Ihre Implementierung auf, nachdem die Zahlung durchgeführt wurde, aber bevor iOS das Apple Pay-Formular schließt. Rufen Sie in Ihrer Implementierung von `authorizationResultHandler` die Bestelldetails für die abgeschlossene Bestellung von Ihrem Server ab. Fügen Sie die Details dem bereitgestellten [PKPaymentAuthorizationResult](https://developer.apple.com/documentation/passkit/pkpaymentauthorizationresult) hinzu und geben Sie das geänderte Ergebnis zurück. Weitere Informationen zur Bestellverfolgung finden Sie in der [Dokumentation zu Wallet-Bestellungen von Apple](https://developer.apple.com/documentation/walletorders). #### iOS (Swift) ```swift let customHandlers = PaymentSheet.ApplePayConfiguration.Handlers( authorizationResultHandler: { result in do { // Fetch the order details from your service let myOrderDetails = try await MyAPIClient.shared.fetchOrderDetails(orderID: orderID) result.orderDetails = PKPaymentOrderDetails( orderTypeIdentifier: myOrderDetails.orderTypeIdentifier, // "com.myapp.order" orderIdentifier: myOrderDetails.orderIdentifier, // "ABC123-AAAA-1111" webServiceURL: myOrderDetails.webServiceURL, // "https://my-backend.example.com/apple-order-tracking-backend" authenticationToken: myOrderDetails.authenticationToken) // "abc123" // Return your modified PKPaymentAuthorizationResult return result } catch { return PKPaymentAuthorizationResult(status: .failure, errors: [error]) } } ) var configuration = PaymentSheet.Configuration() configuration.applePay = .init(merchantId: "merchant.com.your_app_name", merchantCountryCode: "US", customHandlers: customHandlers) ``` ## Scannen von Karten aktivieren Um die Unterstützung für das Scannen von Karten für iOS zu aktivieren, setzen Sie `NSCameraUsageDescription` (**Datenschutz – Beschreibung Kameranutzung**) in der `Info.plist` Ihrer Anwendung und geben einen Grund für den Zugriff auf die Kamera an (z. B. „Zum Scannen von Karten“). ## Optional: ACH-Zahlungen optimieren Fügen Sie `StripeFinancialConnections` als Abhängigkeit in Ihrer App hinzu, um ACH-Lastschriftzahlungen zu aktivieren. 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 **StripeFinancialConnections** 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 'StripeFinancialConnections' ``` 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 StripeFinancialConnections ``` #### 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/StripeFinancialConnections/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 **StripeFinancialConnections.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/StripeFinancialConnections/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). ## Optional: Formular anpassen Alle Anpassungen werden mithilfe des [PaymentSheet.Configuration](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html)-Objekts konfiguriert. ### Erscheinungsbild Customize colors, fonts, and so on to match the look and feel of your app by using the [appearance API](https://docs.stripe.com/elements/appearance-api/mobile.md?platform=ios). ### Layout der Zahlungsmethode Konfigurieren Sie das Layout der Zahlungsmethoden im Formular mit [paymentMethodLayout](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/configuration-swift.struct/paymentmethodlayout). Sie können sie horizontal oder vertikal anzeigen oder das Layout von Stripe automatisch optimieren lassen. ![](https://b.stripecdn.com/docs-statics-srv/assets/ios-mpe-payment-method-layouts.9d0513e2fcec5660378ba1824d952054.png) #### Swift ```swift var configuration = PaymentSheet.Configuration() configuration.paymentMethodLayout = .automatic ``` ### Adressen der Nutzer/innen erfassen Erfassen Sie lokale und internationale Versand- und Rechnungsadressen von Ihren Kundinnen und Kunden mithilfe des [Address Element](https://docs.stripe.com/elements/address-element.md?platform=ios). ### Anzeigename des Händlers Geben Sie einen kundenorientierten Unternehmensnamen an, indem Sie [merchantDisplayName](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:18StripePaymentSheet0bC0C13ConfigurationV19merchantDisplayNameSSvp) festlegen. Standardmäßig handelt es sich dabei um den Namen Ihrer App. #### Swift ```swift var configuration = PaymentSheet.Configuration() configuration.merchantDisplayName = "My app, Inc." ``` ### Dunkelmodus `PaymentSheet` passt sich automatisch an die systemweiten Erscheinungsbildeinstellungen des Nutzers/der Nutzerin an (heller und dunkler Modus). Wenn Ihre App den Dunkelmodus nicht unterstützt, können Sie den [Stil](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:18StripePaymentSheet0bC0C13ConfigurationV5styleAC18UserInterfaceStyleOvp) auf den Modus `alwaysLight` oder `alwaysDark` einstellen. ```swift var configuration = PaymentSheet.Configuration() configuration.style = .alwaysLight ``` ### Standardabrechnungsdetails Um Standardwerte für die im Zahlungsformular erfassten Rechnungsdetails festzulegen, konfigurieren Sie die Eigenschaft `defaultBillingDetails`. Die Felder von `PaymentSheet` werden vorab mit den von Ihnen angegebenen Werten ausgefüllt. ```swift var configuration = PaymentSheet.Configuration() configuration.defaultBillingDetails.address.country = "US" configuration.defaultBillingDetails.email = "foo@bar.com" ``` ### Erfassung der Rechnungsdetails Verwenden Sie `billingDetailsCollectionConfiguration`, um anzugeben, wie Sie Rechnungsdetails im Zahlungsformular erfassen möchten. Sie können den Namen, die E-Mail-Adresse, die Telefonnummer und die Adresse Ihrer Kundinnen und Kunden erfassen. Wenn Sie nur die für die Zahlungsmethode erforderlichen Rechnungsdetails angeben möchten, legen Sie `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` auf „true“ fest. In diesem Fall werden `PaymentSheet.Configuration.defaultBillingDetails` als [Abrechnungsdetails](https://docs.stripe.com/api/payment_methods/object.md?lang=node#payment_method_object-billing_details) der Zahlungsmethode festgelegt. Wenn Sie zusätzliche Rechnungsdetails erfassen möchten, die für die Zahlungsmethode nicht unbedingt erforderlich sind, legen Sie `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` auf „false“ fest. In diesem Fall werden die über das `PaymentSheet` erfassten Rechnungsdetails als Rechnungsdetails der Zahlungsmethode festgelegt. ```swift var configuration = PaymentSheet.Configuration() configuration.defaultBillingDetails.email = "foo@bar.com" configuration.billingDetailsCollectionConfiguration.name = .always configuration.billingDetailsCollectionConfiguration.email = .never configuration.billingDetailsCollectionConfiguration.address = .full configuration.billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod = true ``` > Wenden Sie sich an Ihren Rechtsbeistand bezüglich der Gesetze, die für das Erfassen von Informationen gelten. Erfassen Sie Telefonnummern nur, wenn Sie sie für die Transaktion benötigen. ## Optional: Abmeldung von Nutzer/innen verarbeiten `PaymentSheet` speichert einige Informationen lokal, um festzuhalten, ob Nutzer/innen Link innerhalb einer App verwendet haben. Um den internen Status von `PaymentSheet` zu löschen, rufen Sie die `PaymentSheet.resetCustomer()`-Methode auf, wenn sich Ihre Nutzer/innen abmelden. ```swift import UIKit import StripePaymentSheet class MyViewController: UIViewController { @objc func didTapLogoutButton() { PaymentSheet.resetCustomer() // Other logout logic required by your app } } ``` ## Optional: Vollständige Bezahlung in Ihrer Benutzeroberfläche Sie können das Zahlungsformular anzeigen, um nur die Details einer Zahlungsmethode zu erfassen, und später eine `confirm`-Methode aufrufen, um die Zahlung in der Nutzeroberfläche Ihrer App abzuschließen. Dies ist nützlich, wenn Sie eine nutzerspezifische Kaufschaltfläche haben oder zusätzliche Schritte erforderlich sind, nachdem Sie die Zahlungsdetails erfasst haben. ![](https://b.stripecdn.com/docs-statics-srv/assets/ios-multi-step.cd631ea4f1cd8cf3f39b6b9e1e92b6c5.png) Schließen Sie die Zahlung über die Nutzeroberfläche Ihrer App ab #### UIKit Die folgenden Schritte führen Sie durch den Abschluss der Zahlung in der Nutzeroberfläche Ihrer Nutzeroberfläche. Sehen Sie sich unsere Beispiel-Integration auf [GitHub](https://github.com/stripe/stripe-ios/blob/master/Example/PaymentSheet%20Example/PaymentSheet%20Example/ExampleCustomCheckoutViewController.swift) an. 1. Initialisieren Sie zunächst [PaymentSheet.FlowController](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller) anstelle von `PaymentSheet` und aktualisieren Sie Ihre Nutzeroberfläche mit der Eigenschaft `paymentOption`. Diese Eigenschaft enthält ein Bild und ein Label, die die ursprünglich ausgewählte Standardzahlungsmethode des/der Kund/in darstellen. ```swift PaymentSheet.FlowController.create(paymentIntentClientSecret: paymentIntentClientSecret, configuration: configuration) { [weak self] result in switch result { case .failure(let error): print(error) case .success(let paymentSheetFlowController): self?.paymentSheetFlowController = paymentSheetFlowController // Update your UI using paymentSheetFlowController.paymentOption } } ``` 1. Rufen Sie als Nächstes `presentPaymentOptions` auf, um die Zahlungsdetails zu erfassen. Wenn Sie fertig sind, aktualisieren Sie Ihre Nutzeroberfläche erneut mit der Eigenschaft `paymentOption`. ```swift paymentSheetFlowController.presentPaymentOptions(from: self) { // Update your UI using paymentSheetFlowController.paymentOption } ``` 1. Rufen Sie schließlich `confirm` auf. ```swift paymentSheetFlowController.confirm(from: self) { paymentResult in // MARK: Handle the payment result switch paymentResult { case .completed: print("Payment complete!") case .canceled: print("Canceled!") case .failed(let error): print(error) } } ``` #### SwiftUI Die folgenden Schritte führen Sie durch den Abschluss der Zahlung in der Nutzeroberfläche Ihrer Nutzeroberfläche. Sehen Sie sich unsere Beispielintegration auf [GitHub](https://github.com/stripe/stripe-ios/blob/master/Example/PaymentSheet%20Example/PaymentSheet%20Example/ExampleSwiftUICustomPaymentFlow.swift) an. 1. Initialisieren Sie zunächst [PaymentSheet.FlowController](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller) anstelle von `PaymentSheet`. Die Eigenschaft `paymentOption` enthält ein Bild und eine Beschriftung, die die aktuell ausgewählte Zahlungsmethode des/der Kund/in darstellen und die Sie in Ihrer Nutzeroberfläche verwenden können. ```swift PaymentSheet.FlowController.create(paymentIntentClientSecret: paymentIntentClientSecret, configuration: configuration) { [weak self] result in switch result { case .failure(let error): print(error) case .success(let paymentSheetFlowController): self?.paymentSheetFlowController = paymentSheetFlowController // Use the paymentSheetFlowController.paymentOption properties in your UI myPaymentMethodLabel = paymentSheetFlowController.paymentOption?.label ?? "Select a payment method" myPaymentMethodImage = paymentSheetFlowController.paymentOption?.image ?? UIImage(systemName: "square.and.pencil")! } } ``` 1. Verwenden Sie [PaymentSheet.FlowController.PaymentOptionsButton](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller/paymentoptionsbutton), um die Schaltfläche anzuordnen, die das Formular zum Erfassen der Zahlungsdetails vorlegt. Wenn `PaymentSheet.FlowController` das Argument `onSheetDismissed` aufruft, spiegelt die `paymentOption` für die `PaymentSheet.FlowController`-Instanz die aktuell ausgewählte Zahlungsmethode wider. ```swift PaymentSheet.FlowController.PaymentOptionsButton( paymentSheetFlowController: paymentSheetFlowController, onSheetDismissed: { myPaymentMethodLabel = paymentSheetFlowController.paymentOption?.label ?? "Select a payment method" myPaymentMethodImage = paymentSheetFlowController.paymentOption?.image ?? UIImage(systemName: "square.and.pencil")! }, content: { /* An example button */ HStack { Text(myPaymentMethodLabel) Image(uiImage: myPaymentMethodImage) } } ) ``` 1. Verwenden Sie [PaymentSheet.FlowController.PaymentOptionsButton](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller/paymentoptionsbutton), um die Schaltfläche zur Bestätigung der Zahlung anzuordnen. ```swift PaymentSheet.FlowController.ConfirmButton( paymentSheetFlowController: paymentSheetFlowController, onCompletion: { result in // MARK: Handle the payment result switch result { case .completed: print("Payment complete!") case .canceled: print("Canceled!") case .failed(let error): print(error) } }, content: { /* An example button */ Text("Pay") } ) ``` Wenn Sie `allowsDelayedPaymentMethods` auf true festlegen, werden Zahlungsmethoden mit [verzögerter Benachrichtigung](https://docs.stripe.com/payments/payment-methods.md#payment-notification) wie US-Bankkonten zugelassen. Für diese Zahlungsmethoden ist der endgültige Zahlungsstatus nicht bekannt, wenn das `PaymentSheet` abgeschlossen wird. Stattdessen ist sie erfolgreich oder schlägt fehl. Wenn Sie diese Art von Zahlungsmethoden unterstützen, informieren Sie den Kunden/die Kundin darüber, dass seine/ihre Bestellung bestätigt ist, und führen seine/ihre Bestellung erst aus (z. B. das Produkt versenden), wenn die Zahlung erfolgreich ist. ## Optional: Aktiveren der Funktion zur erneuten Erfassung der Prüfziffer/CVC bei Bestätigung Bei den Anweisungen zum erneuten Erfassen der Prüfziffer/CVC einer gespeicherten Karte während der Bestätigung des PaymentIntent wird davon ausgegangen, dass Ihre Integration Folgendes enthält: - Erstellen von PaymentIntents vor dem Erfassen von Zahlungsdetails ### Parameter der Intent-Erstellung aktualisieren Um die Prüfziffer/CVC bei der Zahlungsbestätigung erneut zu erfassen, fügen Sie bei der Erstellung des PaymentIntent `require_cvc_recollection` ein. #### Curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an Ephemeral Key for the Customer curl https://api.stripe.com/v1/ephemeral_keys \ -u <>: \ -H "Stripe-Version: 2026-02-25.clover" \ -H "Stripe-Account: 2026-02-25.clover" \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \-d "payment_method_options[card][require_cvc_recollection]"=true \ # In the latest version of the API, specifying the `automatic_payment_methods` parameter # is optional because Stripe enables its functionality by default. -d "automatic_payment_methods[enabled]"=true \ ``` # In-App-Integration für Android > This is a In-App-Integration für Android for when payment-ui is mobile and platform is android. View the full page at https://docs.stripe.com/payments/accept-a-payment?payment-ui=mobile&platform=android. ![](https://b.stripecdn.com/docs-statics-srv/assets/android-overview.471eaf89a760f5b6a757fd96b6bb9b60.png) Integrieren Sie die vorgefertigte Zahlungs-UI von Stripe in den Bezahlvorgang Ihrer Android-App mit der [PaymentSheet](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/index.html)-Klasse. ## Stripe einrichten [Serverseitig] [Clientseitig] Zunächst benötigen Sie ein Stripe-Konto. [Registrieren Sie sich jetzt](https://dashboard.stripe.com/register). ### Serverseitig Für diese Integration sind Endpoints auf Ihrem Server erforderlich, 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.0.2") // Include the financial connections SDK to support US bank account as a payment method implementation("com.stripe:financial-connections:23.0.2") } ``` > Details zur aktuellen SDK-Version und zu vorherigen Versionen finden Sie auf der Seite [Releases](https://github.com/stripe/stripe-android/releases) auf GitHub. Um bei Veröffentlichung eines neuen Release eine Benachrichtigung zu erhalten, [beobachten Sie Veröffentlichungen für das jeweilige Repository](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository). ## Zahlungsmethoden aktivieren Zeigen Sie Ihre [Einstellungen für Zahlungsmethoden](https://dashboard.stripe.com/settings/payment_methods) an und aktivieren Sie die Zahlungsmethoden, die Sie unterstützen möchten. Sie müssen mindestens eine Zahlungsmethode aktiviert haben, um einen *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods) zu erstellen. Standardmäßig aktiviert Stripe Karten und andere gängige Zahlungsmethoden, mit denen Sie mehr Kundinnen und Kunden erreichen können. Wir empfehlen jedoch, zusätzliche Zahlungsmethoden zu aktivieren, die für Ihr Unternehmen und Ihre Kundschaft relevant sind. Weitere Informationen zur Unterstützung von Produkten und Zahlungsmethoden finden Sie auf der Seite [Unterstützte Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) und der [Preisseite](https://stripe.com/pricing/local-payment-methods) für Gebühren. ## Endpoint hinzufügen [Serverseitig] > #### Hinweis > > Um das PaymentSheet vor dem Erstellen eines PaymentIntent anzuzeigen, finden Sie weitere Informationen unter [Erfassen von Zahlungsdetails vor dem Erstellen eines Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment). Wenn Ihre Connect-Plattform verwendet [kundenkonfigurierte Konten](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), benutze unser [Anleitung](https://docs.stripe.com/connect/use-accounts-as-customers.md) Ersetzen `Customer` und Ereignisreferenzen in Ihrem Code mit den entsprechenden Accounts v2 API-Referenzen. Diese Integration verwendet drei Stripe-API-Objekte: 1. [PaymentIntent](https://docs.stripe.com/api/payment_intents.md): Stripe verwendet diesen, um Ihre Absicht darzustellen, Zahlungen von Ihren Kundinnen/Kunden anzufordern, wobei Abbuchungsversuche und Zahlungsstatusänderungen im gesamten Vorgang dokumentiert werden. 1. (Optional) [Kunde/Kundin](https://docs.stripe.com/api/customers.md): Um eine Zahlungsmethode für zukünftige Zahlungen einzurichten, müssen Sie sie *einem Kunden/einer Kundin* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) zuordnen. Erstellen Sie ein Customer-Objekt, wenn Ihre Kundin/Ihr Kunde ein Konto bei Ihrem Unternehmen anlegt. Wenn eine Zahlung als Gast durchgeführt wird, können Sie vor der Zahlung ein Customer-Objekt erstellen und es zu einem späteren Zeitpunkt mit Ihrer eigenen internen Darstellung des Kundenkontos verknüpfen. 1. (Optional) [CustomerSession](https://docs.stripe.com/api/customer_sessions.md): Informationen im Kundenobjekt sind vertraulich und können nicht direkt über die App abgerufen werden. Eine CustomerSession gewährt dem SDK vorübergehenden, bereichsbezogenen Zugriff auf den Kunden/die Kundin und stellt zusätzliche Konfigurationsoptionen bereit. Hier finden Sie eine vollständige Liste der [Konfigurationsoptionen](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components). > Wenn Sie niemals Karten für eine/n Kund/in speichern und wiederkehrenden Kund/innen nicht erlauben, gespeicherte Karten wiederzuverwenden, können Sie das Customer-Objekt und das CustomerSession-Objekt aus Ihrer Integration weglassen. Aus Sicherheitsgründen kann Ihre App diese Objekte nicht erstellen. Fügen Sie stattdessen einen Endpoint auf Ihrem Server hinzu, der: 1. Ruft den Kunden/die Kundin ab oder erstellt einen neuen/eine neue. 1. Erstellt eine [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) für den Kunden/die Kundin. 1. Erstellt einen PaymentIntent mit dem [Betrag](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount), der [Währung](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency) und [dem Kunden/der Kundin](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer). 1. Gibt das *Client-Geheimnis* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) des PaymentIntent, das `client_secret` der CustomerSession, die [ID](https://docs.stripe.com/api/customers/object.md#customer_object-id) des Kundenobjekts und Ihren [veröffentlichbaren Schlüssel](https://dashboard.stripe.com/apikeys) an Ihre App zurück. Die Zahlungsmethoden, die Kund/innen während des Bezahlvorgangs angezeigt werden, sind ebenfalls in der PaymentIntent enthalten. Sie können Stripe Zahlungsmethoden aus Ihren Dashboard-Einstellungen abrufen lassen oder sie manuell auflisten. Gleich welche Option Sie wählen, die in der PaymentIntent übergebene Währung filtert die Zahlungsmethoden, die dem/r Kund/in angezeigt werden. Wenn Sie beispielsweise `eur` für den PaymentIntent übergeben und OXXO im Dashboard aktiviert ist, wird dem/r Kund/in OXXO nicht angezeigt, da OXXO `eur`-Zahlungen nicht unterstützt. Sofern Ihre Integration keine codebasierte Option zum Anbieten von Zahlungsmethoden erfordert, empfiehlt Stripe die automatisierte Option, da Stripe die Währung, Einschränkungen für Zahlungsmethoden und andere Parameter auswertet, um die Liste der unterstützten Zahlungsmethoden zu ermitteln. Zahlungsmethoden, die die Konversion steigern und die für die Währung und den Standort des/r Kund/in am relevantesten sind, erhalten Priorität. #### Zahlungsmethoden über das Dashboard verwalten Zahlungsmethoden können Sie über das [Dashboard](https://dashboard.stripe.com/settings/payment_methods) verwalten. Stripe handhabt die Rückgabe geeigneter Zahlungsmethoden basierend auf Faktoren wie Betrag, Währung und Zahlungsablauf der Transaktion. Der PaymentIntent wird mit den Zahlungsmethoden erstellt, die Sie im Dashboard konfiguriert haben. Wenn Sie das Dashboard nicht verwenden möchten oder wenn Sie Zahlungsmethoden manuell angeben möchten, können Sie sie mit dem Attribut `payment_method_types` auflisten. #### Curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ # In the latest version of the API, specifying the `automatic_payment_methods` parameter # is optional because Stripe enables its functionality by default. -d "automatic_payment_methods[enabled]"=true \ ``` #### Zahlungsmethoden manuell auflisten #### Curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "payment_method_types[]"="bancontact" \ -d "payment_method_types[]"="card" \ -d "payment_method_types[]"="ideal" \ -d "payment_method_types[]"="klarna" \ -d "payment_method_types[]"="sepa_debit" \ ``` > Jede Zahlungsmethode muss die im PaymentIntent übergebene Währung unterstützen, und Ihr Unternehmen muss in einem der Länder ansässig sein, die jede Zahlungsmethode unterstützt. Auf der Seite [Optionen für die Integration von Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/integration-options.md) finden Sie weitere Informationen zu den unterstützten Zahlungsmethoden. ## Zahlungsdaten erfassen [Clientseitig] Bevor das mobile Payment Element angezeigt wird, sollte Ihre Checkout-Seite: - Zeigen Sie die gekauften Produkte und den Gesamtbetrag an - Erfassen Sie erforderliche Versandinformationen mithilfe des [Address Element](https://docs.stripe.com/elements/address-element.md?platform=android). - Fügen Sie eine Checkout-Schaltfläche ein, um die Nutzeroberfläche von Stripe anzuzeigen #### Jetpack Compose [Initialisieren](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-builder/index.html) Sie eine `PaymentSheet`-Instanz innerhalb von `onCreate` Ihrer Checkout-Aktivität, wobei eine Methode zur Verarbeitung des Ergebnisses übergeben wird. ```kotlin import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import com.stripe.android.paymentsheet.PaymentSheet import com.stripe.android.paymentsheet.PaymentSheetResult @Composable fun App() { val paymentSheet = remember { PaymentSheet.Builder(::onPaymentSheetResult) }.build() } private fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) { // implemented in the next steps } ``` Rufen Sie als Nächstes das PaymentIntent-Client-Geheimnis, das Client-Geheimnis der Kunden-Sitzung, die Kundennummer und den veröffentlichbaren Schlüssel vom Endpoint ab, den Sie im vorigen Schritt erstellt haben. Legen Sie den veröffentlichbaren Schlüssel mithilfe von `PaymentConfiguration` fest und speichern Sie die anderen für den Zeitpunkt, an dem Sie das PaymentSheet präsentieren. ```kotlin import androidx.compose.runtime.Composable import androidx.compose.runtime.rememberimport androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.setValue import androidx.compose.ui.platform.LocalContext import com.stripe.android.PaymentConfiguration import com.stripe.android.paymentsheet.PaymentSheet import com.stripe.android.paymentsheet.PaymentSheetResult @Composable fun App() { val paymentSheet = remember { PaymentSheet.Builder(::onPaymentSheetResult) }.build()val context = LocalContext.current var customerConfig by remember { mutableStateOf(null) } varpaymentIntentClientSecret by remember { mutableStateOf(null) } LaunchedEffect(context) { // Make a request to your own server and retrieve payment configurations val networkResult = ... if (networkResult.isSuccess) {paymentIntentClientSecret = networkResult.paymentIntent customerConfig = PaymentSheet.CustomerConfiguration.createWithCustomerSession( id = networkResult.customer, clientSecret = networkResult.customerSessionClientSecret )PaymentConfiguration.init(context, networkResult.publishableKey)} } } private fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) { // implemented in the next steps } ``` Wenn der Kunde/die Kundin auf Ihre Checkout-Schaltfläche tippt, rufen Sie [presentWithPaymentIntent](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/index.html#1814490530%2FFunctions%2F2002900378) auf, um das Zahlungsformular anzuzeigen. Sobald die Zahlung kundenseitig abgeschlossen wurde, wird das Formular verworfen und [PaymentSheetResultCallback](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result-callback/index.html) mit einem [PaymentSheetResult](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result/index.html) aufgerufen. ```kotlin import androidx.compose.material.Button import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.platform.LocalContext import com.stripe.android.PaymentConfiguration import com.stripe.android.paymentsheet.PaymentSheet import com.stripe.android.paymentsheet.PaymentSheetResult @Composable fun App() { val paymentSheet = remember { PaymentSheet.Builder(::onPaymentSheetResult) }.build() val context = LocalContext.current var customerConfig by remember { mutableStateOf(null) } var paymentIntentClientSecret by remember { mutableStateOf(null) } LaunchedEffect(context) { // Make a request to your own server and retrieve payment configurations val networkResult = ... if (networkResult.isSuccess) { paymentIntentClientSecret = networkResult.paymentIntent customerConfig = PaymentSheet.CustomerConfiguration.createWithCustomerSession( id = networkResult.customer, clientSecret = networkResult.customerSessionClientSecret ) PaymentConfiguration.init(context, networkResult.publishableKey) } }Button( onClick = { val currentConfig = customerConfig val currentClientSecret =paymentIntentClientSecret if (currentConfig != null && currentClientSecret != null) { presentPaymentSheet(paymentSheet, currentConfig, currentClientSecret) } } ) { Text("Checkout") } }private fun presentPaymentSheet( paymentSheet: PaymentSheet, customerConfig: PaymentSheet.CustomerConfiguration,paymentIntentClientSecret: String ) { paymentSheet.presentWithPaymentIntent(paymentIntentClientSecret, PaymentSheet.Configuration.Builder(merchantDisplayName = "My merchant name") .customer(customerConfig) // Set `allowsDelayedPaymentMethods` to true if your business handles // delayed notification payment methods like US bank accounts. .allowsDelayedPaymentMethods(true) .build() ) } private fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) {when(paymentSheetResult) { is PaymentSheetResult.Canceled -> { print("Canceled") } is PaymentSheetResult.Failed -> { print("Error: ${paymentSheetResult.error}") } is PaymentSheetResult.Completed -> { // Display for example, an order confirmation screen print("Completed") } } } ``` #### Ansichten (klassisch) [Initialisieren](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/index.html#-394860221%2FConstructors%2F2002900378) Sie innerhalb von `onCreate` Ihrer Checkout-Aktivität eine `PaymentSheet`-Instanz und übergeben Sie eine Methode, um das Ergebnis zu bearbeiten. #### Kotlin ```kotlin import com.stripe.android.paymentsheet.PaymentSheet class CheckoutActivity : AppCompatActivity() { lateinit var paymentSheet: PaymentSheet override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) paymentSheet = PaymentSheet.Builder(::onPaymentSheetResult).build(this) } fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) { // implemented in the next steps } } ``` Rufen Sie als Nächstes das PaymentIntent-Client-Geheimnis, das Client-Geheimnis der Kunden-Sitzung, die Kundennummer und den veröffentlichbaren Schlüssel vom Endpoint ab, den Sie im vorigen Schritt erstellt haben. Legen Sie den veröffentlichbaren Schlüssel mithilfe von `PaymentConfiguration` fest und speichern Sie die anderen für den Zeitpunkt, an dem Sie das PaymentSheet präsentieren. #### Kotlin ```kotlin import com.stripe.android.paymentsheet.PaymentSheet class CheckoutActivity : AppCompatActivity() { lateinit var paymentSheet: PaymentSheetlateinit var customerConfig: PaymentSheet.CustomerConfiguration lateinit varpaymentIntentClientSecret: String override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) paymentSheet = PaymentSheet.Builder(::onPaymentSheetResult).build(this)lifecycleScope.launch { // Make a request to your own server and retrieve payment configurations val networkResult = MyBackend.getPaymentConfig() if (networkResult.isSuccess) {paymentIntentClientSecret = networkResult.paymentIntent customerConfig = PaymentSheet.CustomerConfiguration.createWithCustomerSession( id = networkResult.customer, clientSecret = networkResult.customerSessionClientSecret )PaymentConfiguration.init(context, networkResult.publishableKey)} } } fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) { // implemented in the next steps } } ``` Wenn der Kunde/die Kundin auf Ihre Checkout-Schaltfläche tippt, rufen Sie [presentWithPaymentIntent](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/index.html#1814490530%2FFunctions%2F2002900378) auf, um das Zahlungsformular anzuzeigen. Sobald die Zahlung kundenseitig abgeschlossen wurde, wird das Formular verworfen und [PaymentSheetResultCallback](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result-callback/index.html) mit einem [PaymentSheetResult](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result/index.html) aufgerufen. #### Kotlin ```kotlin // ... class CheckoutActivity : AppCompatActivity() { lateinit var paymentSheet: PaymentSheet lateinit var customerConfig: PaymentSheet.CustomerConfiguration lateinit var paymentIntentClientSecret: String // ...fun presentPaymentSheet() { paymentSheet.presentWithPaymentIntent(paymentIntentClientSecret, PaymentSheet.Configuration.Builder(merchantDisplayName = "My merchant name") .customer(customerConfig) // Set `allowsDelayedPaymentMethods` to true if your business handles // delayed notification payment methods like US bank accounts. .allowsDelayedPaymentMethods(true) .build() ) } fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) {when(paymentSheetResult) { is PaymentSheetResult.Canceled -> { print("Canceled") } is PaymentSheetResult.Failed -> { print("Error: ${paymentSheetResult.error}") } is PaymentSheetResult.Completed -> { // Display for example, an order confirmation screen print("Completed") } } } } ``` Wenn Sie `allowsDelayedPaymentMethods` auf true festlegen, werden Zahlungsmethoden mit [verzögerter Benachrichtigung](https://docs.stripe.com/payments/payment-methods.md#payment-notification) wie US-Bankkonten zugelassen. Für diese Zahlungsmethoden ist der endgültige Zahlungsstatus nicht bekannt, wenn das `PaymentSheet` abgeschlossen wird. Stattdessen ist sie erfolgreich oder schlägt fehl. Wenn Sie diese Art von Zahlungsmethoden unterstützen, informieren Sie den Kunden/die Kundin darüber, dass seine/ihre Bestellung bestätigt ist, und führen seine/ihre Bestellung erst aus (z. B. das Produkt versenden), wenn die Zahlung erfolgreich ist. ## Ereignisse nach Zahlung verarbeiten [Serverseitig] Stripe sendet ein [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie [Webhook-Tool im Dashboard](https://dashboard.stripe.com/webhooks) oder folgen Sie der [Webhook-Anleitung](https://docs.stripe.com/webhooks/quickstart.md), um diese Ereignisse zu empfangen und führen Sie Aktionen aus, wie beispielsweise das Senden einer Bestellbestätigung per E-Mail, das Protokollieren des Verkaufs in der Datenbank oder das Starten eines Versand-Workflows. Überwachen Sie diese Ereignisse, statt auf einen Callback vom Client zu warten. Auf dem Client könnten die Kund/innen das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist. Bösartige Clients könnten dann die Antwort manipulieren. Wenn Sie Ihre Integration so einrichten, dass sie asynchrone Ereignisse überwacht, können Sie [verschiedene Arten von Zahlungsmethoden](https://stripe.com/payments/payment-methods-guide) mit einer einzelnen Integration akzeptieren. Neben der Abwicklung des `payment_intent.succeeded`-Ereignisses empfehlen wir die Abwicklung von diesen weiteren Ereignissen, wenn Sie Zahlungen mit dem Payment Element erfassen: | Ereignis | Beschreibung | Aktion | | ------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded) | Wird gesendet, wenn Kundinnen und Kunden eine Zahlung erfolgreich abgeschlossen haben. | Senden Sie den Kund/innen eine Auftragsbestätigung und *wickeln* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) Sie die Bestellung ab. | | [payment_intent.processing](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.processing) | Wird gesendet, wenn eine/e Kund/in eine Zahlung erfolgreich veranlasst hat, die Zahlung aber noch nicht abgeschlossen ist. Dieses Ereignis wird am häufigsten gesendet, wenn der Kunde/die Kundin eine Bankabbuchung veranlasst. In Zukunft folgt darauf entweder ein `payment_intent.succeeded`- oder ein `payment_intent.payment_failed`-Ereignis. | Senden Sie eine Bestellbestätigung an die Kund/innen, in der angegeben ist, dass die Zahlung noch aussteht. Bei digitalen Waren können Sie die Bestellung abwickeln, bevor Sie darauf warten, dass die Zahlung erfolgt. | | [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Wird gesendet, wenn ein Kunde/eine Kundin einen Zahlungsversuch durchführt, die Zahlung jedoch fehlschlägt. | Wenn eine Zahlung von `processing` zu `payment_failed` übergeht, bieten Sie der Kundin/dem Kunden einen weiteren Zahlungsversuch an. | ## Integration testen #### Karten | Kartennummer | Szenario | So führen Sie den Test durch | | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | | 4242424242424242 | Die Kartenzahlung ist erfolgreich und es ist keine Authentifizierung erforderlich. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | 4000002500003155 | Für die Kartenzahlung ist eine *Authentifizierung* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase) erforderlich. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | 4000000000009995 | Die Karte wird mit einem Ablehnungscode wie `insufficient_funds` abgelehnt. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | 6205500000000000004 | Die UnionPay-Karte hat eine variable Länge von 13 bis 19 Ziffern. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | #### Bankumleitungen | Zahlungsmethode | Szenario | So führen Sie den Test durch | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Bancontact, iDEAL | Ihr/e Kund/in konnte sich auf der iDEAL-Weiterleitungsseite für eine auf Weiterleitung basierende Zahlungsmethode mit sofortiger Benachrichtigung nicht authentifizieren. | Wählen Sie eine beliebige, auf Weiterleitung basierende Zahlungsmethode aus, füllen Sie die erforderlichen Informationen aus und bestätigen Sie die Zahlung. Klicken Sie dann auf der Weiterleitungsseite auf **Testzahlung fehlgeschlagen**. | | Pay by Bank | Ihr Kunde/Ihre Kundin zahlt erfolgreich mit einer auf Weiterleitung basierenden Zahlungsmethode mit [verzögerter Benachrichtigung](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Wählen Sie die Zahlungsmethode aus, füllen Sie die erforderlichen Informationen aus und bestätigen Sie die Zahlung. Klicken Sie dann auf der Weiterleitungsseite auf **Testzahlung abschließen**. | | Pay by Bank | Ihr/e Kund/in konnte sich auf der iDEAL-Weiterleitungsseite für eine auf Weiterleitung basierende Zahlungsmethode mit verzögerter Benachrichtigung nicht authentifizieren. | Wählen Sie die Zahlungsmethode aus, füllen Sie die erforderlichen Informationen aus und bestätigen Sie die Zahlung. Klicken Sie dann auf der Weiterleitungsseite auf **Testzahlung fehlgeschlagen**. | | BLIK | BLIK-Zahlungen können aus verschiedenen Gründen fehlschlagen. Es gibt sofortige Fehler (der Code ist abgelaufen oder ungültig), verzögerte Fehler (die Bank lehnt ab) oder Zeitüberschreitungen (der/die Kund/in hat nicht rechtzeitig reagiert). | Verwenden Sie E-Mail-Muster, um [die verschiedenen Fehler zu simulieren](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures) | #### Banklastschriften | Zahlungsmethode | Szenario | So führen Sie den Test durch | | ---------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | SEPA-Lastschrift | Ihr/e Kund/in zahlt erfolgreich mit dem SEPA-Lastschriftverfahren. | Füllen Sie das Formular mit der Kontonummer `AT321904300235473204` aus. Die bestätigte PaymentIntent geht zunächst in den Status „wird verarbeitet“ und dann drei Minuten später in den Status „erfolgreich“ über. | | SEPA-Lastschrift | Der Status der PaymentIntent Ihres/Ihrer Kund/in wechselt von `processing` zu `requires_payment_method`. | Füllen Sie das Formular mit der Kontonummer `AT861904300235473202` aus. | Hier finden Sie weitere Informationen zum [Testen](https://docs.stripe.com/testing.md) Ihrer Integration. ## Optional: Link aktivieren Aktivieren Sie Link in Ihren [Einstellungen für Zahlungsmethoden](https://dashboard.stripe.com/settings/payment_methods), damit Ihre Kundinnen/Kunden ihre Zahlungsinformationen sicher speichern und wiederverwenden können. Diese müssen die Zahlung dann nur mit einem Klick auf die Express-Schaltfläche von Link abschließen. ### Übergeben Sie die E-Mail-Adresse Ihrer Kundinnen/Kunden an das Mobile Payment Element Link authentifiziert Kundinnen/Kunden über ihre E-Mail-Adresse. Stripe empfiehlt, möglichst viele Informationen vorab auszufüllen, um den Bezahlvorgang zu optimieren. Um den Namen, die E-Mail-Adresse und die Telefonnummer der Kundin/des Kunden vorab auszufüllen, geben Sie bei der Initialisierung von `PaymentSheet.Configuration` Ihre Kundeninformationen für `defaultBillingDetails` an. #### Kotlin ```kotlin val configuration = PaymentSheet.Configuration.Builder(merchantDisplayName = "Example, Inc.") .defaultBillingDetails( PaymentSheet.BillingDetails( name = "Jenny Rosen", email = "jenny.rosen@example.com", phone = "888-888-8888" ) ) .build() ``` ## Optional: Google Pay aktivieren ### Integration einrichten Um Google Pay zu verwenden, aktivieren Sie zuerst die Google Pay API, indem Sie dem Tag `` Ihrer Datei **AndroidManifest.xml** Folgendes hinzufügen: ```xml ... ``` Weitere Informationen finden Sie in der [Google Pay API](https://developers.google.com/pay/api/android/guides/setup) für Android. ### Google Pay hinzufügen Um Google Pay zu Ihrer Integration hinzuzufügen, übergeben Sie [PaymentSheet.GooglePayConfiguration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-google-pay-configuration/index.html) mit Ihrer Google Pay-Umgebung (Produktion oder Test) sowie den [Ländercode Ihres Unternehmens](https://dashboard.stripe.com/settings/account), wenn Sie [PaymentSheet.Configuration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html). #### Kotlin ```kotlin val googlePayConfiguration = PaymentSheet.GooglePayConfiguration( environment = PaymentSheet.GooglePayConfiguration.Environment.Test, countryCode = "US", currencyCode = "USD" // Required for Setup Intents, optional for Payment Intents ) val configuration = PaymentSheet.Configuration.Builder(merchantDisplayName = "My merchant name") .googlePay(googlePayConfiguration) .build() ``` ### Google Pay testen Google bietet Ihnen die Möglichkeit, Zahlungen über seine [Testkartensuite](https://developers.google.com/pay/api/android/guides/resources/test-card-suite) zu testen. Sie können Stripe-[Testkarten](https://docs.stripe.com/testing.md) mit der Testsuite verwenden. In einem Land, in dem Google Pay unterstützt wird, müssen Sie Google Pay mit einem physischen Android-Gerät anstelle eines simulierten Geräts testen. Melden Sie sich mit einer echten in Google Wallet gespeicherten Karte bei einem Google-Konto auf Ihrem Testgerät an. ## Optional: Scannen von Karten aktivieren Um den Support für das Scannen von Karten zu aktivieren, [fordern Sie Produktionszugriff](https://developers.google.com/pay/api/android/guides/test-and-deploy/request-prod-access) auf die Google Pay API über die [Google Pay & Wallet Console](https://pay.google.com/business/console?utm_source=devsite&utm_medium=devsite&utm_campaign=devsite) an. - Wenn Sie Google Pay aktiviert haben, ist die Funktion zum Scannen von Karten auf berechtigten Geräten automatisch auf unserer Nutzeroberfläche verfügbar. Weitere Informationen zu berechtigten Geräten finden Sie unter den [Einschränkungen der Google Pay API](https://developers.google.com/pay/payment-card-recognition/debit-credit-card-recognition) - **Wichtig:** Die Funktion zum Scannen von Karten wird nur in Builds angezeigt, die mit demselben in der [Google Pay & Wallet Console](https://pay.google.com/business/console) registrierten Signaturschlüssel signiert sind. Test- oder Fehlerbehebungs-Builds mit verschiedenen Signaturschlüsseln (z. B. Builds, die über Firebase App Tester verteilt werden) zeigen die Option **Karte scannen** an. Um Karten in Pre-Release-Builds zu testen, müssen Sie entweder: - oder Ihre Test-Builds mit Ihrem Produktions-Signaturschlüssel signieren - Fingerabdruck Ihres Test-Signaturschlüssels zur Google Pay and Wallet-Konsole hinzufügen ## Optional: ACH-Zahlungen optimieren Fügen Sie Financial Connections als Abhängigkeit in Ihrer App hinzu, um ACH-Lastschriftzahlungen zu aktivieren. Das [Stripe Android SDK](https://github.com/stripe/stripe-android) ist Open Source und [vollständig dokumentiert](https://stripe.dev/stripe-android/). Um das SDK zu installieren, fügen Sie `financial-connections` in den Block `dependencies` Ihrer [app/build.gradle](https://developer.android.com/studio/build/dependencies)-Datei ein: #### Kotlin ```kotlin plugins { id("com.android.application") } android { ... } dependencies { // ... // Financial Connections Android SDK implementation("com.stripe:financial-connections:23.0.2") } ``` > Details zur aktuellen SDK-Version und zu vorherigen Versionen finden Sie auf der Seite [Releases](https://github.com/stripe/stripe-android/releases) auf GitHub. Um bei Veröffentlichung eines neuen Release eine Benachrichtigung zu erhalten, [beobachten Sie Veröffentlichungen für das jeweilige Repository](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository). ## Optional: Formular anpassen Alle Anpassungen werden mithilfe des Objekts [PaymentSheet.Configuration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html) konfiguriert. ### Erscheinungsbild Customize colors, fonts, and more to match the look and feel of your app by using the [appearance API](https://docs.stripe.com/elements/appearance-api/mobile.md?platform=android). ### Layout der Zahlungsmethode Konfigurieren Sie das Layout der Zahlungsmethoden im Formular mit [paymentMethodLayout](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/-builder/index.html#2123253356%2FFunctions%2F2002900378). Sie können sie horizontal oder vertikal anzeigen oder das Layout von Stripe automatisch optimieren lassen. ![](https://b.stripecdn.com/docs-statics-srv/assets/android-mpe-payment-method-layouts.3bcfe828ceaad1a94e0572a22d91733f.png) #### Kotlin ```kotlin PaymentSheet.Configuration.Builder("Example, Inc.") .paymentMethodLayout(PaymentSheet.PaymentMethodLayout.Automatic) .build() ``` ### Adressen der Nutzer/innen erfassen Erfassen Sie lokale und internationale Versand- und Rechnungsadressen von Ihren Kundinnen und Kunden mithilfe des [Address Element](https://docs.stripe.com/elements/address-element.md?platform=android). ### Anzeigename des Unternehmens Geben Sie einen kundenorientierten Unternehmensnamen an, indem Sie [merchantDisplayName](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html#-191101533%2FProperties%2F2002900378) festlegen. Standardmäßig handelt es sich dabei um den Namen Ihrer App. #### Kotlin ```kotlin PaymentSheet.Configuration.Builder( merchantDisplayName = "My app, Inc." ).build() ``` ### Dunkelmodus Standardmäßig passt `PaymentSheet` sich automatisch an die systemweiten Erscheinungsbildeinstellungen des/der Nutzer/in an (heller und dunkler Modus). Dies können Sie ändern, indem Sie in Ihrer App den Hell- oder Dunkelmodus einrichten. #### Kotlin ```kotlin // force dark AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES) // force light AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO) ``` ### Standardabrechnungsdetails Um Standardwerte für die im Zahlungsformular erfassten Rechnungsdetails festzulegen, konfigurieren Sie die Eigenschaft `defaultBillingDetails`. Die Felder von `PaymentSheet` werden vorab mit den von Ihnen angegebenen Werten ausgefüllt. #### Kotlin ```kotlin val address = PaymentSheet.Address(country = "US") val billingDetails = PaymentSheet.BillingDetails( address = address, email = "foo@bar.com" ) val configuration = PaymentSheet.Configuration.Builder(merchantDisplayName = "Merchant, Inc.") .defaultBillingDetails(billingDetails) .build() ``` ### Erfassung von Abrechnungsdetails konfigurieren `BillingDetailsCollectionConfiguration` verwenden, um anzugeben, wie Sie Rechnungsdetails im PaymentSheet erfassen möchten. Sie können den Namen, die E-Mail-Adresse, die Telefonnummer und die Adresse Ihrer Kundinnen und Kunden erfassen. Wenn Sie dem PaymentMethod-Objekt Standard-Abrechnungsdetails zuordnen möchten, auch wenn diese Felder nicht auf der Nutzeroberfläche erfasst werden, legen Sie `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` auf `true` fest. #### Kotlin ```kotlin val billingDetails = PaymentSheet.BillingDetails( email = "foo@bar.com" ) val billingDetailsCollectionConfiguration = BillingDetailsCollectionConfiguration( attachDefaultsToPaymentMethod = true, name = BillingDetailsCollectionConfiguration.CollectionMode.Always, email = BillingDetailsCollectionConfiguration.CollectionMode.Never, address = BillingDetailsCollectionConfiguration.AddressCollectionMode.Full, ) val configuration = PaymentSheet.Configuration.Builder(merchantDisplayName = "Merchant, Inc.") .defaultBillingDetails(billingDetails) .billingDetailsCollectionConfiguration(billingDetailsCollectionConfiguration) .build() ``` > Wenden Sie sich an Ihren Rechtsbeistand bezüglich der Gesetze, die für das Erfassen von Informationen gelten. Erfassen Sie Telefonnummern nur, wenn Sie sie für die Transaktion benötigen. ## Optional: Abmeldung von Nutzer/innen verarbeiten `PaymentSheet` speichert einige Informationen lokal, um festzuhalten, ob Nutzer/innen Link innerhalb einer App verwendet haben. Um den internen Status von `PaymentSheet` zu löschen, rufen Sie die `PaymentSheet.resetCustomer()`-Methode auf, wenn sich Ihre Nutzer/innen abmelden. #### Kotlin ```kotlin class MyActivity: Activity { fun onLogoutButtonClicked() { PaymentSheet.resetCustomer(this) // Other logout logic required by your app } } ``` ## Optional: Vollständige Bezahlung in Ihrer Benutzeroberfläche Sie können das Zahlungsformular anzeigen, um nur die Details einer Zahlungsmethode zu erfassen, und die Zahlung in der Nutzeroberfläche Ihrer App abzuschließen. Dies ist nützlich, wenn Sie eine nutzerspezifische Kaufschaltfläche haben oder zusätzliche Schritte erfordern, nachdem die Zahlungsdetails erfasst wurden. ![](https://b.stripecdn.com/docs-statics-srv/assets/android-multi-step.84d8a0a44b1baa596bda491322b6d9fd.png) > Eine Muster-Integration ist [auf unserem GitHub verfügbar](https://github.com/stripe/stripe-android/blob/master/paymentsheet-example/src/main/java/com/stripe/android/paymentsheet/example/samples/ui/paymentsheet/custom_flow/CustomFlowActivity.kt). 1. Initialisieren Sie zunächst [PaymentSheet.FlowController](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/index.html) anstelle von `PaymentSheet` mit einer der [Builder](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/-builder/index.html)-Methoden. #### Android (Kotlin) ```kotlin class CheckoutActivity : AppCompatActivity() { private lateinit var flowController: PaymentSheet.FlowController override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val flowController = PaymentSheet.FlowController.Builder( resultCallback = ::onPaymentSheetResult, paymentOptionResultCallback = ::onPaymentOption, ).build(this) } } ``` 1. Rufen Sie als Nächstes `configureWithPaymentIntent` mit den Stripe-Objektschlüsseln auf, die Sie von Ihrem Backend abgerufen haben, und aktualisieren Ihre Nutzeroberfläche im Callback mithilfe von [getPaymentOption()](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/index.html#-2091462043%2FFunctions%2F2002900378). Diese enthält ein Bild und ein Label, das die aktuell vom Kunden/von der Kundin ausgewählte Zahlungsmethode darstellt. #### Android (Kotlin) ```kotlin flowController.configureWithPaymentIntent( paymentIntentClientSecret = paymentIntentClientSecret, configuration = PaymentSheet.Configuration.Builder("Example, Inc.") .customer(PaymentSheet.CustomerConfiguration( id = customerId, ephemeralKeySecret = ephemeralKeySecret )) .build() ) { isReady, error -> if (isReady) { // Update your UI using `flowController.getPaymentOption()` } else { // handle FlowController configuration failure } } ``` 1. Rufen Sie als Nächstes [presentPaymentOptions](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/index.html#449924733%2FFunctions%2F2002900378) auf, um die Zahlungsdetails zu erfassen. Wenn der Kunde/die Kundin fertig ist, beendet sich das Formular von selbst und ruft den zuvor in `create` übergebenen [paymentOptionCallback](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-option-callback/index.html) auf. Setzen Sie diese Methode ein, um Ihre Nutzeroberfläche mit der zurückgegebenen `paymentOption` zu aktualisieren. #### Android (Kotlin) ```kotlin // ... flowController.presentPaymentOptions() // ... private fun onPaymentOption(paymentOptionResult: PaymentOptionResult) { val paymentOption = paymentOptionResult.paymentOption if (paymentOption != null) { paymentMethodButton.text = paymentOption.label paymentMethodButton.setCompoundDrawablesRelativeWithIntrinsicBounds( paymentOption.drawableResourceId, 0, 0, 0 ) } else { paymentMethodButton.text = "Select" paymentMethodButton.setCompoundDrawablesRelativeWithIntrinsicBounds( null, null, null, null ) } } ``` 1. Rufen Sie schließlich [„bestätigen“](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/index.html#-479056656%2FFunctions%2F2002900378) auf, um die Zahlung abzuschließen. Wenn der Kunde/die Kundin den Vorgang abgeschlossen hat, beendet sich das Formular von selbst und ruft das zuvor in `create` übergebene [paymentResultCallback](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result-callback/index.html#237248767%2FFunctions%2F2002900378) auf. #### Android (Kotlin) ```kotlin // ... flowController.confirmPayment() // ... private fun onPaymentSheetResult( paymentSheetResult: PaymentSheetResult ) { when (paymentSheetResult) { is PaymentSheetResult.Canceled -> { // Payment canceled } is PaymentSheetResult.Failed -> { // Payment Failed. See logcat for details or inspect paymentSheetResult.error } is PaymentSheetResult.Completed -> { // Payment Complete } } } ``` Wenn Sie `allowsDelayedPaymentMethods` auf true festlegen, werden Zahlungsmethoden mit [verzögerter Benachrichtigung](https://docs.stripe.com/payments/payment-methods.md#payment-notification) wie US-Bankkonten zugelassen. Für diese Zahlungsmethoden ist der endgültige Zahlungsstatus nicht bekannt, wenn das `PaymentSheet` abgeschlossen wird. Stattdessen ist sie erfolgreich oder schlägt fehl. Wenn Sie diese Art von Zahlungsmethoden unterstützen, informieren Sie den Kunden/die Kundin darüber, dass seine/ihre Bestellung bestätigt ist, und führen seine/ihre Bestellung erst aus (z. B. das Produkt versenden), wenn die Zahlung erfolgreich ist. ## Optional: Aktiveren der Funktion zur erneuten Erfassung der Prüfziffer/CVC bei Bestätigung Bei den Anweisungen zum erneuten Erfassen der Prüfziffer/CVC einer gespeicherten Karte während der Bestätigung des PaymentIntent wird davon ausgegangen, dass Ihre Integration Folgendes enthält: - Erstellen von PaymentIntents vor dem Erfassen von Zahlungsdetails ### Parameter der Intent-Erstellung aktualisieren Um die Prüfziffer/CVC bei der Zahlungsbestätigung erneut zu erfassen, fügen Sie bei der Erstellung des PaymentIntent `require_cvc_recollection` ein. #### Curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an Ephemeral Key for the Customer curl https://api.stripe.com/v1/ephemeral_keys \ -u <>: \ -H "Stripe-Version: 2026-02-25.clover" \ -H "Stripe-Account: 2026-02-25.clover" \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \-d "payment_method_options[card][require_cvc_recollection]"=true \ # In the latest version of the API, specifying the `automatic_payment_methods` parameter # is optional because Stripe enables its functionality by default. -d "automatic_payment_methods[enabled]"=true \ ``` # In-App-Integration für React Native > This is a In-App-Integration für React Native for when payment-ui is mobile and platform is react-native. View the full page at https://docs.stripe.com/payments/accept-a-payment?payment-ui=mobile&platform=react-native. ![](https://b.stripecdn.com/docs-statics-srv/assets/ios-overview.9e0d68d009dc005f73a6f5df69e00458.png) Diese Integration vereint alle für die Zahlung erforderlichen Schritte, einschließlich der Erfassung der Zahlungsdaten und der Bestätigung der Zahlung, in einem einzigen Fenster, das über Ihrer App angezeigt wird. ## Stripe einrichten [Serverseitig] [Clientseitig] Zunächst benötigen Sie ein Stripe-Konto. [Registrieren Sie sich jetzt](https://dashboard.stripe.com/register). ### Serverseitig Für diese Integration sind Endpoints auf Ihrem Server erforderlich, 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 [React Native SDK](https://github.com/stripe/stripe-react-native) ist Open Source und vollständig dokumentiert. Intern werden [native iOS](https://github.com/stripe/stripe-ios) und [Android](https://github.com/stripe/stripe-android) SDKs verwendet. Um das React Native SDK von Stripe zu installieren, führen Sie einen der folgenden Befehle im Verzeichnis Ihres Projekts aus (je nachdem, welchen Paket-Manager Sie verwenden): #### yarn ```bash yarn add @stripe/stripe-react-native ``` #### npm ```bash npm install @stripe/stripe-react-native ``` Installieren Sie als Nächstes einige weitere erforderliche Abhängigkeiten: - Für iOS wechseln Sie in das Verzeichnis **ios** und führen Sie `pod install` aus, um sicherzustellen, dass Sie auch die erforderlichen nativen Dependencies installiert haben. - Für Android müssen keine Abhängigkeiten mehr installiert werden. > Wir empfehlen Ihnen, die [offizielle Anleitung zu TypeScript](https://reactnative.dev/docs/typescript#adding-typescript-to-an-existing-project) zu befolgen, um TypeScript zu unterstützen. ### Stripe Initialisierung Um Stripe in Ihrer React Native-App zu initialisieren, umschließen Sie entweder Ihren Zahlungsbildschirm mit der Komponente `StripeProvider` oder verwenden Sie die Initialisierungsmethode `initStripe`. Nur der [veröffentlichbare API-Schlüssel](https://docs.stripe.com/keys.md#obtain-api-keys) in `publishableKey` ist erforderlich. Das folgende Beispiel zeigt, wie Stripe mithilfe der Komponente `StripeProvider` initialisiert wird. ```jsx import { useState, useEffect } from 'react'; import { StripeProvider } from '@stripe/stripe-react-native'; function App() { const [publishableKey, setPublishableKey] = useState(''); const fetchPublishableKey = async () => { const key = await fetchKey(); // fetch key from your server here setPublishableKey(key); }; useEffect(() => { fetchPublishableKey(); }, []); return ( {/* Your app code here */} ); } ``` > Verwenden Sie Ihre API-[Testschlüssel](https://docs.stripe.com/keys.md#obtain-api-keys) beim Testen und Entwickeln Ihrer App und Ihre [Live-Modus](https://docs.stripe.com/keys.md#test-live-modes)-Schlüssel beim Veröffentlichen Ihrer App. ## Zahlungsmethoden aktivieren Zeigen Sie Ihre [Einstellungen für Zahlungsmethoden](https://dashboard.stripe.com/settings/payment_methods) an und aktivieren Sie die Zahlungsmethoden, die Sie unterstützen möchten. Sie müssen mindestens eine Zahlungsmethode aktiviert haben, um einen *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods) zu erstellen. Standardmäßig aktiviert Stripe Karten und andere gängige Zahlungsmethoden, mit denen Sie mehr Kundinnen und Kunden erreichen können. Wir empfehlen jedoch, zusätzliche Zahlungsmethoden zu aktivieren, die für Ihr Unternehmen und Ihre Kundschaft relevant sind. Weitere Informationen zur Unterstützung von Produkten und Zahlungsmethoden finden Sie auf der Seite [Unterstützte Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) und der [Preisseite](https://stripe.com/pricing/local-payment-methods) für Gebühren. ## Endpoint hinzufügen [Serverseitig] > #### Hinweis > > Um das PaymentSheet vor dem Erstellen eines PaymentIntent anzuzeigen, finden Sie weitere Informationen unter [Erfassen von Zahlungsdetails vor dem Erstellen eines Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment). Wenn Ihre Connect-Plattform verwendet [kundenkonfigurierte Konten](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), benutze unser [Anleitung](https://docs.stripe.com/connect/use-accounts-as-customers.md) Ersetzen `Customer` und Ereignisreferenzen in Ihrem Code mit den entsprechenden Accounts v2 API-Referenzen. Diese Integration verwendet drei Stripe-API-Objekte: 1. [PaymentIntent](https://docs.stripe.com/api/payment_intents.md): Stripe verwendet diesen, um Ihre Absicht darzustellen, Zahlungen von Ihren Kundinnen/Kunden anzufordern, wobei Abbuchungsversuche und Zahlungsstatusänderungen im gesamten Vorgang dokumentiert werden. 1. (Optional) [Kunde/Kundin](https://docs.stripe.com/api/customers.md): Um eine Zahlungsmethode für zukünftige Zahlungen einzurichten, müssen Sie sie *einem Kunden/einer Kundin* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) zuordnen. Erstellen Sie ein Customer-Objekt, wenn Ihre Kundin/Ihr Kunde ein Konto bei Ihrem Unternehmen anlegt. Wenn eine Zahlung als Gast durchgeführt wird, können Sie vor der Zahlung ein Customer-Objekt erstellen und es zu einem späteren Zeitpunkt mit Ihrer eigenen internen Darstellung des Kundenkontos verknüpfen. 1. (Optional) [CustomerSession](https://docs.stripe.com/api/customer_sessions.md): Informationen im Kundenobjekt sind vertraulich und können nicht direkt über die App abgerufen werden. Eine CustomerSession gewährt dem SDK vorübergehenden, bereichsbezogenen Zugriff auf den Kunden/die Kundin und stellt zusätzliche Konfigurationsoptionen bereit. Hier finden Sie eine vollständige Liste der [Konfigurationsoptionen](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components). > Wenn Sie niemals Karten für eine/n Kund/in speichern und wiederkehrenden Kund/innen nicht erlauben, gespeicherte Karten wiederzuverwenden, können Sie das Customer-Objekt und das CustomerSession-Objekt aus Ihrer Integration weglassen. Aus Sicherheitsgründen kann Ihre App diese Objekte nicht erstellen. Fügen Sie stattdessen einen Endpoint auf Ihrem Server hinzu, der: 1. Ruft den Kunden/die Kundin ab oder erstellt einen neuen/eine neue. 1. Erstellt eine [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) für den Kunden/die Kundin. 1. Erstellt einen PaymentIntent mit dem [Betrag](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount), der [Währung](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency) und [dem Kunden/der Kundin](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer). 1. Gibt das *Client-Geheimnis* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) des PaymentIntent, das `client_secret` der CustomerSession, die [ID](https://docs.stripe.com/api/customers/object.md#customer_object-id) des Kundenobjekts und Ihren [veröffentlichbaren Schlüssel](https://dashboard.stripe.com/apikeys) an Ihre App zurück. Die Zahlungsmethoden, die Kund/innen während des Bezahlvorgangs angezeigt werden, sind ebenfalls in der PaymentIntent enthalten. Sie können Stripe Zahlungsmethoden aus Ihren Dashboard-Einstellungen abrufen lassen oder sie manuell auflisten. Gleich welche Option Sie wählen, die in der PaymentIntent übergebene Währung filtert die Zahlungsmethoden, die dem/r Kund/in angezeigt werden. Wenn Sie beispielsweise `eur` für den PaymentIntent übergeben und OXXO im Dashboard aktiviert ist, wird dem/r Kund/in OXXO nicht angezeigt, da OXXO `eur`-Zahlungen nicht unterstützt. Sofern Ihre Integration keine codebasierte Option zum Anbieten von Zahlungsmethoden erfordert, empfiehlt Stripe die automatisierte Option, da Stripe die Währung, Einschränkungen für Zahlungsmethoden und andere Parameter auswertet, um die Liste der unterstützten Zahlungsmethoden zu ermitteln. Zahlungsmethoden, die die Konversion steigern und die für die Währung und den Standort des/r Kund/in am relevantesten sind, erhalten Priorität. #### Zahlungsmethoden über das Dashboard verwalten Zahlungsmethoden können Sie über das [Dashboard](https://dashboard.stripe.com/settings/payment_methods) verwalten. Stripe handhabt die Rückgabe geeigneter Zahlungsmethoden basierend auf Faktoren wie Betrag, Währung und Zahlungsablauf der Transaktion. Der PaymentIntent wird mit den Zahlungsmethoden erstellt, die Sie im Dashboard konfiguriert haben. Wenn Sie das Dashboard nicht verwenden möchten oder wenn Sie Zahlungsmethoden manuell angeben möchten, können Sie sie mit dem Attribut `payment_method_types` auflisten. #### Curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ # In the latest version of the API, specifying the `automatic_payment_methods` parameter # is optional because Stripe enables its functionality by default. -d "automatic_payment_methods[enabled]"=true \ ``` #### Zahlungsmethoden manuell auflisten #### Curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "payment_method_types[]"="bancontact" \ -d "payment_method_types[]"="card" \ -d "payment_method_types[]"="ideal" \ -d "payment_method_types[]"="klarna" \ -d "payment_method_types[]"="sepa_debit" \ ``` > Jede Zahlungsmethode muss die im PaymentIntent übergebene Währung unterstützen, und Ihr Unternehmen muss in einem der Länder ansässig sein, die jede Zahlungsmethode unterstützt. Auf der Seite [Optionen für die Integration von Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/integration-options.md) finden Sie weitere Informationen zu den unterstützten Zahlungsmethoden. ## Zahlungsdaten erfassen [Clientseitig] Bevor das mobile Payment Element angezeigt wird, sollte Ihr Checkout-Seite folgendes anzeigen: - Die gekauften Produkte und den Gesamtbetrag anzeigen - Alle benötigten Versanddaten erfassen - Fügen Sie eine Checkout-Schaltfläche ein, um die Nutzeroberfläche von Stripe anzuzeigen Erstellen Sie im Checkout Ihrer App eine Netzwerkanfrage an den im vorigen Schritt erstellten Backend-Endpoint und rufen Sie `initPaymentSheet` aus dem `useStripe`-Hook auf. ```javascript export default function CheckoutScreen() { const { initPaymentSheet, presentPaymentSheet } = useStripe(); const [loading, setLoading] = useState(false); const fetchPaymentSheetParams = async () => { const response = await fetch(`${API_URL}/payment-sheet`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, }); const { paymentIntent, ephemeralKey, customer } = await response.json(); return { paymentIntent, ephemeralKey, customer, }; }; const initializePaymentSheet = async () => { const { paymentIntent, ephemeralKey, customer, } = await fetchPaymentSheetParams(); const { error } = await initPaymentSheet({ merchantDisplayName: "Example, Inc.", customerId: customer, customerEphemeralKeySecret: ephemeralKey, paymentIntentClientSecret: paymentIntent, // Set `allowsDelayedPaymentMethods` to true if your business can handle payment //methods that complete payment after a delay, like SEPA Debit and Sofort. allowsDelayedPaymentMethods: true, defaultBillingDetails: { name: 'Jane Doe', } }); if (!error) { setLoading(true); } }; const openPaymentSheet = async () => { // see below }; useEffect(() => { initializePaymentSheet(); }, []); return (