TWINT-Zahlungen

Erfahren Sie, wie Sie Zahlungen per TWINT, einer beliebten Zahlungsmethode in der Schweiz, akzeptieren.

Web

Vorsicht

Der Inhalt dieses Abschnitts bezieht sich auf ein Legacy-Produkt. Verwenden Sie den Leitfaden Zahlungen akzeptieren 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. Sie ermöglicht Kundinnen/Kunden, Zahlungen mit einer genehmigten TWINT-Mobilanwendung zu authentifizieren und zu genehmigen.

Sie erhalten eine sofortige Benachrichtigung, ob die Zahlung erfolgreich war oder fehlgeschlagen ist.

Stripe einrichten
Serverseitig

Zunächst benötigen Sie ein Stripe-Konto. Registrieren Sie sich jetzt.

Um von Ihrer Anwendung auf die Stripe-API zuzugreifen, verwenden Sie unsere offiziellen Bibliotheken:

PaymentIntent erstellen
Serverseitig

Ein PaymentIntent 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 an. Wenn Sie eine Liste mit Zahlungsmethodentypen pflegen, die Sie beim Erstellen eines a PaymentIntent übergeben, fügen Sie dieser Liste twint hinzu.

Client-Geheimnis abrufen

Im PaymentIntent ist ein Client-Geheimnis enthalten, das auf dem Client verwendet wird, um Zahlungen sicher abzuschließen. Es gibt verschiedene Verfahren zum Übergeben des Client-Geheimnisses an den Client.

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:

Und dann rufen Sie das Client-Geheimnis mit JavaScript auf der Client-Seite ab:

(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();

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 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.

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/v3/"></script>
</head>

Erstellen Sie auf Ihrer Checkout-Seite mit dem folgenden JavaScript eine Instanz von Stripe.js.

client.js
// Set your publishable key. Remember to change this to your live publishable key in production!
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

Wenn Sie die Zahlung bestätigen, übergeben Sie das Client-Geheimnis.

Vorsicht

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, 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.

script.js
// 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. 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 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.

TWINT-Zahlungen

Erfahren Sie, wie Sie Zahlungen per TWINT, einer beliebten Zahlungsmethode in der Schweiz, akzeptieren.

Vorsicht

Stripe einrichten
Serverseitig

PaymentIntent erstellen
Serverseitig

Client-Geheimnis abrufen

Angaben zur Zahlungsmethode erfassen und die Zahlung übermitteln
Clientseitig

Vorsicht

TWINT-Integration testen

OptionalManuelle Handhabung der TWINT-Weiterleitung

OptionalEreignisse nach der Zahlung verarbeiten

TWINT-Zahlungen

Erfahren Sie, wie Sie Zahlungen per TWINT, einer beliebten Zahlungsmethode in der Schweiz, akzeptieren.

Vorsicht

Stripe einrichtenServerseitig

PaymentIntent erstellenServerseitig

Client-Geheimnis abrufen

Angaben zur Zahlungsmethode erfassen und die Zahlung übermittelnClientseitig

Vorsicht

TWINT-Integration testen

OptionalManuelle Handhabung der TWINT-Weiterleitung

OptionalEreignisse nach der Zahlung verarbeiten

Stripe einrichten
Serverseitig

PaymentIntent erstellen
Serverseitig

Angaben zur Zahlungsmethode erfassen und die Zahlung übermitteln
Clientseitig