# Zukünftige Kartenzahlungen einrichten Verwenden Sie eine manuelle serverseitige Bestätigung oder geben Sie die Zahlungsmethoden separat an. # Von Stripe gehostete Seite > This is a Von Stripe gehostete Seite for when platform is web and payment-ui is stripe-hosted. View the full page at https://docs.stripe.com/payments/save-and-reuse-cards-only?platform=web&payment-ui=stripe-hosted. > Wir empfehlen Ihnen, den Leitfaden [Zukünftige Zahlungen einrichten](https://docs.stripe.com/payments/checkout/save-and-reuse.md) zu befolgen. Verwenden Sie diesen Leitfaden nur, wenn Sie eine manuelle serverseitige Bestätigung verwenden müssen oder Ihre Integration die separate Angabe von Zahlungsmethoden erfordert. Wenn Sie Elements bereits integriert haben, lesen Sie den [Migrationsleitfaden für Payment Element](https://docs.stripe.com/payments/payment-element/migration.md). Verwenden Sie den Einrichtungsmodus von Checkout, um Zahlungsdaten von Kundinnen/Kunden zu erfassen, die Sie später wiederverwenden können. Der Einrichtungsmodus verwendet die [Setup Intents API](https://docs.stripe.com/api/setup_intents.md), um [Zahlungsmethoden](https://docs.stripe.com/api/payment_methods.md) zu erstellen. Sehen Sie sich unser [vollständiges Arbeitsbeispiel auf GitHub](https://github.com/stripe-samples/checkout-remember-me-with-twilio-verify) an. ## Stripe einrichten [Serverseitig] Als Erstes benötigen Sie ein Stripe-Konto. [Registrieren Sie sich jetzt](https://dashboard.stripe.com/register). 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 [Clientseitig] [Serverseitig] Fügen Sie Ihrer Website eine Checkout-Schaltfläche hinzu, die zum Erstellen einer Checkout-Sitzung einen serverseitigen Endpoint aufruft. ```html Checkout
``` Um eine Sitzung im Einrichtungsmodus zu erstellen, verwenden Sie beim Erstellen der Sitzung den Parameter `Modus` mit dem Wert `Einrichtung`. Optional können Sie den Parameter [Kunde/Kundin](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) angeben, um die erstellte Zahlung automatisch einer bestehenden Kundin/einem bestehenden Kunden zuzuordnen. Checkout verwendet standardmäßig [dynamische Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md), sodass Sie den Parameter [Währungen](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-currency) übergeben müssen, wenn Sie den `Einrichtungsmodus` verwenden. Hängen Sie die Vorlagenvariable `{CHECKOUT_SESSION_ID}` an die `success_url` an, um Zugriff auf die Sitzungs-ID zu erhalten, sobald Ihre Kundin/Ihr Kunde eine Checkout-Sitzung erfolgreich abgeschlossen hat. Leiten Sie Ihren Kunden/Ihre Kundin nach Erstellen der Checkout-Sitzung an die in der Antwort zurückgegebene [URL](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-url) weiter. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d mode=setup \ -d currency=usd \ -d "customer={{CUSTOMER_ID}}" \ --data-urlencode "success_url=https://example.com/success?session_id={CHECKOUT_SESSION_ID}" ``` ### 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. ## Checkout-Sitzung abrufen [Serverseitig] Nachdem eine Kundin/ein Kunde die Checkout-Sitzung erfolgreich durchlaufen hat, müssen Sie das Session-Objekt abrufen. Es gibt dafür zwei Möglichkeiten: - **Asynchron**: Verarbeiten Sie `checkout.session.completed`*Webhooks* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests), die ein Session-Objekt enthalten. Hier erfahren Sie mehr über das [Einrichten von Webhooks](https://docs.stripe.com/webhooks.md) - **Synchron**: Rufen Sie die Sitzungs-ID von der `success_url`, wenn ein/e Nutzer/in auf Ihre Seite zurückgeleitet wird. Verwenden Sie die Sitzungs-ID, um das Sitzungsobjekt [abzurufen](https://docs.stripe.com/api/checkout/sessions/retrieve.md). ```curl curl https://api.stripe.com/v1/checkout/sessions/cs_test_MlZAaTXUMHjWZ7DcXjusJnDU4MxPalbtL5eYrmS2GKxqscDtpJq8QM0k \ -u "<>:" ``` Die Wahl hängt von Ihrer Toleranz gegenüber Kaufabbrüchen ab, da Kundinnen/Kunden in manchen Fällen nach erfolgreicher Zahlung nicht zur `success_url` weitergeleitet werden. Das passiert zum Beispiel, wenn sie die Registerkarte im Browser schließen, bevor die Weiterleitung erfolgt ist. Die Verarbeitung von Webhooks verhindert diese Form von Kaufabbrüchen in Ihrer Integration. Nachdem Sie das Session-Objekt abgerufen haben, erfassen Sie den Wert des Schlüssels `setup_intent`. Dabei handelt es sich um die ID des während der Checkout-Sitzung erstellten SetupIntent. Ein [SetupIntent](https://docs.stripe.com/payments/setup-intents.md) ist ein Objekt, mit dem die Bankkontoinformationen von Kundinnen und Kunden für zukünftige Zahlungen eingerichtet werden. Beispiel-Nutzlast von `checkout.session.completed`: ```json { "id": "evt_1Ep24XHssDVaQm2PpwS19Yt0", "object": "event", "api_version": "2019-03-14", "created": 1561420781, "data": { "object": { "id": "cs_test_MlZAaTXUMHjWZ7DcXjusJnDU4MxPalbtL5eYrmS2GKxqscDtpJq8QM0k", "object": "checkout.session", "billing_address_collection": null, "client_reference_id": null, "customer": "", "customer_email": null, "display_items": [], "mode": "setup","setup_intent": "seti_1EzVO3HssDVaQm2PJjXHmLlM", "submit_type": null, "subscription": null, "success_url": "https://example.com/success" } }, "livemode": false, "pending_webhooks": 1, "request": { "id": null, "idempotency_key": null }, "type": "checkout.session.completed" } ``` Beachten Sie die `setup_intent`-ID für den nächsten Schritt. ## SetupIntent abrufen [Serverseitig] Verwenden Sie die `setup_intent`-ID, um das SetupIntent-Objekt [abzurufen](https://docs.stripe.com/api/setup_intents/retrieve.md). Das zurückgegebene Objekt enthält eine `payment_method`-ID, die Sie im nächsten Schritt einem Kunden/einer Kundin zuordnen können. ```curl curl https://api.stripe.com/v1/setup_intents/seti_1EzVO3HssDVaQm2PJjXHmLlM \ -u "<>:" ``` > Wenn Sie diese Informationen synchron über die Stripe-API anfordern (anstatt Webhooks zu verarbeiten), können Sie den vorherigen Schritt mit diesem Schritt kombinieren, indem Sie das SetupIntent-Objekt in der Anfrage an den Endpoint /v1/checkout/session [erweitern](https://docs.stripe.com/api/expanding_objects.md). So müssen Sie nicht zwei Netzwerkanforderungen stellen, um auf die neu erstellte PaymentMethod-ID zugreifen zu können. ## Die Zahlungsmethode später belasten [Serverseitig] Wenn Sie die Checkout-Sitzung nicht mit einem bestehenden Kunden/einer bestehenden Kundin erstellt haben, verwenden Sie die ID der PaymentMethod, um die *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) an *einen Kunden/eine Kundin* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) [anzuhängen](https://docs.stripe.com/api/payment_methods/attach.md). Nachdem Sie die PaymentMethod einem Kunden/einer Kundin zugeordnet haben, können Sie eine *Off-Session* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information)-Zahlung mit einem [PaymentIntent](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method) vornehmen: - Setzen Sie [customer](https://docs.stripe.com/api.md#create_payment_intent-customer) auf die ID der Kundin/des Kunden und [payment_method](https://docs.stripe.com/api.md#create_payment_intent-payment_method) auf die ID der PaymentMethod. - Legen Sie [off_session](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-off_session) auf `true` fest, um anzugeben, dass sich die Kundin/der Kunde während eines Zahlungsversuchs nicht in Ihrem Bezahlvorgang befindet und somit eine Authentifizierungsanfrage eines Partners, wie z. B. eines Kartenausstellers, einer Bank oder eines anderen Zahlungsinstituts, nicht erfüllen kann. Wenn ein Partner während Ihres Bezahlvorgangs eine Authentifizierung anfordert, fordert Stripe Ausnahmen unter Verwendung von Kundeninformationen aus einer vorherigen *On-Session* (A payment is described as on-session if it occurs while the customer is actively in your checkout flow and able to authenticate the payment method)-Transaktion an. Wenn die Bedingungen für eine Ausnahme nicht erfüllt sind, gibt der PaymentIntent möglicherweise einen Fehler aus. - Legen Sie den Wert der Eigenschaft [„confirm“](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-confirm) des PaymentIntent auf `true` fest. Dadurch erfolgt die Bestätigung sofort, wenn Sie den PaymentIntent erstellen. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "customer={{CUSTOMER_ID}}" \ -d "payment_method={{PAYMENTMETHOD_ID}}" \ -d off_session=true \ -d confirm=true ``` Schlägt ein Zahlungsversuch fehl, schlägt die Anfrage ebenfalls mit einem HTTP-Statuscode 402 fehl, und der Status des PaymentIntent lautet *requires\_payment\_method* (This status appears as "requires_source" in API versions before 2019-02-11). Fordern Sie Ihre Kundinnen/Kunden auf, zu Ihrer Anwendung zurückzukehren (z. B. per E-Mail oder In-App-Benachrichtigung) und leiten Sie sie zu einer neuen Checkout-Sitzung weiter, um eine andere Zahlungsmethode auszuwählen. ```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]=1099" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ --data-urlencode "success_url=https://example.com/success?session_id={CHECKOUT_SESSION_ID}" ``` # Erweiterte Integration > This is a Erweiterte Integration for when platform is web and payment-ui is direct-api. View the full page at https://docs.stripe.com/payments/save-and-reuse-cards-only?platform=web&payment-ui=direct-api. > Wir empfehlen Ihnen, den Leitfaden [Zukünftige Zahlungen einrichten](https://docs.stripe.com/payments/save-and-reuse.md) zu befolgen. Verwenden Sie diesen Leitfaden nur, wenn Sie eine manuelle serverseitige Bestätigung verwenden müssen oder Ihre Integration die separate Angabe von Zahlungsmethoden erfordert. Wenn Sie Elements bereits integriert haben, lesen Sie den [Migrationsleitfaden für Payment Element](https://docs.stripe.com/payments/payment-element/migration.md). Mit der [Setup Intents API](https://docs.stripe.com/api/setup_intents.md) können Sie die Karte eines Kunden/einer Kundin ohne vorherige Zahlung speichern. Das ist hilfreich, wenn Sie das Onboarding von Kundinnen/Kunden jetzt durchführen, Zahlungen für sie einrichten, diese aber erst später durchführen möchten (wenn die Kundinnen/Kunden offline sind). Verwenden Sie diese Integration, um wiederkehrende Zahlungen einzurichten oder einmalige Zahlungen zu erstellen, bei denen der endgültige Betrag später festgelegt wird (häufig erst nach Erhalt Ihrer Dienstleistung). ## Stripe einrichten [Serverseitig] Verwenden Sie unsere offiziellen Bibliotheken für den Zugriff auf die Stripe-API über Ihre Anwendung: #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ## Kund/innen vor Einrichtung erstellen [Serverseitig] Um eine Zahlungsmethode für zukünftige Zahlungen einzurichten, müssen Sie sie einem Objekt zuordnen, das Ihre Kundin/Ihre Kundin darstellt. Wenn Ihre Kundin/Kundin ein Konto erstellt oder die erste Transaktion mit Ihrem Unternehmen durchgeführt hat, erstellen Sie entweder ein kundenseitig konfiguriertes [Account](https://docs.stripe.com/api/v2/core/accounts/create.md)-Objekt mit der Accounts v2 API oder ein [Customer](https://docs.stripe.com/api/customers/create.md)-Objekt mit der Customers API. #### Accounts v2 ```curl curl -X POST https://api.stripe.com/v2/core/accounts \ -H "Authorization: Bearer <>" \ -H "Stripe-Version: 2026-05-27.preview" \ --json '{ "contact_email": "jenny.rosen@example.com", "display_name": "Jenny Rosen", "configuration": { "customer": {} }, "include": [ "configuration.customer" ] }' ``` Bei erfolgreicher Erstellung wird das kundenkonfigurierte [Account](https://docs.stripe.com/api/v2/core/accounts/object.md#v2_account_object-configuration-customer)-Objekt zurückgegeben. Sie können das Objekt bezüglich der Kunden-`id` überprüfen und den Wert zum späteren Abruf in Ihrer Datenbank speichern. #### Customers v1 ```curl curl https://api.stripe.com/v1/customers \ -u "<>:" \ -d "name=Jenny Rosen" \ --data-urlencode "email=jennyrosen@example.com" ``` Bei erfolgreicher Erstellung wird das [Customer](https://docs.stripe.com/api/customers/object.md)-Objekt zurückgegeben. Sie können das Objekt bezüglich der Kunden-`id` überprüfen und den Wert zum späteren Abruf in Ihrer Datenbank speichern. Sie finden diese Kundinnen/Kunden auf der Seite [Kundinnen/Kunden](https://dashboard.stripe.com/customers) im Dashboard. ## SetupIntent erstellen [Serverseitig] Ein [SetupIntent](https://docs.stripe.com/api/setup_intents.md) ist ein Objekt, mit dem Sie die Karte einer Kundin/eines Kunden für zukünftige Zahlungen einrichten können. Das `SetupIntent`-Objekt enthält ein [Client-Geheimnis](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-client_secret), also einen eindeutigen Schlüssel, den Sie auf der Client-Seite an Stripe.js übergeben müssen, um Kartenangaben zu erfassen. Mit dem Client-Geheimnis können Sie bestimmte Aktionen auf dem Client durchführen (z. B. die Einrichtung bestätigen und Details zur Zahlungsmethode ändern) und dabei gleichzeitig sensible Informationen wie `customer` verbergen. Außerdem können Sie mit dem Client-Geheimnis Kartenangaben bei den Kreditkartennetzwerken validieren und authentifizieren. Das Client-Geheimnis ist vertraulich – protokollieren Sie es nicht, betten Sie es nicht in URLs ein und geben Sie es nicht an andere Personen als die Kundin/den Kunden weiter. Wenn Ihre Anwendung serverseitiges Rendering nutzt, können Sie das Vorlagen-Framework zur Einbettung des Client-Geheimnisses in die Seite mithilfe eines [Datenattributs](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) oder verborgenen HTML-Elements nutzen. #### curl ```bash curl https://api.stripe.com/v1/setup_intents \ -u <>: \ -d "customer"="{{CUSTOMER_ID}}" ``` Wenn Sie die Karte nur dann für zukünftige Zahlungen verwenden möchten, wenn Ihre Kundin/Ihr Kunde beim Bezahlen anwesend ist, setzen Sie den Parameter [usage](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-usage) auf *on\_session* (A payment is described as on-session if it occurs while the customer is actively in your checkout flow and able to authenticate the payment method). So können Sie die Autorisierungsraten optimieren. ## Kartenangaben erfassen [Clientseitig] Die *Setup Intents API* (The Setup Intents API lets you build dynamic flows for collecting payment method details for future payments. It tracks the lifecycle of a payment setup flow and can trigger additional authentication steps if required by law or by the payment method) ist vollständig in [Stripe.js](https://docs.stripe.com/payments/elements.md) integriert, sodass Sie die Bibliothek der Elements-Nutzeroberfläche verwenden können, um Kartenangaben auf Clientseite sicher zu erfassen. > Wenn Sie Kartenangaben für zukünftige *Off-Session-Zahlungen* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information) speichern möchten – insbesondere in Europa aufgrund von Vorschriften zur Wiederverwendung von Karten – müssen Sie sich vorher bei den Kundinnen und Kunden [die Erlaubnis zum Speichern einer Karte einholen](https://docs.stripe.com/strong-customer-authentication.md#sca-enforcement). Fügen Sie einen Hinweis im Bezahlvorgang ein, in dem Sie die Nutzerinnen und Nutzer darüber informieren, wie die Kartendaten verwendet werden. #### HTML + JS Um Elements zu nutzen, fügen Sie der Zahlungsseite das nachfolgende Skript hinzu. Laden Sie Stripe.js aus Gründen der PCI-Compliance immer direkt von js.stripe.com herunter. Fügen Sie das Skript nicht in ein Bundle ein und hosten Sie selbst keine Kopie davon. ```html ``` Um den [hochentwickelten Betrugsschutz](https://docs.stripe.com/radar.md) von Stripe bestmöglich zu nutzen, binden Sie dieses Skript auf jeder Seite Ihrer Website ein, nicht nur auf der Zahlungsseite. Damit [ermöglichen Sie Stripe die Erkennung verdächtiger Aktivitäten](https://docs.stripe.com/disputes/prevention/advanced-fraud-detection.md), die auf einen Betrug hinweisen könnten. ### Elements zu Ihrer Seite hinzufügen Erstellen Sie anschließend eine Instanz des [Stripe-Objekts](https://docs.stripe.com/js.md#stripe-function) und geben Sie dabei Ihren veröffentlichbaren [API-Schlüssel](https://docs.stripe.com/keys.md) als ersten Parameter an. Erstellen Sie dann eine Instanz des [Elements-Objekts](https://docs.stripe.com/js.md#stripe-elements) und verbinden Sie damit ein `card`-Element im DOM. Das `Card`-Element vereinfacht das Zahlungsformular und minimiert die Anzahl erforderlicher Felder, indem es ein einzelnes, flexibles Eingabefeld bereitstellt, das alle notwendigen Kartendaten sicher erfasst. Alternativ können Sie die `cardNumber`-, `cardExpiry`- und `cardCvc`-Elemente kombinieren, um ein flexibles Kartenformular mit mehreren Eingabefeldern zu erstellen. [Beispiele für Zahlungsformulare](https://stripe.com/payments/elements/examples), die mit Elements erstellt wurden, finden Sie auf GitHub. > Erfassen Sie immer eine Postleitzahl, um die Kartenakzeptanzquote zu steigern und Betrug vorzubeugen. > > Das [einzeilige Card Element](https://docs.stripe.com/js/element/other_element?type=card) erfasst und sendet die Postleitzahl der Kundin/des Kunden an Stripe. Wenn Sie Ihr Zahlungsformular mit geteilten Elements erstellen ([Kartennummer](https://docs.stripe.com/js/element/other_element?type=cardNumber), [Ablaufdatum](https://docs.stripe.com/js/element/other_element?type=cardExpiry), [Prüfziffer](https://docs.stripe.com/js/element/other_element?type=cardCvc)) fügen Sie ein separates Eingabefeld für die Postleitzahl der Kundin/des Kunden hinzu. ```javascript const stripe = Stripe('<>'); const elements = stripe.elements(); const cardElement = elements.create('card'); cardElement.mount('#card-element'); ``` Ein Stripe Element enthält ein iframe, dass die Zahlungsdaten über eine HTTPS-Verbindung sicher an Stripe sendet. Die Adresse der Bezahlseite muss ebenfalls mit https:// beginnen, nicht mit http://, damit Ihre Integration funktioniert. Sie können Ihre Integration ohne HTTPS testen. Dann müssen Sie das Protokoll aber [aktivieren](https://docs.stripe.com/security/guide.md#tls), bevor Sie Ihre ersten Live-Zahlungen empfangen. ### SetupIntent bestätigen Rufen Sie das Client-Geheimnis aus dem im vorherigen Schritt erstellten SetupIntent ab und nutzen Sie dann [stripe.confirmCardPayment](https://docs.stripe.com/js/setup_intents/confirm_card_setup) und das Kartenelement, um die Einrichtung abzuschließen. Verläuft dies erfolgreich, lautet der zurückgegebene Wert der Eigenschaft `status` des SetupIntent `succeeded`. ```javascript const cardholderName = document.getElementById('cardholder-name'); const setupForm = document.getElementById('setup-form'); const clientSecret = setupForm.dataset.secret; setupForm.addEventListener('submit', async (ev) => { ev.preventDefault(); const {setupIntent, error} = await stripe.confirmCardSetup( clientSecret, { payment_method: { card: cardElement, billing_details: { name: cardholderName.value, }, }, } ); if (error) { // Display error.message in your UI. } else { if (setupIntent.status === 'succeeded') { // The setup has succeeded. Display a success message. Send // setupIntent.payment_method to your server to save the card to a Customer } } }); ``` #### React #### npm Installieren Sie [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) und den [Stripe.js-Loader](https://www.npmjs.com/package/@stripe/stripe-js) aus dem öffentlichen npm-Register. ```bash npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` #### umd Wir stellen auch einen UMD-Build für Websites zur Verfügung, die weder npm noch Module verwenden. Binden Sie das Skript Stripe.js ein, das eine globale `Stripe`-Funktion exportiert, und den UMD-Build von React Stripe.js, der ein globales `ReactStripe`-Objekt exportiert. Laden Sie das Skript Stripe.js immer direkt von **js.stripe.com**, um PCI-konform zu bleiben. Fügen Sie das Skript nicht in ein Bundle ein, oder hosten Sie nicht selbst eine Kopie davon. ```html ``` > Mit der [Demo in CodeSandbox](https://codesandbox.io/s/react-stripe-official-q1loc?fontsize=14&hidenavigation=1&theme=dark) können Sie React Stripe.js ausprobieren, ohne ein neues Projekt erstellen zu müssen. ### Stripe.js und Elements zu Ihrer Seite hinzufügen Um Element-Komponenten zu verwenden, schließen Sie die Komponente Ihrer Bezahlseite in einen [Elements-Anbieter](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider) ein. Rufen Sie `loadStripe` mit Ihrem veröffentlichbaren Schlüssel auf und übergeben Sie das zurückgegebene `Promise` an den `Elements`-Anbieter. ```jsx import React from 'react'; import ReactDOM from 'react-dom'; import {Elements} from '@stripe/react-stripe-js'; import {loadStripe} from '@stripe/stripe-js'; import CardSetupForm from './CardSetupForm'; // Make sure to call `loadStripe` outside of a component's render to avoid // recreating the `Stripe` object on every render. const stripePromise = loadStripe('<>'); function App() { return ( ); }; ReactDOM.render(, document.getElementById('root')); ``` ### CardElement-Komponente hinzufügen und konfigurieren Verwenden Sie einzelne Element-Komponenten, z. B. `CardElement`, um Ihr Formular zu erstellen. #### JSX ```jsx /** * Use the CSS tab above to style your Element's container. */ import React from 'react'; import {CardElement} from '@stripe/react-stripe-js'; import './Styles.css' const CARD_ELEMENT_OPTIONS = { style: { base: { color: "#32325d", fontFamily: '"Helvetica Neue", Helvetica, sans-serif', fontSmoothing: "antialiased", fontSize: "16px", "::placeholder": { color: "#aab7c4", }, }, invalid: { color: "#fa755a", iconColor: "#fa755a", }, }, }; function CardSection() { return ( ); }; export default CardSection; ``` Elements sind vollständig anpassbar. Sie können [Elements so konfigurieren](https://docs.stripe.com/js/elements_object/create_element?type=card#elements_create-options), dass sie zum Erscheinungsbild Ihrer Website passen und den Bezahlvorgang für Ihre Kundinnen/Kunden weiter optimieren. Außerdem lassen sich verschiedene Eingabestatus konfigurieren, sodass z. B. sichtbar wird, wann der Fokus auf dem Element liegt. Das `CardElement` vereinfacht das Formular und minimiert die Anzahl der Pflichtfelder durch Einfügen eines einzigen, flexiblen Eingabefelds, mit dem alle notwendigen Karten- und Abrechnungsdaten sicher erfasst werden können. Kombinieren Sie andernfalls die Elemente `CardNumberElement`, `CardExpiryElement` und `CardCvcElement` für ein flexibles Mehrfach-Eingabe-Kartenformular. > Erfassen Sie immer eine Postleitzahl, um die Kartenakzeptanzquote zu steigern und Betrug vorzubeugen. > > Das [einzeilige Card Element](https://docs.stripe.com/js/element/other_element?type=card) erfasst und sendet die Postleitzahl der Kundin/des Kunden an Stripe. Wenn Sie Ihr Zahlungsformular mit geteilten Elements erstellen ([Kartennummer](https://docs.stripe.com/js/element/other_element?type=cardNumber), [Ablaufdatum](https://docs.stripe.com/js/element/other_element?type=cardExpiry), [Prüfziffer](https://docs.stripe.com/js/element/other_element?type=cardCvc)) fügen Sie ein separates Eingabefeld für die Postleitzahl der Kundin/des Kunden hinzu. ### SetupIntent bestätigen Rufen Sie das Client-Geheimnis aus dem in [Schritt 3](https://docs.stripe.com/payments/save-and-reuse-cards-only.md#web-create-setup-intent) erstellten SetupIntent ab und nutzen Sie dann [stripe.confirmCardSetup](https://docs.stripe.com/js/setup_intents/confirm_card_setup) und das Kartenelement, um die Einrichtung abzuschließen. Verläuft dies erfolgreich, lautet der zurückgegebene Wert der Eigenschaft `status` des SetupIntent `succeeded`. 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.confirmCardSetup` über Ihre Zahlungsformularkomponente aufzurufen. Falls Sie herkömmliche Klassenkomponenten bevorzugen, können Sie stattdessen auch [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md#elements-consumer) verwenden. #### Hooks ```jsx import React from 'react'; import {useStripe, useElements, CardElement} from '@stripe/react-stripe-js'; import CardSection from './CardSection'; export default function CardSetupForm() { const stripe = useStripe(); const elements = useElements(); const handleSubmit = async (event) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); if (!stripe || !elements) { // Stripe.js hasn't yet loaded. // Make sure to disable form submission until Stripe.js has loaded. return; } const result = await stripe.confirmCardSetup('{{CLIENT_SECRET}}', { payment_method: { card: elements.getElement(CardElement), billing_details: { name: 'Jenny Rosen', }, } }); if (result.error) { // Display result.error.message in your UI. } else { // The setup has succeeded. Display a success message and send // result.setupIntent.payment_method to your server to save the // card to a Customer } }; return (
); } ``` #### Klassenkomponenten ```jsx import React from 'react'; import {ElementsConsumer, CardElement} from '@stripe/react-stripe-js'; import CardSection from './CardSection'; class CardSetupForm extends React.Component { handleSubmit = async (event) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); const {stripe, elements} = this.props; if (!stripe || !elements) { // Stripe.js hasn't yet loaded. // Make sure to disable form submission until Stripe.js has loaded. return; } const result = await stripe.confirmCardSetup('{{CLIENT_SECRET}}', { payment_method: { card: elements.getElement(CardElement), billing_details: { name: 'Jenny Rosen', }, } }); if (result.error) { // Display result.error.message in your UI. } else { // The setup has succeeded. Display a success message and send // result.setupIntent.payment_method to your server to save the // card to a Customer } }; render() { return (
); } } export default function InjectedCardSetupForm() { return ( {({stripe, elements}) => ( )} ); } ``` > Für die Durchführung von `stripe.confirmCardSetup` werden möglicherweise einige Sekunden benötigt. Während dieser Zeit sollten Sie Ihr Formular deaktivieren, damit keine erneute Absendung erfolgen kann. Lassen Sie stattdessen ein Wartesymbol einblenden, wie beispielsweise eine Sanduhr. Tritt ein Fehler auf, lassen Sie eine Fehlermeldung für die Kundin/den Kunden anzeigen, aktivieren Sie das Formular erneut und blenden Sie das Wartesymbol aus. Falls die Kundin/der Kunde weitere Schritte (z. B. eine Authentifizierung) für den Abschluss der Zahlung durchführen muss, führt Stripe.js durch diesen Prozess. Mit dem SetupIntent wird geprüft, ob die Karteninformationen Ihrer Kundin/Ihres Kunden im Netzwerk gültig sind. Die automatische Überprüfung wird jedoch nicht immer durchgeführt. Einzelheiten hierzu finden Sie unter [Prüfen, ob eine Karte ohne Zahlung gültig ist](https://support.stripe.com/questions/check-if-a-card-is-valid-without-a-charge). Von der Nutzung von dauerhaften, nicht regelmäßig gepflegten SetupIntents wird abgeraten, da diese möglicherweise nicht mehr gültig sind, wenn Sie [stripe.confirmCardSetup](https://docs.stripe.com/js.md#stripe-confirm-card-setup) aufrufen. Sie haben jetzt einen Ablauf erstellt, um Kartenangaben zu erfassen und Authentifizierungsanfragen zu verarbeiten. Verwenden Sie die Testkarte `4000 0025 0000 3155` mit einer beliebigen Prüfziffer (CVC) und Postleitzahl und einem beliebigen Ablaufdatum, um den Authentifizierungsprozess zu testen. Wenn Sie Karten für spätere Belastungen speichern möchten, müssen Sie die Kund/innen vorher um Erlaubnis fragen. Fügen Sie dem Bezahlvorgang einen entsprechenden Text hinzu, wie zum Beispiel diesen: > Ich autorisiere [Name Ihres Unternehmens], das Finanzinstitut, das meine Karte ausgestellt hat, anzuweisen, Zahlungen gemäß den Bedingungen der Vereinbarung zwischen mir und Ihnen von meinem Konto einzuziehen. Wenn der SetupIntent erfolgreich ist, wir die resultierende *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs)-ID (in `result.setupIntent.payment_method`) für den/die entsprechende/n *Kund/in* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) gespeichert. ## Die gespeicherte Karte später belasten [Serverseitig] Wenn Sie eine Off-Session-Belastung eines Kundenkontos vornehmen möchten, erstellen Sie anhand der Kunden-ID und der PaymentMethod-ID einen PaymentIntent. Um eine belastbare Karte zu finden, lassen Sie sich die mit Ihrer Kundin oder Ihrem Kunden verknüpften PaymentMethods [auflisten](https://docs.stripe.com/api/payment_methods/list.md). #### Accounts v2 ```curl curl -G https://api.stripe.com/v1/payment_methods \ -u "<>:" \ -d "customer_account={{CUSTOMERACCOUNT_ID}}" \ -d type=card ``` #### Customers v1 ```curl curl -G https://api.stripe.com/v1/payment_methods \ -u "<>:" \ -d "customer={{CUSTOMER_ID}}" \ -d type=card ``` Wenn Ihnen die Kunden-ID und die PaymentMethod-ID vorliegen, erstellen Sie eine PaymentIntent mit dem Betrag und der Währung der Zahlung. Legen Sie einige weitere Parameter fest, um die Off-Session-Zahlung durchzuführen: - Setzen Sie [off_session](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-off_session) auf `true`, um anzugeben, dass sich der Kunde oder die Kundin während dieses Zahlungsversuchs nicht in Ihrem Bezahlvorgang befindet. Das hat zur Folge, dass der PaymentIntent einen Fehler ausgibt, falls eine Authentifizierung erforderlich ist. - Legen Sie den Wert der Eigenschaft [confirm](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-confirm) des PaymentIntent auf `true` fest. Dadurch erfolgt die Bestätigung sofort, wenn der PaymentIntent erstellt wird. - Setzen Sie [payment_method](https://docs.stripe.com/api.md#create_payment_intent-payment_method) auf die ID der PaymentMethod und [Kunde/Kundin](https://docs.stripe.com/api.md#create_payment_intent-customer) auf die ID des Kunden/der Kundin. #### Curl ```bash curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -d amount=1099 \ -d currency=usd \-d customer="{{CUSTOMER_ID}}" \ -d payment_method="{{PAYMENT_METHOD_ID}}" \ -d off_session=true \ -d confirm=true ``` Schlägt ein Zahlungsversuch fehl, schlägt die Anfrage ebenfalls mit einem 402 HTTP-Statuscode fehl, und der Status des PaymentIntent ist *requires\_payment\_method* (This status appears as "requires_source" in API versions before 2019-02-11). Sie müssen Ihre Kundinnen/Kunden auffordern, zu Ihrer Anwendung zurückzukehren (zum Beispiel per E-Mail oder In-App-Benachrichtigung), um die Zahlung abzuschließen. Prüfen Sie den Code des von der Stripe-API-Bibliothek ausgelösten [Fehlers](https://docs.stripe.com/api/errors/handling.md) oder prüfen Sie den [last_payment_error.decline_code](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-last_payment_error-decline_code) des PaymentIntent, um zu untersuchen, warum der Kartenaussteller die Zahlung abgelehnt hat. Wenn die Zahlung aufgrund eines Ablehnungscodes vom Typ [authentication_required](https://docs.stripe.com/declines/codes.md) fehlgeschlagen ist, verwenden Sie das Client-Geheimnis des abgelehnten PaymentIntent und die [Zahlungsmethode](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-last_payment_error-payment_method) mit confirmCardPayment, damit die Kundinnen/Kunden die Zahlung authentifizieren können. ```javascript // Pass the failed PaymentIntent to your client from your server stripe.confirmCardPayment(intent.client_secret, { payment_method: intent.last_payment_error.payment_method.id }).then(function(result) { if (result.error) { // Show error to your customer console.log(result.error.message); } else { if (result.paymentIntent.status === 'succeeded') { // The payment is complete! } } }); ``` > Für die Durchführung von `stripe.confirmCardPayment` werden möglicherweise einige Sekunden benötigt. Während dieser Zeit sollten Sie Ihr Formular deaktivieren, damit keine erneute Absendung erfolgen kann. Zeigen Sie stattdessen ein Wartesymbol an, wie beispielsweise eine Sanduhr o. ä. Kommt es zu einem Fehler, teilen Sie dies dem Kunden/der Kundin mit, reaktivieren Sie das Formular und verbergen Sie das Wartesymbol. Falls der Kunde/die Kundin weitere Schritte (z. B. eine Authentifizierung) für den Abschluss der Zahlung durchführen muss, begleitet sie/ihn Stripe.js bei diesem Vorgang. Wenn die Zahlung aus anderen Gründen fehlgeschlagen ist, z. B. wegen unzureichender Deckung der Karte, schicken Sie Ihre Kund/innen auf eine Zahlungsseite, um eine neue Karte einzugeben. Sie können die vorhandene PaymentIntent wiederverwenden, um zu versuchen, die Zahlung erneut mit den neuen Kartendaten durchzuführen. ## Integration testen An diesem Punkt sollten Sie über eine Integration verfügen, für die Folgendes gilt: 1. Kartenangaben werden mit einem SetupIntent erfasst und gespeichert, ohne die Karte des/der Kund/in zu belastet. 1. Off-Session-Belastung von Karten wird durchgeführt, und Ablehnungen und Authentifizierungsanfragen werden über einen Wiederherstellungsablauf abgewickelt. Sie können mehrere Testkarten einsetzen, um sicherzustellen, dass diese Integration bereit für den Einsatz in einer Produktionsumgebung ist. Die Karten können Sie mit beliebigen CVCs, Postleitzahlen und zukünftigem Ablaufdatum verwenden. | Nummer | Beschreibung | | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 4242424242424242 | Bei Erfolg sofortige Verarbeitung der Zahlung. | | 4000002500003155 | Erfordert eine Authentifizierung für den ersten Kauf, wird aber für nachfolgende Zahlungen (auch Off-Session-Zahlungen) erfolgreich durchgeführt, solange die Karte mit `setup_future_usage` eingerichtet ist. | | 4000002760003184 | Erfordert eine Authentifizierung für den ersten Kauf und schlägt für nachfolgende Zahlungen (einschließlich Off-Session-Zahlungen) mit dem Ablehnungscode `authentication_required` fehl. | | 4000008260003178 | Erfordert eine Authentifizierung für den ersten Kauf, schlägt aber für nachfolgende Zahlungen (einschließlich Off-Session-Zahlungen) mit dem Ablehnungscode `insufficient_funds` fehl. | | 4000000000009995 | Schlägt immer (einschließlich erster Kauf) mit dem Ablehnungscode `insufficient_funds` fehl. | Siehe dazu die vollständige Liste der [Testkarten](https://docs.stripe.com/testing.md). # iOS > This is a iOS for when platform is ios. View the full page at https://docs.stripe.com/payments/save-and-reuse-cards-only?platform=ios. > Wir empfehlen Ihnen, den Leitfaden [In-App-Zahlungen akzeptieren](https://docs.stripe.com/payments/mobile/accept-payment.md?platform=ios&type=setup) zu befolgen. Verwenden Sie diesen Leitfaden nur, wenn Sie eine manuelle serverseitige Bestätigung verwenden müssen oder Ihre Integration die separate Angabe von Zahlungsmethoden erfordert. Wenn Sie Elements bereits integriert haben, lesen Sie den [Migrationsleitfaden für Payment Element](https://docs.stripe.com/payments/payment-element/migration.md). Mit der [Setup Intents API](https://docs.stripe.com/api/setup_intents.md) können Sie die Karte eines Kunden/einer Kundin ohne vorherige Zahlung speichern. Das ist hilfreich, wenn Sie das Onboarding von Kundinnen/Kunden jetzt durchführen, Zahlungen für sie einrichten, diese aber erst später durchführen möchten (wenn die Kundinnen/Kunden offline sind). Verwenden Sie diese Integration, um wiederkehrende Zahlungen einzurichten oder einmalige Zahlungen zu erstellen, bei denen der endgültige Betrag später festgelegt wird (häufig erst nach Erhalt Ihrer Dienstleistung). > Die Schritte in dieser Anleitung sind auf GitHub vollständig implementiert. Kopieren Sie das [Repository](https://github.com/stripe-samples/mobile-saving-card-without-payment) und folgen Sie den [Anweisungen](https://github.com/stripe-samples/mobile-saving-card-without-payment#how-to-run), um die Demo-App auszuführen. ## Stripe einrichten Zunächst benötigen Sie ein Stripe-Konto. [Jetzt registrieren](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 **StripePaymentsUI** zum [Ziel Ihrer App](https://developer.apple.com/documentation/swift_packages/adding_package_dependencies_to_your_app) hinzu. #### CocoaPods 1. Falls noch nicht geschehen, installieren Sie bitte die aktuellste Version von [CocoaPods](https://guides.cocoapods.org/using/getting-started.html). 1. Wenn Sie keine bestehende [Podfile](https://guides.cocoapods.org/syntax/podfile.html) haben, führen Sie folgenden Befehl aus, um eine zu erstellen: ```bash pod init ``` 1. Fügen Sie folgende Zeile in Ihre `Podfile` ein: ```podfile pod 'StripePaymentsUI' ``` 1. Führen Sie folgenden Befehl aus: ```bash pod install ``` 1. Vergessen Sie nicht, ab jetzt in Zukunft anstelle der Datei `.xcodeproj` die Datei `.xcworkspace` zum Öffnen Ihres Projekts in Xcode zu verwenden. 1. Führen Sie für zukünftige Updates auf die jeweils aktuelle Version des SDK Folgendes aus: ```bash pod update StripePaymentsUI ``` #### Carthage 1. Falls noch nicht geschehen, installieren Sie bitte die aktuelle Version von [Carthage](https://github.com/Carthage/Carthage#installing-carthage). 1. Fügen Sie folgende Zeile in Ihre `Cartfile` ein: ```cartfile github "stripe/stripe-ios" ``` 1. Befolgen Sie die [Carthage-Installationsanweisungen](https://github.com/Carthage/Carthage#if-youre-building-for-ios-tvos-or-watchos). Vergewissern Sie sich, dass Sie alle [hier](https://github.com/stripe/stripe-ios/tree/master/StripePaymentsUI/README.md#manual-linking) aufgeführten erforderlichen Frameworks einbetten. 1. Führen Sie für zukünftige Updates auf die aktuelle Version unseres SDK einfach folgenden Befehl aus: ```bash carthage update stripe-ios --platform ios ``` #### Manuelles Framework 1. Gehen Sie auf unsere [GitHub-Release-Seite](https://github.com/stripe/stripe-ios/releases/latest), laden Sie **Stripe.xcframework.zip** herunter und entpacken Sie die Datei. 1. Ziehen Sie **StripePaymentsUI.xcframework** in den Abschnitt **Embedded Binaries** (Eingebettete Binärdateien) der Einstellungen unter **General** (Allgemeines) Ihres Xcode-Projekts. Aktivieren Sie dabei die Option **Copy items if needed** (Elemente kopieren, falls nötig). 1. Wiederholen Sie Schritt 2 für alle [hier](https://github.com/stripe/stripe-ios/tree/master/StripePaymentsUI/README.md#manual-linking) aufgeführten erforderlichen Frameworks. 1. Wiederholen Sie für zukünftige Updates auf die jeweils aktuelle Version des SDK die Schritte 1–3. > Details zur aktuellen SDK-Version und zu vorherigen Versionen finden Sie auf der Seite [Releases](https://github.com/stripe/stripe-ios/releases) auf GitHub. Um bei Veröffentlichung einer neuen Version eine Benachrichtigung zu erhalten, [achten Sie auf die Releases zum jeweiligen Repository](https://help.github.com/en/articles/watching-and-unwatching-releases-for-a-repository#watching-releases-for-a-repository). Konfigurieren Sie das SDK mit Ihrem [veröffentlichbaren Schlüssel](https://dashboard.stripe.com/test/apikeys) von Stripe, um es beim Start der App auszuführen. Dadurch kann Ihre App Anfragen an die Stripe-API senden. #### Swift ```swift import UIKitimportStripePaymentsUI @main class AppDelegate: UIResponder, UIApplicationDelegate { func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {StripeAPI.defaultPublishableKey = "<>" // do any other necessary launch configuration return true } } ``` > Verwenden Sie Ihre [Testschlüssel](https://docs.stripe.com/keys.md#obtain-api-keys) beim Testen und Entwickeln Ihrer App und Ihre [Live-Modus](https://docs.stripe.com/keys.md#test-live-modes)-Schlüssel beim Veröffentlichen Ihrer App. ## Kund/innen vor Einrichtung erstellen [Serverseitig] Um eine Zahlungsmethode für zukünftige Zahlungen einzurichten, müssen Sie sie einem Objekt zuordnen, das Ihre Kundin/Ihre Kundin darstellt. Wenn Ihre Kundin/Kundin ein Konto erstellt oder die erste Transaktion mit Ihrem Unternehmen durchgeführt hat, erstellen Sie entweder ein kundenseitig konfiguriertes [Account](https://docs.stripe.com/api/v2/core/accounts/create.md)-Objekt mit der Accounts v2 API oder ein [Customer](https://docs.stripe.com/api/customers/create.md)-Objekt mit der Customers API. #### Accounts v2 ```curl curl -X POST https://api.stripe.com/v2/core/accounts \ -H "Authorization: Bearer <>" \ -H "Stripe-Version: 2026-05-27.preview" \ --json '{ "contact_email": "jenny.rosen@example.com", "display_name": "Jenny Rosen", "configuration": { "customer": {} }, "include": [ "configuration.customer" ] }' ``` Bei erfolgreicher Erstellung wird das kundenkonfigurierte [Account](https://docs.stripe.com/api/v2/core/accounts/object.md#v2_account_object-configuration-customer)-Objekt zurückgegeben. Sie können das Objekt bezüglich der Kunden-`id` überprüfen und den Wert zum späteren Abruf in Ihrer Datenbank speichern. #### Customers v1 ```curl curl https://api.stripe.com/v1/customers \ -u "<>:" \ -d "name=Jenny Rosen" \ --data-urlencode "email=jennyrosen@example.com" ``` Bei erfolgreicher Erstellung wird das [Customer](https://docs.stripe.com/api/customers/object.md)-Objekt zurückgegeben. Sie können das Objekt bezüglich der Kunden-`id` überprüfen und den Wert zum späteren Abruf in Ihrer Datenbank speichern. Sie finden diese Kundinnen/Kunden auf der Seite [Kundinnen/Kunden](https://dashboard.stripe.com/customers) im Dashboard. ## SetupIntent erstellen [Serverseitig] Ein [SetupIntent](https://docs.stripe.com/api/setup_intents.md) ist ein Objekt, mit dem Sie eine Zahlungsmethode für zukünftige Zahlungen einrichten können. Das SetupIntent-Objekt enthält ein [Client-Geheimnis](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-client_secret), also einen eindeutigen Schlüssel, den Sie an Ihre App übergeben. Mit dem Client-Geheimnis können Sie bestimmte Aktionen auf dem Client durchführen (z. B. die Einrichtung bestätigen und Details zur Zahlungsmethode ändern) und dabei gleichzeitig sensible Informationen wie `customer` verbergen. Außerdem können Sie mit dem Client-Geheimnis Kartenangaben bei den Kreditkartennetzwerken validieren und authentifizieren. Das Client-Geheimnis ist vertraulich – protokollieren Sie es nicht, betten Sie es nicht in URLs ein und geben Sie es nicht an andere Personen als die Kundin/den Kunden weiter. ### Serverseitig Erstellen Sie auf Ihrem Server einen Endpoint, der einen SetupIntent erstellt und dessen Client-Geheimnis an Ihre App zurückgibt. #### curl ```bash curl https://api.stripe.com/v1/setup_intents/ \ -u <>: \ -d "customer"="{{CUSTOMER_ID}}" ``` Wenn Sie die Karte nur für zukünftige Zahlungen verwenden möchten, bei denen Ihre Kundin/Ihr Kunde während des Bezahlvorgangs anwesend ist, legen Sie den Parameter [Nutzung](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-usage) auf *on\_session* (A payment is described as on-session if it occurs while the customer is actively in your checkout flow and able to authenticate the payment method), um die Autorisierungsraten zu verbessern. ### Clientseitig Fordern Sie auf dem Client einen SetupIntent von Ihrem Server an. #### Swift ```swift import StripePaymentsUI class CheckoutViewController: UIViewController { var setupIntentClientSecret: String? func startCheckout() { // Request a SetupIntent from your server and store its client secret // Click View full sample to see a complete implementation } } ``` ## Kartenangaben erfassen [Clientseitig] Wenn der Kunde das Zahlungsformular abschickt, erfassen Sie die Kartendaten des Kunden mit [STPPaymentCardTextField](https://stripe.dev/stripe-ios/stripe-payments-ui/Classes/STPPaymentCardTextField.html), einer vom SDK bereitgestellten Drop-in-UI-Komponente, die Kartennummer, Ablaufdatum, CVC und Postleitzahl erfasst. ![](https://d37ugbyn3rpeym.cloudfront.net/docs/mobile/ios/card-field.mp4) > Wenn Sie Kartenangaben für zukünftige Off-Session-Zahlungen speichern möchten – insbesondere in Europa aufgrund von Vorschriften zur Wiederverwendung von Karten – müssen Sie sich vorher bei den Kundinnen und Kunden [die Erlaubnis zum Speichern einer Karte einholen](https://docs.stripe.com/strong-customer-authentication.md#sca-enforcement). Fügen Sie im Bezahlvorgang einen Hinweis ein, in dem Sie die Nutzerinnen und Nutzer darüber informieren, wie die Kartenangaben verwendet werden. Übergeben Sie die gesammelten Informationen an neue [STPPaymentMethodCardParams](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentMethodCardParams.html) und [STPPaymentMethodBillingDetails](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentMethodBillingDetails.html) Instanzen, um eine `STPSetupIntentConfirmParams` Instanz zu erstellen. #### Swift ```swift class CheckoutViewController: UIViewController { lazy var cardTextField: STPPaymentCardTextField = { let cardTextField = STPPaymentCardTextField() return cardTextField }() func pay() { // Collect card details let paymentMethodParams = cardTextField.paymentMethodParams // Create SetupIntent confirm parameters with the above let setupIntentParams = STPSetupIntentConfirmParams(clientSecret: setupIntentClientSecret) setupIntentParams.paymentMethodParams = paymentMethodParams // ...continued in next step } } ``` Um die Einrichtung abzuschließen, übergeben Sie das Objekt `STPSetupIntentConfirmParams` an die Methode [confirmSetupIntent](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentHandler.html#/c:objc\(cs\)STPPaymentHandler\(im\)confirmSetupIntent:withAuthenticationContext:completion:) des `STPPaymentHandler` [sharedManager](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentHandler.html#/c:objc\(cs\)STPPaymentHandler\(cm\)sharedHandler). Wenn der Kunde/die Kundin zusätzliche Schritte durchführen muss, um die Zahlung abzuschließen, wie z. B. die Authentifizierung, zeigt `STPPaymentHandler` View-Controller unter Verwendung des übergebenen [STPAuthenticationContext](https://stripe.dev/stripe-ios/stripe-payments/Protocols/STPAuthenticationContext.html) an und führt sie durch das Verfahren. Unter [Unterstützung der 3D Secure-Authentifizierung auf iOS](https://docs.stripe.com/payments/3d-secure.md?platform=ios) erhalten Sie weitere Informationen. #### Swift ```swift class CheckoutViewController: UIViewController { // ... func pay() { // ... // Complete the setup let paymentHandler = STPPaymentHandler.shared() paymentHandler.confirmSetupIntent(withParams: setupIntentParams, authenticationContext: self) { status, setupIntent, error in switch (status) { case .failed: // Setup failed break case .canceled: // Setup canceled break case .succeeded: // Setup succeeded break @unknown default: fatalError() break } } } } extension CheckoutViewController: STPAuthenticationContext { func authenticationPresentingViewController() -> UIViewController { return self } } ``` Mit dem SetupIntent wird geprüft, ob die Karteninformationen Ihrer Kundin/Ihres Kunden im Netzwerk gültig sind. Die automatische Überprüfung wird jedoch nicht immer durchgeführt. Einzelheiten hierzu finden Sie unter [Prüfen, ob eine Karte ohne Abbuchung gültig ist](https://support.stripe.com/questions/check-if-a-card-is-valid-without-a-charge)). Von der Nutzung von dauerhaften, nicht regelmäßig gepflegten SetupIntents wird abgeraten, da diese möglicherweise nicht mehr gültig sind, wenn Sie `confirmSetupIntent` aufrufen. Sie haben jetzt einen Ablauf erstellt, um Kartenangaben zu erfassen und Authentifizierungsanfragen zu verarbeiten. Verwenden Sie die Testkarte `4000 0025 0000 3155` mit einer beliebigen Prüfziffer (CVC) und Postleitzahl und einem beliebigen Ablaufdatum, um den Authentifizierungsprozess zu testen. Wenn der SetupIntent erfolgreich war, wird die sich daraus ergebene PaymentMethod-ID (in `setupIntent.paymentMethodID`) im bereitgestellten Customer-Objekt gespeichert. ## Die gespeicherte Karte später belasten [Serverseitig] Wenn Sie eine Off-Session-Belastung eines Kundenkontos vornehmen möchten, erstellen Sie anhand der Kunden-ID und der PaymentMethod-ID einen PaymentIntent. Um eine belastbare Karte zu finden, lassen Sie sich die mit Ihrer Kundin oder Ihrem Kunden verknüpften PaymentMethods [auflisten](https://docs.stripe.com/api/payment_methods/list.md). #### Accounts v2 ```curl curl -G https://api.stripe.com/v1/payment_methods \ -u "<>:" \ -d "customer_account={{CUSTOMERACCOUNT_ID}}" \ -d type=card ``` #### Customers v1 ```curl curl -G https://api.stripe.com/v1/payment_methods \ -u "<>:" \ -d "customer={{CUSTOMER_ID}}" \ -d type=card ``` Wenn Ihnen die Kunden-ID und die PaymentMethod-ID vorliegen, erstellen Sie eine PaymentIntent mit dem Betrag und der Währung der Zahlung. Legen Sie einige weitere Parameter fest, um die Off-Session-Zahlung durchzuführen: - Setzen Sie [off_session](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-off_session) auf `true`, um anzugeben, dass sich der Kunde oder die Kundin während dieses Zahlungsversuchs nicht in Ihrem Bezahlvorgang befindet. Das hat zur Folge, dass der PaymentIntent einen Fehler ausgibt, falls eine Authentifizierung erforderlich ist. - Legen Sie den Wert der Eigenschaft [confirm](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-confirm) des PaymentIntent auf `true` fest. Dadurch erfolgt die Bestätigung sofort, wenn der PaymentIntent erstellt wird. - Setzen Sie [payment_method](https://docs.stripe.com/api.md#create_payment_intent-payment_method) auf die ID der PaymentMethod und [Kunde/Kundin](https://docs.stripe.com/api.md#create_payment_intent-customer) auf die ID des Kunden/der Kundin. #### Curl ```bash curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -d amount=1099 \ -d currency=usd \-d customer="{{CUSTOMER_ID}}" \ -d payment_method="{{PAYMENT_METHOD_ID}}" \ -d off_session=true \ -d confirm=true ``` Überprüfen Sie die [Status-Eigenschaft](https://docs.stripe.com/payments/paymentintents/lifecycle.md) des PaymentIntent, um zu bestätigen, dass die Zahlung erfolgreich durchgeführt wurde. Wenn der Zahlungsversuch erfolgreich war, ist der Status des PaymentIntent `succeeded`, und die *Off-Session-Zahlung* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information) ist abgeschlossen. ### Wiederherstellungsablauf starten Falls der PaymentIntent einen anderen Status hat, wurde die Zahlung nicht erfolgreich durchgeführt und die Anfrage schlägt fehl. Bitten Sie Ihre Kundinnen und Kunden (zum Beispiel per E-Mail, Textnachricht, Push-Benachrichtigung), zum Abschließen der Zahlung zu Ihrer Anwendung zurückzukehren. Wir empfehlen, in Ihrer App einen Wiederherstellungsablauf einzurichten. Er sollte Ihren Kundinnen und Kunden anzeigen, warum die Zahlung zuerst nicht durchgeführt werden konnte, und sie einen erneuten Versuch unternehmen lassen. Rufen Sie in Ihrem Wiederherstellungsablauf den PaymentIntent über sein *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)) ab. Überprüfen Sie den [lastPaymentError](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentIntent.html#/c:@M@StripePayments@objc\(cs\)STPPaymentIntent\(py\)lastPaymentError) des PaymentIntent, um zu erfahren, warum der Zahlungsversuch fehlgeschlagen ist. Bei Kartenfehlern können Sie dem Nutzer/der Nutzerin die [Meldung](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-last_payment_error-message) zum letzten Zahlungsfehler anzeigen. Andernfalls können Sie eine allgemeine Fehlermeldung anzeigen. #### Swift ```swift func startRecoveryFlow(clientSecret: String) { // Retrieve the PaymentIntent STPAPIClient.shared.retrievePaymentIntent(withClientSecret: clientSecret) { (paymentIntent, error) in guard error == nil, let lastPaymentError = paymentIntent?.lastPaymentError else { // Handle error (for example, allow your customer to retry) return } var failureReason = "Payment failed, try again." // Default to a generic error message if lastPaymentError.type == .card { failureReason = lastPaymentError.message } // Display the failure reason to your customer // ... } } ``` ### Lassen Sie es Ihre Kunden erneut versuchen Geben Sie Kundinnen und Kunden die Möglichkeit, ihre gespeicherten Karten zu [aktualisieren](https://docs.stripe.com/api/payment_methods/update.md) oder zu [entfernen](https://docs.stripe.com/api/payment_methods/detach.md). Führen Sie dann die Zahlung in Ihrem Wiederherstellungsverfahren erneut durch. Gehen Sie dabei genauso vor wie bei der Annahme der ersten Zahlung, mit einem Unterschied: *Bestätigen* (Confirming a PaymentIntent indicates that the customer intends to pay with the current or provided payment method. Upon confirmation, the PaymentIntent attempts to initiate a payment) Sie den ursprünglichen fehlgeschlagenen PaymentIntent, indem Sie das [Client-Geheimnis](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) wiederverwenden, statt ein neues zu erstellen. Wenn die Zahlung fehlgeschlagen ist, weil eine Authentifizierung erforderlich war, versuchen Sie es erneut mit der vorhandenen *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs), statt eine neue zu erstellen. #### Swift ```swift func startRecoveryFlow(clientSecret: String) { // ...continued from previous step // Reuse the existing PaymentIntent's client secret let paymentIntentParams = STPPaymentIntentParams(clientSecret: clientSecret) if paymentIntent.lastPaymentError.code == STPPaymentIntentLastPaymentErrorCodeAuthenticationFailure { // Payment failed because authentication is required, reuse the PaymentMethod paymentIntentParams.paymentMethodId = paymentIntent.lastPaymentError.paymentMethod.stripeId } else { // Collect a new PaymentMethod from the customer... } // Submit the payment... } ``` ## Integration testen An diesem Punkt sollten Sie über eine Integration verfügen, für die Folgendes gilt: 1. Kartenangaben werden mit einem SetupIntent erfasst und gespeichert, ohne die Karte des/der Kund/in zu belastet. 1. Off-Session-Belastung von Karten wird durchgeführt, und Ablehnungen und Authentifizierungsanfragen werden über einen Wiederherstellungsablauf abgewickelt. Sie können mehrere Testkarten einsetzen, um sicherzustellen, dass diese Integration bereit für den Einsatz in einer Produktionsumgebung ist. Die Karten können Sie mit beliebigen CVCs, Postleitzahlen und zukünftigem Ablaufdatum verwenden. | Nummer | Beschreibung | | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 4242424242424242 | Bei Erfolg sofortige Verarbeitung der Zahlung. | | 4000002500003155 | Erfordert eine Authentifizierung für den ersten Kauf, wird aber für nachfolgende Zahlungen (auch Off-Session-Zahlungen) erfolgreich durchgeführt, solange die Karte mit `setup_future_usage` eingerichtet ist. | | 4000002760003184 | Erfordert eine Authentifizierung für den ersten Kauf und schlägt für nachfolgende Zahlungen (einschließlich Off-Session-Zahlungen) mit dem Ablehnungscode `authentication_required` fehl. | | 4000008260003178 | Erfordert eine Authentifizierung für den ersten Kauf, schlägt aber für nachfolgende Zahlungen (einschließlich Off-Session-Zahlungen) mit dem Ablehnungscode `insufficient_funds` fehl. | | 4000000000009995 | Schlägt immer (einschließlich erster Kauf) mit dem Ablehnungscode `insufficient_funds` fehl. | Siehe dazu die vollständige Liste der [Testkarten](https://docs.stripe.com/testing.md). # Android > This is a Android for when platform is android. View the full page at https://docs.stripe.com/payments/save-and-reuse-cards-only?platform=android. > Wir empfehlen Ihnen, den Leitfaden [In-App-Zahlungen akzeptieren](https://docs.stripe.com/payments/mobile/accept-payment.md?platform=android&type=setup) zu befolgen. Verwenden Sie diesen Leitfaden nur, wenn Sie eine manuelle serverseitige Bestätigung verwenden müssen oder Ihre Integration die separate Angabe von Zahlungsmethoden erfordert. Wenn Sie Elements bereits integriert haben, lesen Sie den [Migrationsleitfaden für Payment Element](https://docs.stripe.com/payments/payment-element/migration.md). Mit der [Setup Intents API](https://docs.stripe.com/api/setup_intents.md) können Sie die Karte eines Kunden/einer Kundin ohne vorherige Zahlung speichern. Das ist hilfreich, wenn Sie das Onboarding von Kundinnen/Kunden jetzt durchführen, Zahlungen für sie einrichten, diese aber erst später durchführen möchten (wenn die Kundinnen/Kunden offline sind). Verwenden Sie diese Integration, um wiederkehrende Zahlungen einzurichten oder einmalige Zahlungen zu erstellen, bei denen der endgültige Betrag später festgelegt wird (häufig erst nach Erhalt Ihrer Dienstleistung). > Die Schritte in dieser Anleitung sind auf GitHub vollständig implementiert. Kopieren Sie das [Repository](https://github.com/stripe-samples/mobile-saving-card-without-payment) und folgen Sie den [Anweisungen](https://github.com/stripe-samples/mobile-saving-card-without-payment#how-to-run), um die Demo-App auszuführen. ## Stripe einrichten Zunächst benötigen Sie ein Stripe-Konto. [Jetzt registrieren](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 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.9.1") // Include the financial connections SDK to support US bank account as a payment method implementation("com.stripe:financial-connections:23.9.1") } ``` > Details zur aktuellen SDK-Version und zu vorherigen Versionen finden Sie auf der Seite [Releases](https://github.com/stripe/stripe-android/releases) auf GitHub. Um bei Veröffentlichung eines neuen Release eine Benachrichtigung zu erhalten, [beobachten Sie Veröffentlichungen für das jeweilige Repository](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository). Konfigurieren Sie das SDK mit Ihrem [veröffentlichbaren Schlüssel](https://dashboard.stripe.com/apikeys) von Stripe so, dass dieser Anfragen an die API stellen kann, wie beispielsweise in Ihrer Unterklasse `Application`: #### Kotlin ```kotlin import com.stripe.android.PaymentConfiguration class MyApp : Application() { override fun onCreate() { super.onCreate() PaymentConfiguration.init( applicationContext, "<>" ) } } ``` > Verwenden Sie Ihre [Testschlüssel](https://docs.stripe.com/keys.md#obtain-api-keys) beim Testen und Entwickeln Ihrer App und Ihre [Live-Modus](https://docs.stripe.com/keys.md#test-live-modes)-Schlüssel beim Veröffentlichen Ihrer App. ## Kund/innen vor Einrichtung erstellen [Serverseitig] Um eine Zahlungsmethode für zukünftige Zahlungen einzurichten, müssen Sie sie einem Objekt zuordnen, das Ihre Kundin/Ihre Kundin darstellt. Wenn Ihre Kundin/Kundin ein Konto erstellt oder die erste Transaktion mit Ihrem Unternehmen durchgeführt hat, erstellen Sie entweder ein kundenseitig konfiguriertes [Account](https://docs.stripe.com/api/v2/core/accounts/create.md)-Objekt mit der Accounts v2 API oder ein [Customer](https://docs.stripe.com/api/customers/create.md)-Objekt mit der Customers API. #### Accounts v2 ```curl curl -X POST https://api.stripe.com/v2/core/accounts \ -H "Authorization: Bearer <>" \ -H "Stripe-Version: 2026-05-27.preview" \ --json '{ "contact_email": "jenny.rosen@example.com", "display_name": "Jenny Rosen", "configuration": { "customer": {} }, "include": [ "configuration.customer" ] }' ``` Bei erfolgreicher Erstellung wird das kundenkonfigurierte [Account](https://docs.stripe.com/api/v2/core/accounts/object.md#v2_account_object-configuration-customer)-Objekt zurückgegeben. Sie können das Objekt bezüglich der Kunden-`id` überprüfen und den Wert zum späteren Abruf in Ihrer Datenbank speichern. #### Customers v1 ```curl curl https://api.stripe.com/v1/customers \ -u "<>:" \ -d "name=Jenny Rosen" \ --data-urlencode "email=jennyrosen@example.com" ``` Bei erfolgreicher Erstellung wird das [Customer](https://docs.stripe.com/api/customers/object.md)-Objekt zurückgegeben. Sie können das Objekt bezüglich der Kunden-`id` überprüfen und den Wert zum späteren Abruf in Ihrer Datenbank speichern. Sie finden diese Kundinnen/Kunden auf der Seite [Kundinnen/Kunden](https://dashboard.stripe.com/customers) im Dashboard. ## SetupIntent erstellen [Serverseitig] Ein [SetupIntent](https://docs.stripe.com/api/setup_intents.md) ist ein Objekt, mit dem Sie eine Zahlungsmethode für zukünftige Zahlungen einrichten können. Das SetupIntent-Objekt enthält ein [Client-Geheimnis](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-client_secret), also einen eindeutigen Schlüssel, den Sie an Ihre App übergeben. Mit dem Client-Geheimnis können Sie bestimmte Aktionen auf dem Client durchführen (z. B. die Einrichtung bestätigen und Details zur Zahlungsmethode ändern) und dabei gleichzeitig sensible Informationen wie `customer` verbergen. Außerdem können Sie mit dem Client-Geheimnis Kartenangaben bei den Kreditkartennetzwerken validieren und authentifizieren. Das Client-Geheimnis ist vertraulich – protokollieren Sie es nicht, betten Sie es nicht in URLs ein und geben Sie es nicht an andere Personen als die Kundin/den Kunden weiter. ### Serverseitig Erstellen Sie auf Ihrem Server einen Endpoint, der einen SetupIntent erstellt und dessen Client-Geheimnis an Ihre App zurückgibt. #### curl ```bash curl https://api.stripe.com/v1/setup_intents/ \ -u <>: \ -d "customer"="{{CUSTOMER_ID}}" ``` Wenn Sie die Karte nur für zukünftige Zahlungen verwenden möchten, bei denen Ihre Kundin/Ihr Kunde während des Bezahlvorgangs anwesend ist, legen Sie den Parameter [Nutzung](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-usage) auf *on\_session* (A payment is described as on-session if it occurs while the customer is actively in your checkout flow and able to authenticate the payment method), um die Autorisierungsraten zu verbessern. ### Clientseitig Fordern Sie auf dem Client einen SetupIntent von Ihrem Server an. #### Kotlin ```kotlin class CheckoutActivity : AppCompatActivity() { private lateinit var setupIntentClientSecret: String private fun loadPage() { // Request a SetupIntent from your server and store its client secret // Click View full sample to see a complete implementation } } ``` ## Kartenangaben erfassen [Clientseitig] Wenn der/die Kund/in das Zahlungsformular übermittelt, können Sie seine/ihre Kartendaten mit [CardInputWidget](https://stripe.dev/stripe-android/payments-core/com.stripe.android.view/-card-input-widget/index.html) erfassen. Hierbei handelt es sich um eine Drop-In-Komponente der Nutzeroberfläche aus dem SDK, die die Kartennummer, das Ablaufdatum, die Prüfziffer (CVC) und die Postleitzahl erfasst. ![](https://d37ugbyn3rpeym.cloudfront.net/docs/mobile/android/android-card-input-widget-with-postal.mp4) > Wenn Sie Kartenangaben für zukünftige Off-Session-Zahlungen speichern möchten – insbesondere in Europa aufgrund von Vorschriften zur Wiederverwendung von Karten – müssen Sie sich vorher bei den Kundinnen und Kunden [die Erlaubnis zum Speichern einer Karte einholen](https://docs.stripe.com/strong-customer-authentication.md#sca-enforcement). Fügen Sie im Bezahlvorgang einen Hinweis ein, in dem Sie die Nutzerinnen und Nutzer darüber informieren, wie die Kartenangaben verwendet werden. Rufen Sie die Methode `getPaymentMethodCard` auf, um die Kartenangaben abzurufen. Übergeben Sie die erfassten Informationen an die neuen Instanzen [PaymentMethodCreateParams](https://stripe.dev/stripe-android/payments-core/com.stripe.android.model/-payment-method-create-params/index.html) und `PaymentMethod.BillingDetails`, um eine `ConfirmSetupIntentParams`-Instanz zu erstellen. #### Kotlin ```kotlin // Collect card details val cardInputWidget = findViewById(R.id.cardInputWidget) val paymentMethodCard = cardInputWidget.paymentMethodCard // Later, you will need to attach the PaymentMethod to the Customer it belongs to. // This example collects the customer's email to know which customer the PaymentMethod belongs to, but your app might use an account id, session cookie, and so on. val emailInput = findViewById(R.id.emailInput) val billingDetails = PaymentMethod.BillingDetails.Builder() .setEmail((emailInput.text ?: "").toString()) .build() // Create SetupIntent confirm parameters with the above if (paymentMethodCard != null) { val paymentMethodParams = PaymentMethodCreateParams .create(paymentMethodCard, billingDetails, null) val confirmParams = ConfirmSetupIntentParams .create(paymentMethodParams, setupIntentClientSecret) lifecycleScope.launch { paymentLauncher.confirm(confirmParams) } } ``` Um die Einrichtung abzuschließen, übergeben Sie das `SetupIntentParams`-Objekt mit der aktuellen Aktivität an [PaymentLauncher bestätigen](https://stripe.dev/stripe-android/payments-core/com.stripe.android.payments.paymentlauncher/-payment-launcher/index.html#74063765%2FFunctions%2F-1622557690). Der SetupIntent verifiziert, dass die Karteninformationen, die Ihre Kundinnen und Kunden verwenden, im Netzwerk gültig sind. Eine automatische Verifizierung wird jedoch nicht immer durchgeführt. Details dazu finden Sie unter [Überprüfen, ob eine Karte ohne Zahlung gültig ist](https://support.stripe.com/questions/check-if-a-card-is-valid-without-a-charge). Pflegen Sie auch keine langlebigen, nicht verarbeiteten SetupIntents, da sie möglicherweise nicht mehr gültig sind, wenn Sie `PaymentLauncher#confirm()` aufrufen. Bei manchen Zahlungsmethoden sind für den Abschluss der Zahlung [zusätzliche Authentifizierungsschritte](https://docs.stripe.com/payments/payment-intents/verifying-status.md#next-actions) erforderlich. Das SDK verwaltet die Zahlungsbestätigung und den Authentifizierungsablauf, was das Einblenden zusätzlicher Bildschirme beinhalten kann, die für die Authentifizierung erforderlich sind. Weitere Informationen zur *3D Secure* (3D Secure (3DS) provides an additional layer of authentication for credit card transactions that protects businesses from liability for fraudulent card payments)-Authentifizierung und zur Anpassung des Authentifizierungsprozesses finden Sie unter [Unterstützung der 3D Secure-Authentifizierung auf Android](https://docs.stripe.com/payments/3d-secure.md?platform=android). Das Ergebnis des Ablaufs leitet Sie zu Ihrer über den Rückruf bereitgestellten aufrufenden Aktivität, hier `onPaymentResult`, zurück. Das vom [PaymentLauncher](https://stripe.dev/stripe-android/payments-core/com.stripe.android.payments.paymentlauncher/-payment-launcher/index.html) zurückgegebene [PaymentResult](https://stripe.dev/stripe-android/payments-core/com.stripe.android.payments.paymentlauncher/-payment-result/index.html) hat folgende Typen: - `Completed`: Bestätigung oder Authentifizierung erfolgreich - `Canceled`: Kund/in hat die erforderliche Authentifizierung abgebrochen - `Failed`: Der Authentifizierungsversuch ist fehlgeschlagen, ein Grund wird von [throwable](https://stripe.dev/stripe-android/payments-core/com.stripe.android.payments.paymentlauncher/-payment-result/-failed/index.html#257609069%2FProperties%2F-1622557690) angegeben #### Kotlin ```kotlin private fun onPaymentResult(paymentResult: PaymentResult) { var title = "" var message = "" var restartDemo = false when (paymentResult) { is PaymentResult.Completed -> { title = "Setup Completed" restartDemo = true } is PaymentResult.Canceled -> { title = "Setup Canceled" } is PaymentResult.Failed -> { title = "Setup Failed" message = paymentResult.throwable.message!! } } displayAlert(title, message, restartDemo) } ``` Sie haben jetzt einen Ablauf erstellt, um Kartenangaben zu erfassen und Authentifizierungsanfragen zu verarbeiten. Verwenden Sie die Testkarte `4000 0025 0000 3155` mit einer beliebigen Prüfziffer (CVC) und Postleitzahl und einem beliebigen Ablaufdatum, um den Authentifizierungsprozess zu testen. Wenn der SetupIntent erfolgreich war, wird die sich daraus ergebene PaymentMethod-ID (in `setupIntent.getPaymentMethodId()`) im bereitgestellten Customer-Objekt gespeichert. ## Die gespeicherte Karte später belasten [Serverseitig] Wenn Sie eine Off-Session-Belastung eines Kundenkontos vornehmen möchten, erstellen Sie anhand der Kunden-ID und der PaymentMethod-ID einen PaymentIntent. Um eine belastbare Karte zu finden, lassen Sie sich die mit Ihrer Kundin oder Ihrem Kunden verknüpften PaymentMethods [auflisten](https://docs.stripe.com/api/payment_methods/list.md). #### Accounts v2 ```curl curl -G https://api.stripe.com/v1/payment_methods \ -u "<>:" \ -d "customer_account={{CUSTOMERACCOUNT_ID}}" \ -d type=card ``` #### Customers v1 ```curl curl -G https://api.stripe.com/v1/payment_methods \ -u "<>:" \ -d "customer={{CUSTOMER_ID}}" \ -d type=card ``` Wenn Ihnen die Kunden-ID und die PaymentMethod-ID vorliegen, erstellen Sie eine PaymentIntent mit dem Betrag und der Währung der Zahlung. Legen Sie einige weitere Parameter fest, um die Off-Session-Zahlung durchzuführen: - Setzen Sie [off_session](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-off_session) auf `true`, um anzugeben, dass sich der Kunde oder die Kundin während dieses Zahlungsversuchs nicht in Ihrem Bezahlvorgang befindet. Das hat zur Folge, dass der PaymentIntent einen Fehler ausgibt, falls eine Authentifizierung erforderlich ist. - Legen Sie den Wert der Eigenschaft [confirm](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-confirm) des PaymentIntent auf `true` fest. Dadurch erfolgt die Bestätigung sofort, wenn der PaymentIntent erstellt wird. - Setzen Sie [payment_method](https://docs.stripe.com/api.md#create_payment_intent-payment_method) auf die ID der PaymentMethod und [Kunde/Kundin](https://docs.stripe.com/api.md#create_payment_intent-customer) auf die ID des Kunden/der Kundin. #### Curl ```bash curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -d amount=1099 \ -d currency=usd \-d customer="{{CUSTOMER_ID}}" \ -d payment_method="{{PAYMENT_METHOD_ID}}" \ -d off_session=true \ -d confirm=true ``` Überprüfen Sie die [Status-Eigenschaft](https://docs.stripe.com/payments/paymentintents/lifecycle.md) des PaymentIntent, um zu bestätigen, dass die Zahlung erfolgreich durchgeführt wurde. Wenn der Zahlungsversuch erfolgreich war, ist der Status des PaymentIntent `succeeded`, und die *Off-Session-Zahlung* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information) ist abgeschlossen. ### Wiederherstellungsablauf starten Falls der PaymentIntent einen anderen Status hat, wurde die Zahlung nicht erfolgreich durchgeführt und die Anfrage schlägt fehl. Bitten Sie Ihre Kundinnen und Kunden (zum Beispiel per E-Mail, Textnachricht, Push-Benachrichtigung), zum Abschließen der Zahlung zu Ihrer Anwendung zurückzukehren. Wir empfehlen, in Ihrer App einen Wiederherstellungsablauf einzurichten. Er sollte Ihren Kundinnen und Kunden anzeigen, warum die Zahlung zuerst nicht durchgeführt werden konnte, und sie einen erneuten Versuch unternehmen lassen. Rufen Sie in Ihrem Wiederherstellungsablauf den PaymentIntent über sein *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)) ab. Überprüfen Sie den [lastPaymentError](https://stripe.dev/stripe-android/payments-core/com.stripe.android.model/-payment-intent/index.html#com.stripe.android.model/PaymentIntent/lastPaymentError/#/PointingToDeclaration/) des PaymentIntent, um zu erfahren, warum der Zahlungsversuch fehlgeschlagen ist. Bei Kartenfehlern können Sie dem Nutzer/der Nutzerin die [Meldung](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-last_payment_error-message) zum letzten Zahlungsfehler anzeigen. Andernfalls können Sie eine allgemeine Fehlermeldung anzeigen. #### Kotlin ```kotlin fun startRecoveryFlow(clientSecret: String) { val stripe = Stripe( applicationContext, PaymentConfiguration.getInstance(applicationContext).publishableKey ) lifecycleScope.launch { runCatching { stripe.retrievePaymentIntent(clientSecret) }.fold( onSuccess = { paymentIntent -> var failureReason = "Payment failed, try again" // Default to a generic error message paymentIntent.lastPaymentError?.let { lastPaymentError -> if (lastPaymentError.type == PaymentIntent.Error.Type.CardError) { lastPaymentError.message?.let { errorMessage -> failureReason = errorMessage // Display the failure reason to your customer } } } }, onFailure = { // Handle error } ) } } ``` ### Lassen Sie es Ihre Kunden erneut versuchen Geben Sie Kundinnen und Kunden die Möglichkeit, ihre gespeicherten Karten zu [aktualisieren](https://docs.stripe.com/api/payment_methods/update.md) oder zu [entfernen](https://docs.stripe.com/api/payment_methods/detach.md). Führen Sie dann die Zahlung in Ihrem Wiederherstellungsverfahren erneut durch. Gehen Sie dabei genauso vor wie bei der Annahme der ersten Zahlung, mit einem Unterschied: *Bestätigen* (Confirming a PaymentIntent indicates that the customer intends to pay with the current or provided payment method. Upon confirmation, the PaymentIntent attempts to initiate a payment) Sie den ursprünglichen fehlgeschlagenen PaymentIntent, indem Sie das [Client-Geheimnis](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) wiederverwenden, statt ein neues zu erstellen. Wenn die Zahlung fehlgeschlagen ist, weil eine Authentifizierung erforderlich war, versuchen Sie es erneut mit der vorhandenen *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs), statt eine neue zu erstellen. #### Kotlin ```kotlin fun startRecoveryFlow(clientSecret: String) { // ...continued from previous step val paymentConfiguration = PaymentConfiguration.getInstance(applicationContext) val paymentLauncher = PaymentLauncher.Companion.create( this, paymentConfiguration.publishableKey, paymentConfiguration.stripeAccountId, ::onPaymentResult ) val lastPaymentError = paymentIntent.lastPaymentError val lastPaymentMethodId = lastPaymentError.paymentMethod?.id if (lastPaymentError?.code == "authentication_required" && lastPaymentMethodId != null) { // Payment failed because authentication is required, reuse the PaymentMethod val paymentIntentParams = ConfirmPaymentIntentParams.createWithPaymentMethodId( lastPaymentMethodId, clientSecret // Reuse the existing PaymentIntent ) // Submit the payment... paymentLauncher.confirm(paymentIntentParams) } else { // Collect a new PaymentMethod from the customer... } } ``` ## Integration testen An diesem Punkt sollten Sie über eine Integration verfügen, für die Folgendes gilt: 1. Kartenangaben werden mit einem SetupIntent erfasst und gespeichert, ohne die Karte des/der Kund/in zu belastet. 1. Off-Session-Belastung von Karten wird durchgeführt, und Ablehnungen und Authentifizierungsanfragen werden über einen Wiederherstellungsablauf abgewickelt. Sie können mehrere Testkarten einsetzen, um sicherzustellen, dass diese Integration bereit für den Einsatz in einer Produktionsumgebung ist. Die Karten können Sie mit beliebigen CVCs, Postleitzahlen und zukünftigem Ablaufdatum verwenden. | Nummer | Beschreibung | | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 4242424242424242 | Bei Erfolg sofortige Verarbeitung der Zahlung. | | 4000002500003155 | Erfordert eine Authentifizierung für den ersten Kauf, wird aber für nachfolgende Zahlungen (auch Off-Session-Zahlungen) erfolgreich durchgeführt, solange die Karte mit `setup_future_usage` eingerichtet ist. | | 4000002760003184 | Erfordert eine Authentifizierung für den ersten Kauf und schlägt für nachfolgende Zahlungen (einschließlich Off-Session-Zahlungen) mit dem Ablehnungscode `authentication_required` fehl. | | 4000008260003178 | Erfordert eine Authentifizierung für den ersten Kauf, schlägt aber für nachfolgende Zahlungen (einschließlich Off-Session-Zahlungen) mit dem Ablehnungscode `insufficient_funds` fehl. | | 4000000000009995 | Schlägt immer (einschließlich erster Kauf) mit dem Ablehnungscode `insufficient_funds` fehl. | Siehe dazu die vollständige Liste der [Testkarten](https://docs.stripe.com/testing.md). # React Native > This is a React Native for when platform is react-native. View the full page at https://docs.stripe.com/payments/save-and-reuse-cards-only?platform=react-native. > Wir empfehlen Ihnen, den Leitfaden [In-App-Zahlungen akzeptieren](https://docs.stripe.com/payments/mobile/accept-payment.md?platform=react-native&type=setup) zu befolgen. Verwenden Sie diesen Leitfaden nur, wenn Sie eine manuelle serverseitige Bestätigung verwenden müssen oder Ihre Integration die separate Angabe von Zahlungsmethoden erfordert. Wenn Sie Elements bereits integriert haben, lesen Sie den [Migrationsleitfaden für Payment Element](https://docs.stripe.com/payments/payment-element/migration.md). Mit der [Setup Intents API](https://docs.stripe.com/api/setup_intents.md) können Sie die Karte eines Kunden/einer Kundin ohne vorherige Zahlung speichern. Das ist hilfreich, wenn Sie das Onboarding von Kundinnen/Kunden jetzt durchführen, Zahlungen für sie einrichten, diese aber erst später durchführen möchten (wenn die Kundinnen/Kunden offline sind). Verwenden Sie diese Integration, um wiederkehrende Zahlungen einzurichten oder einmalige Zahlungen zu erstellen, bei denen der endgültige Betrag später festgelegt wird (häufig erst nach Erhalt Ihrer Dienstleistung). ## Stripe einrichten [Serverseitig] [Clientseitig] ### Serverseitig Diese Integration erfordert Endpoints auf Ihrem Server, die mit der Stripe-API kommunizieren können. Nutzen Sie unsere offiziellen Bibliotheken für den Zugriff auf die Stripe-API von Ihrem Server aus: #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ### Clientseitig Das [React Native SDK](https://github.com/stripe/stripe-react-native) ist Open Source und vollständig dokumentiert. Intern werden [native iOS](https://github.com/stripe/stripe-ios) und [Android](https://github.com/stripe/stripe-android) SDKs verwendet. Um das React Native SDK von Stripe zu installieren, führen Sie einen der folgenden Befehle im Verzeichnis Ihres Projekts aus (je nachdem, welchen Paket-Manager Sie verwenden): #### yarn ```bash yarn add @stripe/stripe-react-native ``` #### npm ```bash npm install @stripe/stripe-react-native ``` Installieren Sie als Nächstes einige weitere erforderliche Abhängigkeiten: - Für iOS wechseln Sie in das Verzeichnis **ios** und führen Sie `pod install` aus, um sicherzustellen, dass Sie auch die erforderlichen nativen Dependencies installiert haben. - Für Android müssen keine Abhängigkeiten mehr installiert werden. > Wir empfehlen Ihnen, die [offizielle Anleitung zu TypeScript](https://reactnative.dev/docs/typescript#adding-typescript-to-an-existing-project) zu befolgen, um TypeScript zu unterstützen. ### Stripe Initialisierung Um Stripe in Ihrer React Native-App zu initialisieren, umschließen Sie entweder Ihren Zahlungsbildschirm mit der Komponente `StripeProvider` oder verwenden Sie die Initialisierungsmethode `initStripe`. Nur der [veröffentlichbare API-Schlüssel](https://docs.stripe.com/keys.md#obtain-api-keys) in `publishableKey` ist erforderlich. Das folgende Beispiel zeigt, wie Stripe mithilfe der Komponente `StripeProvider` initialisiert wird. ```jsx import { useState, useEffect } from 'react'; import { StripeProvider } from '@stripe/stripe-react-native'; function App() { const [publishableKey, setPublishableKey] = useState(''); const fetchPublishableKey = async () => { const key = await fetchKey(); // fetch key from your server here setPublishableKey(key); }; useEffect(() => { fetchPublishableKey(); }, []); return ( {/* Your app code here */} ); } ``` > Verwenden Sie Ihre API-[Testschlüssel](https://docs.stripe.com/keys.md#obtain-api-keys) beim Testen und Entwickeln Ihrer App und Ihre [Live-Modus](https://docs.stripe.com/keys.md#test-live-modes)-Schlüssel beim Veröffentlichen Ihrer App. ## Kund/innen vor Einrichtung erstellen [Serverseitig] Um eine Zahlungsmethode für zukünftige Zahlungen einzurichten, müssen Sie sie einem Objekt zuordnen, das Ihre Kundin/Ihre Kundin darstellt. Wenn Ihre Kundin/Kundin ein Konto erstellt oder die erste Transaktion mit Ihrem Unternehmen durchgeführt hat, erstellen Sie entweder ein kundenseitig konfiguriertes [Account](https://docs.stripe.com/api/v2/core/accounts/create.md)-Objekt mit der Accounts v2 API oder ein [Customer](https://docs.stripe.com/api/customers/create.md)-Objekt mit der Customers API. #### Accounts v2 ```curl curl -X POST https://api.stripe.com/v2/core/accounts \ -H "Authorization: Bearer <>" \ -H "Stripe-Version: 2026-05-27.preview" \ --json '{ "contact_email": "jenny.rosen@example.com", "display_name": "Jenny Rosen", "configuration": { "customer": {} }, "include": [ "configuration.customer" ] }' ``` Bei erfolgreicher Erstellung wird das kundenkonfigurierte [Account](https://docs.stripe.com/api/v2/core/accounts/object.md#v2_account_object-configuration-customer)-Objekt zurückgegeben. Sie können das Objekt bezüglich der Kunden-`id` überprüfen und den Wert zum späteren Abruf in Ihrer Datenbank speichern. #### Customers v1 ```curl curl https://api.stripe.com/v1/customers \ -u "<>:" \ -d "name=Jenny Rosen" \ --data-urlencode "email=jennyrosen@example.com" ``` Bei erfolgreicher Erstellung wird das [Customer](https://docs.stripe.com/api/customers/object.md)-Objekt zurückgegeben. Sie können das Objekt bezüglich der Kunden-`id` überprüfen und den Wert zum späteren Abruf in Ihrer Datenbank speichern. Sie finden diese Kundinnen/Kunden auf der Seite [Kundinnen/Kunden](https://dashboard.stripe.com/customers) im Dashboard. ## SetupIntent erstellen [Serverseitig] Ein [SetupIntent](https://docs.stripe.com/api/setup_intents.md) ist ein Objekt, mit dem Sie eine Zahlungsmethode für zukünftige Zahlungen einrichten können. Das SetupIntent-Objekt enthält ein [Client-Geheimnis](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-client_secret), also einen eindeutigen Schlüssel, den Sie an Ihre App übergeben können. Mit dem Client-Geheimnis können Sie bestimmte Aktionen auf dem Client durchführen (z. B. die Einrichtung bestätigen und Details zur Zahlungsmethode ändern) und dabei gleichzeitig sensible Informationen wie `customer` verbergen. Außerdem können Sie mit dem Client-Geheimnis Kartenangaben bei den Kreditkartennetzwerken validieren und authentifizieren. Das Client-Geheimnis ist vertraulich – protokollieren Sie es nicht, betten Sie es nicht in URLs ein und geben Sie es nicht an andere Personen als die Kund/innen weiter. ### Serverseitig Erstellen Sie auf Ihrem Server einen Endpoint, der einen SetupIntent erstellt und dessen Client-Geheimnis an Ihre App zurückgibt. #### curl ```bash curl https://api.stripe.com/v1/setup_intents/ \ -u <>: \ -d "customer"="{{CUSTOMER_ID}}" ``` Wenn Sie die Karte nur für zukünftige Zahlungen verwenden möchten, bei denen Ihre Kundin/Ihr Kunde während des Bezahlvorgangs anwesend ist, legen Sie den Parameter [Nutzung](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-usage) auf *on\_session* (A payment is described as on-session if it occurs while the customer is actively in your checkout flow and able to authenticate the payment method), um die Autorisierungsraten zu verbessern. ## Kartenangaben erfassen [Clientseitig] Erfassen Sie Kartendaten mit `CardField`, einer vom SDK bereitgestellten Nutzeroberflächenkomponente, die Kartennummer, Ablaufdatum, Prüfziffer und Postleitzahl erfasst, sicher auf dem Client. ![](https://d37ugbyn3rpeym.cloudfront.net/docs/mobile/ios/card-field.mp4) Fügen Sie Ihrem Zahlungsbildschirm die Komponente `CardField` hinzu, um die Kartendaten Ihrer Kund/innen sicher zu erfassen. Verwenden Sie den Rückruf `onCardChange`, um nicht vertrauliche Informationen, wie die Marke der Karte und die Vollständigkeit der Angaben, zu prüfen. ```javascript import { CardField, useStripe } from '@stripe/stripe-react-native'; function PaymentScreen() { // ... return ( { console.log('cardDetails', cardDetails); }} onFocus={(focusedField) => { console.log('focusField', focusedField); }} /> ); } ``` > Wenn Sie Kartenangaben für zukünftige Off-Session-Zahlungen speichern möchten – insbesondere in Europa aufgrund von Vorschriften zur Wiederverwendung von Karten – müssen Sie sich vorher bei den Kundinnen und Kunden [die Erlaubnis zum Speichern einer Karte einholen](https://docs.stripe.com/strong-customer-authentication.md#sca-enforcement). Fügen Sie im Bezahlvorgang einen Hinweis ein, in dem Sie die Kundinnen und Kunden darüber informieren, wie die Kartenangaben verwendet werden. Zum Abschließen der Einrichtung übergeben Sie die Kundenkarte und die Abrechnungsinformationen an `confirmSetupIntent`. Sie können diese Methode entweder mit `useConfirmSetupIntent` oder `useStripe` aufrufen. ```javascript function PaymentScreen() { // ... const { confirmSetupIntent, loading } = useConfirmSetupIntent(); // ... const handlePayPress = async () => { // Gather the customer's billing information (for example, email) const billingDetails: BillingDetails = { email: 'jenny.rosen@example.com', }; // Create a setup intent on the backend const clientSecret = await createSetupIntentOnBackend(); const { setupIntent, error } = await confirmSetupIntent(clientSecret, { paymentMethodType: 'Card', paymentMethodData: { billingDetails, } }); if (error) { //Handle the error } // ... }; return ( // ...