Statischer QR-Code

Statischen QR-Code erstellen – Gastro-Beispiel

Du kannst einen statischen QR-Code mit unserer Merchant API erstellen.
Zur Vereinfachung erklären wir das am Beispiel der QR-Code-Erstellung.

Schritt 1: QR-Code erstellen

Erstelle einen QR-Code mit den Pflichtparametern:

• QR-Code erstellen

Das Feld webshopUrl ist Pflicht.

Dein QR-Code kann mit jedem QR-Code-Scanner gelesen werden.

Schritt 2: QR-Code anzeigen

Nach Schritt 1 erhältst du in der Antwort einen QR-Code-String.
Verwende diesen String als src-Attribut in einem HTML-<img>-Tag. So kannst du den QR-Code als Bild anzeigen.

Schritt 3: QR-Code scannen

Scannt der Käufer den QR-Code mit der TWINT-App, wird er mit folgenden Parametern auf deine Webshop-URL weitergeleitet.

• qr_code_session_id
• returnAppScheme (iOS)
• returnAppPackage (Android)

Beispiel-Weiterleitungen

Gescannt mit der TWINT-App

• iOS: https://{{webshopUrl}}?qr_code_session_id={{session}}&returnAppScheme={{appName}}
• Android: https://{{webshopUrl}}?qr_code_session_id={{session}}&returnAppPackage={{appName}}

Gescannt mit einer normalen QR-Code-Scanner-App

• https://{{webshopUrl}}

Schritt 4: Gateway

Sobald der Käufer auf deinem Webshop Produkte gewählt hat und bezahlen möchte, musst du ein Gateway erstellen mit dem passenden Betrag und der Währung (optional: Warenkorb).

Beim Erstellen des Gateways übergibst du die QR-Code-Session-ID und den «Return-App»-Parameter:

$gateway->setQrCodeSessionId($_GET['qr_code_session_id']);
if ($_GET['returnAppScheme']) {
    $returnApp = 'returnAppScheme=' . $_GET['returnAppScheme']; // iOS
} else if ($_GET['returnAppPackage']) {
    $returnApp = 'returnAppPackage=' . $_GET['returnAppPackage']; // Android
}
$gateway->setReturnApp($returnApp);

In der Gateway-Antwort erhältst du den TWINT-App-Link:

{
  "status": "success",
  "data": [
    {
      "transactionId": "100",
      "appLink": "intent://payment#Intent;action=ch.twint.action.TWINT_PAYMENT;scheme=twint;S.code=12345;S.startingOrigin=EXTERNAL_WEB_BROWSER;S.browser_fallback_url=;end", // Android
      // "appLink": 'twint-issuer1://applinks/?al_applink_data={"app_action_type": "TWINT_PAYMENT","extras": {"code": "12345",},"referer_app_link": {"target_url": "", "url": "", "app_name": "EXTERNAL_WEB_BROWSER"}, "version": "6.0" }' // iOS
    }
  ]
}

Sobald du appLink in der Antwort erhältst, musst du ihn öffnen. Die TWINT-App wird für den Käufer automatisch geöffnet.

Parallel dazu startest du ein Transaction Polling mit der transactionId aus der Antwort und dem Endpunkt Transaktion abrufen. Du kannst die GET-Anfrage jede Sekunde wiederholen, bis sich der Transaktionsstatus von initiated auf confirmed oder cancelled ändert. Danach kannst du auf deinem Webshop die passende Ergebnisseite anzeigen.

QR-Code scannen (andere App / Kamera)

Scannt der Kunde den QR-Code mit einer anderen App als TWINT, wird er ebenfalls auf deine Webshop-URL weitergeleitet – jedoch ohne die speziellen Parameter. Wenn der Käufer auf deinem Webshop bezahlen möchte, musst du ein Gateway erstellen.

Anders als im TWINT-App-Fall erstellst du das Gateway mit folgenden Redirect-URLs.

$gateway->setSuccessRedirectUrl('https://www.merchant-website.com/success');
$gateway->setFailedRedirectUrl('https://www.merchant-website.com/failed');
$gateway->setCancelRedirectUrl('https://www.merchant-website.com/cancel');

In der Gateway-Antwort erhältst du einen Link wie hier beschrieben. Öffne diesen Link. Der Käufer wird auf die zahls.ch-Gateway-Seite weitergeleitet, wählt dort sein Zahlungsmittel und schliesst die Zahlung ab. Anschliessend leitet ihn die beim Gateway gesetzte URL weiter.

QR-Code löschen

Du kannst den QR-Code über den Endpunkt QR-Code löschen entfernen.

Brichst du den Bestellvorgang in deinem Webshop ab, musst du die Session ebenfalls beenden, um Zahlungen nach dem Abbruch zu verhindern. Den QR-Code-Scan löschst du über QR-Code-Scan löschen, indem du die Session-ID setzt (siehe #schritt-3-qr-code-scannen).