Einrichtung der TWINT-Integration

Die TWINT-Integration ermöglicht es, den QR-Code auf der Rechnung mit einer TWINT-App zu scannen un zu bezahlen. Zusätzlich kann oberhalb des Zahlungsteils ein Link angebracht werden, um TWINT-Zahlungen im Browser zu ermöglichen. Dies ist vor allem hilfreich, wenn der Benutzer die Rechnung auf dem Mobilgerät öffnet und dadurch nicht mit der TWINT-App scannen kann.

Für die TWINT-Integration wird folgendes benötigt:

 

1. Zugang zur API von mame

Voraussetzung für die Nutzung der API ist eine gültige Plugin-Lizenz.

Die Zugangsdaten für die API von mame findest kurze Zeit nach dem Plugin-Kauf in deinem Konto bei mamedev.ch unter „API-Zugangsdaten“. Diese Angaben müssen im WordPress-Backend unter „QR-Rechnung > Einstellungen > API-Einstellungen“ eingetragen werden. Klicke danach auf „Verbinden“ um eine Verbindung herzustellen. 

Logge dich danach mit demselben Benutzernamen und Passwort in deinem Konto bei der mame App (https://mamedev.app) ein und gehe zu „Profil“ um den Webhook Key zu finden. Kopiere diesen und trage ihn bei den Plugin-Einstellungen ein.

 

2. Einstellungen im TWINT-Portal

Logge dich in dein Konto im TWINT-Portal unter https://portal.twint.ch ein.

Für die Integration von TWINT können im Portal zwei Stores hinzugefügt werden:

  1. Ein Store für die Zahlung via QR-Code der Rechnung.
  2. Ein Store für die Zahlung via Link auf der Rechnung (optional).

 

2.1 Store für die Zahlung via QR-Code der Rechnung

Klicke im Home-Bildschirm unter „Kasse oder Zahlterminal“ auf den Button „TWINT integrieren“.

Wichtig: Für diesen Store darf nicht „Online-Shop“ ausgewählt werden.

Gib im nächsten Bildschirm (Basisangaben) alle erforderlichen Angaben über deinen Online-Shop an und klicke auf „Weiter“.

Im nächsten Bildschirm (Anbindung) muss unter „Hersteller“ und „Vertrieb und Support“ jeweils „mame“ ausgewählt werden.

Nachdem der Store hinzugefügt wurde, wird die Store UUID angezeigt. Diese wird in Schritt 3 in der mame App benötigt.

 

2.2 Store für die Zahlung via Link

Klicke im Home-Bildschirm unter „Online-Shop“ auf den Button „TWINT integrieren“.

Fülle die Basisangaben aus und wähle im zweiten Schritt (Anbindung) die Integration „Shop-Plugin“ und „WordPress WooCommerce“.

Beim Hinzufügen des ersten Stores muss ausserdem ein Zertifikat erstellt werden, welches für die Einrichtung bei WooCommerce benötigt wird. Wähle unter „Zertifikat bestellen“ ein Passwort und merke es dir oder speichere es irgendwo ab. Es wird später nochmals zwingend benötigt und kann nach dem Erstellen des Zertifikats nicht mehr eingesehen werden.

Falls Sonderzeichen für das Passwort verwendet werden, dürfen nur folgende vorkommen: ~!@#%^*_+-={}[]:,./

Unter „Gutschriften-Konto“ muss noch das zuvor hinzugefügte Bankkonto ausgewählt werden.

 

Nach Abschluss der Registrierung wird auf der Bestätigungsseite die UUID angezeigt. Speichere diesen Wert irgendwo ab, er wird später nochmals benötigt. Um die UUID später nochmals anzuzeigen, kannst du unter „Stores“ auf den entsprechenden Store klicken.

Auf derselben Seite kann ausserdem das Zertifikat heruntergeladen werden, welches später bei den Einstellungen in der mame App benötigt wird.

 

3. Aktivierung des Services in der mame App

Sobald du die Angaben für die mame-API erhalten hast, kannst dich unter mamedev.app in der mame App einloggen.

Benutzername und Passwort für die App findest du in deinem Konto bei mamedev.ch.

Nach dem Einloggen kann unter Services der Service „QR-Bill TWINT Integration“ hinzugefügt werden.

Im ersten Schritt werden die Angaben für den Shop benötigt für welchen die Integration erfolgen soll.

  • Im Feld „QR-Bill Store UUID (TWINT)“ muss die UUID des Stores von Schritt 2.1 eingegeben werden.
  • Die Notification URL ist die URL für die JSON REST API der WordPress-Seite. Normalerweise ist diese zusammengesetzt aus Seiten-URL und der Endung „/wp-json“.

 

Optional: Wenn auf QR-Rechnungen ein Link erscheinen soll für Zahlungen via TWINT im Browser, kann das Toggle „TWINT-Zahlungslink zu QR-Rechnungen hinzufügen?“ aktiviert werden:

  • Unter „QR-Bill Zahlungslink Store UUID (TWINT)“ muss die UUID aus Schritt 2.2 eingefügt werden.
  • Die Zertifikat-Datei wurde ebenfalls in Schritt 2.2 heruntergeladen und kann danach im TWINT-Portal unter „Einstellungen“ heruntergeladen werden.
  • Das Zertifikat-Passwort wurde entweder in Schritt 2.2 gesetzt oder zu einem früheren Zeitpunkt, wenn im TWINT-Portal bereits zuvor ein Store hinzugefügt wurde.
  • Das Shop-Logo (optional) wird auf der Zahlungsseite angezeigt und muss die Abmessungen 800 (Breite) x 400 (Höhe) Pixel haben.

 

 

Im zweiten Schritt muss eine Zahlungsart angegeben werden.

Nach dem Klick auf „Service abonnieren“ ist die Einrichtung abgeschlossen. Unter „Services“ kann der Service bearbeitet und es können zusätzliche Stores hinzugefügt werden.

 

4. Einstellungen im WordPress-Backend

Nachdem der Service hinzugefügt wurde, muss der Store bei den Plugin-Einstellungen im WordPress-Backend hinzugefügt werden.

Gehe dazu auf die Seite „QR-Rechnung > Einstellungen“ und klicke unter „TWINT > Store ID“ auf „Synchronisieren“. Danach kannst du den Store auswählen und die Einstellungen speichern.

Sollte die Synchronisierung fehlschlagen, ist die API-Verbindung noch nicht korrekt aufgesetzt. Gib unter API-Einstellungen die entsprechenden Daten ein und klicke nach dem Speicher auf „Verbinden“ (siehe Schritt 1).