# TWINT-Zahlungen Erfahren Sie, wie Sie Zahlungen per TWINT, einer beliebten Zahlungsmethode in der Schweiz, akzeptieren. # Checkout > This is a Checkout for when payment-ui is checkout. View the full page at https://docs.stripe.com/payments/twint/accept-a-payment?payment-ui=checkout. > Stripe kann Ihren Kundinnen und Kunden automatisch die relevanten Zahlungsmethoden anzeigen, indem Währungen, Einschränkungen der Zahlungsmethode und andere Parameter ausgewertet werden. > > - Befolgen Sie den Leitfaden [Eine Zahlung akzeptieren](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=checkout&ui=stripe-hosted), um eine Checkout-Integration zu erstellen, die [dynamische Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md) verwendet. - Wenn Sie keine dynamischen Zahlungsmethoden verwenden möchten, befolgen Sie die folgenden Schritte, um die Zahlungsmethoden in Ihrer Checkout-Integration manuell zu konfigurieren. Bei TWINT handelt es sich um eine in der Schweiz verwendete Zahlungsmethode für die [einmalige Nutzung](https://docs.stripe.com/payments/payment-methods.md#usage). Sie ermöglicht Kundinnen/Kunden, Zahlungen mit einer genehmigten TWINT-Mobilanwendung [zu authentifizieren und zu genehmigen](https://docs.stripe.com/payments/payment-methods.md#customer-actions). Sie erhalten eine [sofortige Benachrichtigung](https://docs.stripe.com/payments/payment-methods.md#payment-notification), ob die Zahlung erfolgreich war oder fehlgeschlagen ist. ## Kompatibilität ermitteln **Unterstützte Unternehmensstandorte**: Europe, UK **Unterstützte Währungen**: `chf` **Transaktionswährungen**: `chf` **Zahlungsmodus**: Yes **Einrichtungsmodus**: No **Abonnementmodus**: No Für die Unterstützung von TWINT muss eine Checkout-Sitzung alle folgenden Bedingungen erfüllen: - Sie müssen *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) für alle Posten in Schweizer Franken (Währungscode `chf`) angeben. ## Eine TWINT-Zahlung annehmen > Erstellen Sie zunächst eine Integration, um mit Checkout [Zahlungen anzunehmen](https://docs.stripe.com/payments/accept-a-payment.md?integration=checkout), bevor Sie mit diesem Leitfaden fortfahren. Das führt Sie durch die Aktivierung von TWINT und zeigt die Unterschiede zwischen dem Akzeptieren von Zahlungen mit dynamischen Zahlungsmethoden und dem manuellen Konfigurieren von Zahlungsmethoden. Beim Erstellen einer [Checkout-Sitzung](https://docs.stripe.com/api/checkout/sessions.md) müssen Sie wie folgt vorgehen: - Fügen Sie `twint` zur Liste der `payment_method_types` hinzu. - Stellen Sie sicher, dass für alle `line_items` die Währung `chf` verwendet wird. #### Von Stripe gehostete Seite ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price_data][currency]=chf" \ -d "line_items[0][price_data][product_data][name]=T-shirt" \ -d "line_items[0][price_data][unit_amount]=2000" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ -d "payment_method_types[0]=card" \ -d "payment_method_types[1]=twint" \ --data-urlencode "success_url=https://example.com/success" ``` #### Eingebettetes Formular ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price_data][currency]=chf" \ -d "line_items[0][price_data][product_data][name]=T-shirt" \ -d "line_items[0][price_data][unit_amount]=2000" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ -d "payment_method_types[0]=card" \ -d "payment_method_types[1]=twint" \ --data-urlencode "return_url=https://example.com/return" \ -d ui_mode=embedded_page ``` ### Abwicklung Ihrer Bestellungen Informieren Sie sich über die [Ausführung von Bestellungen](https://docs.stripe.com/checkout/fulfillment.md), nachdem Sie eine Zahlung angenommen haben. ## Integration testen Wählen Sie beim Testen Ihrer Checkout-Integration ‘TWINT’ als Zahlungsmethode aus und klicken Sie auf **Bezahlen**. ## Abwicklung von Rückerstattungen Erfahren Sie mehr über [TWINT-Rückerstattungen](https://docs.stripe.com/payments/twint.md#refunds). ## See also - [Checkout-Ausführung](https://docs.stripe.com/checkout/fulfillment.md) - [Checkout anpassen](https://docs.stripe.com/payments/checkout/customization.md) # Direct API > This is a Direct API for when payment-ui is direct-api. View the full page at https://docs.stripe.com/payments/twint/accept-a-payment?payment-ui=direct-api. > Der Inhalt dieses Abschnitts bezieht sich auf ein *Legacy* (Technology that's no longer recommended)-Produkt. Verwenden Sie den Leitfaden [Zahlungen akzeptieren](https://docs.stripe.com/payments/accept-a-payment.md) für den aktuellsten Integrationspfad. Auch wenn Stripe dieses Produkt jetzt noch unterstützt, kann sich dies ändern, wenn das Produkt nicht mehr unterstützt wird. Bei TWINT handelt es sich um eine in der Schweiz verwendete Zahlungsmethode für die [einmalige Nutzung](https://docs.stripe.com/payments/payment-methods.md#usage). Sie ermöglicht Kundinnen/Kunden, Zahlungen mit einer genehmigten TWINT-Mobilanwendung [zu authentifizieren und zu genehmigen](https://docs.stripe.com/payments/payment-methods.md#customer-actions). Sie erhalten eine [sofortige Benachrichtigung](https://docs.stripe.com/payments/payment-methods.md#payment-notification), ob die Zahlung erfolgreich war oder fehlgeschlagen ist. ## Stripe einrichten [Serverseitig] Zunächst benötigen Sie ein Stripe-Konto. [Registrieren Sie sich jetzt](https://dashboard.stripe.com/register). Um von Ihrer Anwendung auf die Stripe-API zuzugreifen, verwenden Sie unsere offiziellen Bibliotheken: #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ## PaymentIntent erstellen [Serverseitig] Ein [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) ist ein Objekt, das Ihre Absicht darstellt, eine Zahlung von einem Kunden/einer Kundin einzuziehen, und den Zahlungsvorgang verfolgt. Um einen `PaymentIntent` zu erstellen, der eine TWINT-Zahlungsmethode akzeptiert, geben Sie den einzuziehenden Betrag, `chf` als Währung und `twint` in der Liste der [payment_method_types](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types) an. Wenn Sie eine Liste mit Zahlungsmethodentypen pflegen, die Sie beim Erstellen eines a `PaymentIntent` übergeben, fügen Sie dieser Liste `twint` hinzu. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1000 \ -d currency=chf \ -d "payment_method_types[]=twint" ``` ### Client-Geheimnis abrufen Im PaymentIntent ist ein *Client-Geheimnis* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) enthalten, das auf dem Client verwendet wird, um Zahlungen sicher abzuschließen. Es gibt verschiedene Verfahren zum Übergeben des Client-Geheimnisses an den Client. #### Einseitige Anwendung Rufen Sie das Client-Geheimnis von einem Endpoint auf Ihrem Server ab, indem Sie die Browser-Funktion `fetch` verwenden. Diese Vorgehensweise funktioniert am besten, wenn es sich bei Ihrer Client-Seite um eine einseitige Anwendung handelt, insbesondere wenn sie mit einem modernen Frontend-Framework wie React erstellt wurde. Erstellen Sie den Server-Endpoint, der das Client-Geheimnis bereitstellt: #### Ruby ```ruby get '/secret' do intent = # ... Create or retrieve the PaymentIntent {client_secret: intent.client_secret}.to_json end ``` Und dann rufen Sie das Client-Geheimnis mit JavaScript auf der Client-Seite ab: ```javascript (async () => { const response = await fetch('/secret'); const {client_secret: clientSecret} = await response.json(); // Render the form using the clientSecret })(); ``` #### Serverseitiges Rendering Übergeben Sie das Client-Geheimnis von Ihrem Server an den Client. Diese Vorgehensweise funktioniert am besten, wenn Ihre Anwendung statische Inhalte auf dem Server generiert, bevor sie an den Browser gesendet werden. Fügen Sie das [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) in Ihr Bezahlformular ein. Rufen Sie in Ihrem serverseitigen Code das Client-Geheimnis aus dem PaymentIntent ab: #### Ruby ```erb
``` ```ruby get '/checkout' do @intent = # ... Fetch or create the PaymentIntent erb :checkout end ``` ## Angaben zur Zahlungsmethode erfassen und die Zahlung übermitteln [Clientseitig] Wenn Kundinnen/Kunden über das „Click to Pay“-Verfahren mit TWINT bezahlen, verwenden Sie Stripe.js, um die Zahlungen an Stripe zu übermitteln. [Stripe.js](https://docs.stripe.com/payments/elements.md) ist die grundlegende JavaScript-Bibliothek für die Erstellung von Zahlungsabläufen. Sie verarbeitet automatisch komplexe Szenarien wie die nachfolgend beschriebene Weiterleitung und ermöglicht die Erweiterung Ihrer Integration durch zusätzliche Zahlungsmethoden. Binden Sie das Stripe.js-Skript in Ihre Bezahlseite ein, indem Sie es im `head` Ihrer HTML-Datei einfügen. ```html Checkout ``` Erstellen Sie auf Ihrer Checkout-Seite mit dem folgenden JavaScript eine Instanz von Stripe.js. ```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('<>'); ``` Wenn Sie die Zahlung bestätigen, übergeben Sie das Client-Geheimnis. > Gehen Sie sorgfältig mit dem Client-Geheimnis um, da es den Zugriff auf den PaymentIntent ermöglicht. Es darf nicht protokolliert, in URLs eingebettet oder Personen außer dem Kunden/der Kundin selbst zugänglich gemacht werden. Verwenden Sie [stripe.confirmTwintPayment](https://docs.stripe.com/js/payment_intents/confirm_twint_payment), um die Weiterleitung von Ihrer Seite auf die lokale Zahlungsseite durchzuführen. Sie müssen die `return_url` angeben, die den/die Nutzer/in nach Abschluss der Zahlung weiterleitet. Der Kunde/die Kundin wählt die jeweilige Zahlungsmethode auf der Seite des lokalen Zahlungsabwicklers aus. ```javascript // Redirects from the client to the payment processor stripe.confirmTwintPayment( '{{PAYMENT_INTENT_CLIENT_SECRET}}', { payment_method: { // Billing details is optional. billing_details: { name: 'Jenny Rosen', email: 'jenny@example.com' }, }, // Return URL where the customer should be redirected after the authorization. return_url: 'https://example.com/checkout/complete', } ).then(function(result) { if (result.error) { // Inform the customer that there was an error. console.log(result.error.message); } }); ``` Verweisen Sie mit `return_url` auf eine Seite, die den Zahlungsstatus angibt, indem Sie den [Status des PaymentIntent überprüfen](https://docs.stripe.com/payments/payment-intents/verifying-status.md). Wenn Stripe die Kundinnen/Kunden zu dieser Seite weiterleitet, hängen wir die folgenden URL-Abfrageparameter zur Verwendung im Verifizierungsaufruf an die `return_url` an. Sie können bei der Angabe der `return_url` auch Ihre eigenen Abfrageparameter anhängen. Diese Parameter bleiben während des gesamten Weiterleitungsvorgangs bestehen. | Parameter | Beschreibung | | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- | | `payment_intent` | Die eindeutige ID für den `PaymentIntent` | | `payment_intent_client_secret` | Das [Client-Geheimnis](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) des `PaymentIntent`-Objekts | ## TWINT-Integration testen Testen Sie Ihre TWINT-Integration mit Ihren Test-API-Schlüsseln durch Anzeige der Weiterleitungsseite. Sie können die erfolgreiche Zahlung testen, indem Sie die Zahlung auf der Weiterleitungsseite authentifizieren. Der PaymentIntent wechselt von `requires_action` zu `succeeded`. Um den Fall zu testen, bei dem der/die Nutzer/in nicht authentifiziert werden kann, verwenden Sie Ihre Test-API-Schlüssel und zeigen die Weiterleitungsseite an. Klicken Sie auf der Weiterleitungsseite auf **Fail test payment** (Testzahlung fehlschlagen lassen). Der PaymentIntent wechselt von `requires_action` zu `requires_payment_method`. ## Optional: Manuelle Handhabung der TWINT-Weiterleitung Wir empfehlen, die Abwicklung von TWINT-Weiterleitungen und -Zahlungen auf Client-Seite mit `confirmTwintPayment` Stripe.js zu überlassen. Bei Verwendung von Stripe.js können Sie Ihre Integration um weitere Zahlungsmethoden erweitern. Sie können die Weiterleitung auf Ihren Server aber auch manuell handhaben: - Erstellen und bestätigen Sie einen [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) mit `payment_method_data` des Typs `twint`. Durch Angabe von `payment_method_data` erstellen wir eine *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) und verwenden sie sofort mit diesem PaymentIntent. Sie müssen auch die `return_url` angeben, die den/die Nutzer/in nach Abschluss der Zahlung weiterleitet. Sie können Ihre eigenen Abfrageparameter in dieser URL angeben. Am Ende des Weiterleitungsablaufs enthält die endgültige URL diese Parameter. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1000 \ -d currency=chf \ -d "payment_method_types[]=twint" \ -d confirm=true \ -d "payment_method_data[type]=twint" \ --data-urlencode "return_url=https://example.com/checkout/complete" ``` Der erstellte `PaymentIntent` hat den Status `requires_action` und eine `next_action` vom Typ `redirect_to_url`. ```json { "status": "requires_action", "next_action": { "type": "redirect_to_url", "redirect_to_url": { "url": "https://hooks.stripe.com/...", "return_url": "https://example.com/checkout/complete" } }, "id": "pi_xxx", "object": "payment_intent", "amount": 1000, "client_secret": "pi_xxx_secret_xxx", "confirm": "true", "confirmation_method": "automatic", "created": 1687432192, "currency": "chf", "livemode": true, "charges": { "data": [], "object": "list", "has_more": false, "url": "/v1/charges?payment_intent=pi_xxx" }, "payment_method_types": [ "twint" ] } ``` - Leiten Sie den Kunden/die Kundin an die in der Eigenschaft `next_action.redirect_to_url.url` angegebene URL weiter. Das folgende Codebeispiel ist nur ein Annäherungswert. Die Weiterleitungsmethode Ihres Web-Frameworks kann sich davon unterscheiden. Wenn der Kunde/die Kundin den Zahlungsvorgang abgeschlossen hat, leiten wir ihn/sie an die `return_url` weiter, die Sie bei der Erstellung des PaymentIntent angegeben haben. Die URL enthält die URL-Abfrageparameter `payment_intent` und `payment_intent_client_secret`. Wenn Sie bei der Angabe der `return_url` andere Parameter angegeben haben, werden diese hier ebenfalls angehängt. Wir empfehlen die Verwendung von [Webhooks](https://docs.stripe.com/payments/payment-intents/verifying-status.md#webhooks), um den Zahlungsstatus zu bestätigen. ## Optional: Ereignisse nach der Zahlung verarbeiten Stripe übermittelt ein [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie im Dashboard einen *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) oder eine Partnerlösung, um diese Ereignisse zu empfangen und Aktionen auszuführen (Versenden einer Bestellbestätigung per E-Mail an die Kund/innen, Erfassen des Verkaufs in einer Datenbank oder Einleiten des Versandablaufs). Überwachen Sie diese Ereignisse, statt auf einen Callback vom Client zu warten. Auf dem Client könnte der Kunde/die Kundin das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist und böswillige Clients könnten die Antwort manipulieren. Wenn Sie Ihre Integration so einrichten, dass asynchrone Ereignisse überwacht werden, hilft Ihnen dies auch dabei, in Zukunft mehr Zahlungsmethoden zu akzeptieren. Hier erhalten Sie Informationen zu den [Unterschieden zwischen allen unterstützten Zahlungsmethoden](https://stripe.com/payments/payment-methods-guide). - **Manuelles Bearbeiten von Ereignissen im Dashboard** Verwenden Sie das Dashboard, um [Ihre Testzahlungen im Dashboard anzuzeigen](https://dashboard.stripe.com/test/payments), E-Mail-Belege zu senden, Auszahlungen zu bearbeiten oder fehlgeschlagene Zahlungen erneut zu versuchen. - **Erstellen eines benutzerdefinierten Webhooks** [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI. - **Integrieren einer vorgefertigten App** Bearbeiten Sie häufige Unternehmensereignisse, wie z. B.[Automatisierung](https://stripe.partners/?f_category=automation) oder[Marketing und Vertrieb](https://stripe.partners/?f_category=marketing-and-sales), indem Sie eine Partneranwendung integrieren.