---
title: "Shop5 Plugin WawiPay"
canonical: "https://doc.wawi.ch/space/DOCPL/2022047745/Shop5%20Plugin%20WawiPay"
format: markdown
---
---
# Installation
Bitte installieren Sie das Plugin gemäss Anleitung unter [elink.ch/plugin5](https://elink.ch/plugin5)
# Konfigurationsvorbereitung in der WawiPay Plattform
Loggen Sie sich bitte in der WawiPay-Plattform unter [login.wawipay.com](https://login.wawipay.com) ein.
> ℹ️ *Wenn WawiPay von uns eingerichtet wurde, finden Sie die Zugangsdaten im KIS-Kundencenter unter **[login.wawi.ch](https://login.wawi.ch)** im Tab «Module»*
## Zahlungsarten
Bitte konfigurieren Sie unter «Zahlungsanbieter» die gewünschten Zahlungsarten gemäss Anleitungen unter [elink.ch/payhelp](https://elink.ch/payhelp)
## API Integrationen für Pluginzugang
Gehen Sie auf den Menüpunkt «API und Integrationen» (1) dort klicken Sie unter «API-Integration hinzufügen» auf «API-Schlüssel hinzufügen» (2)
Geben Sie den Namen Ihres Webshop’s (1) ein und klicken Sie auf «Hinzufügen» (2)
Anschliessend kopieren Sie von Ihrem Webshop (1) den «API Schlüssel» mit einem Klick auf den «Kopieren» Button (2) und speichern diesen z.B. im «Word».* (Dieser wird später in der Pluginkonfiguration benötigt)*
> ℹ️ Sollten Sie mehrere Webshop’s anbinden wollen, erstellen Sie für jeden Webshop einen eigenen «API Schlüssel» *(wiederholen Sie dazu alle Schritte in **[diesem Kapitel](https://photografix.atlassian.net/wiki/spaces/DOCPL/pages/2022047745/Shop5+Plugin+WawiPay#API-Integrationen-f%C3%BCr-Pluginzugang)**)*
## Webhook einrichten
Gehen Sie auf den Menüpunkt «Webhooks» (1) und klicken Sie auf «Webhook hinzufügen» tragen Sie dann Ihren «Webshop Name» ein (2) anschliessend kopieren Sie die unten grau hinterlegte URL und tragen Sie unter «Webhook URL» ein (3) und ersetzen «ihrshopname.ch» durch Ihre offizielle Shop-URL. Setzen Sie den «Webhook Inhaltstyp» auf «JSON» (4) und die «Webhook Version» auf «2020-06-10» (5) und aktivieren Sie alle «Ereignisse» (6) bis auf «Payout». Unter (7) wählen Sie den unter [https://photografix.atlassian.net/wiki/spaces/DOCPL/pages/2022047745/Shop5+Plugin+WawiPay#API-Integrationen-f%C3%BCr-Pluginzugang](https://photografix.atlassian.net/wiki/spaces/DOCPL/pages/2022047745/Shop5+Plugin+WawiPay#API-Integrationen-f%C3%BCr-Pluginzugang) zuvor erstellten API-Key ihres Webshops und speichern Sie den Webhook indem Sie auf «Hinzufügen» (8) klicken.
```
https://ihrshopname.ch/includes/modules/notify.php?plugin=xv_wawipay
```
Anschliessend öffnen Sie den eben erstellten «Webhook» nochmals und klicken auf «Test Transaktion senden» es sollte das Fenster erscheinen und dort stehen «Daten erfolgreich an den angegebenen Server übermittelt» (1) sollte ein Fehler (2) erscheinen, prüfen Sie die «Webhook URL» [*Bild oben (3)*]. Auch kleine Schreibfehler können zu einem Problem führen. Die häufigste Ursache ist, dass sich in der Konfiguration ein «www» befindet, während der Shop ohne «www» konfiguriert wurde oder umgekehrt.
> ℹ️ Sollten Sie mehrere Webshop’s anbinden wollen, erstellen Sie für jeden Webshop einen eigenen «Webhook» *(wiederholen Sie dazu alle Schritte in **[diesem Kapitel](https://photografix.atlassian.net/wiki/spaces/DOCPL/pages/2022047745/Shop5+Plugin+WawiPay#Webhook-einrichten)**)*
Fügen Sie ihren Name (1) und die E-Mail (2) für die E-Mail Benachrichtigungen bei Webhook Fehlern ein.
# Plugin Konfiguration
Öffnen Sie in Ihrem Webshopbackend *(www.IHRSHOPNAME.ch/admin)* das Verzeichnis «Installierte Plugins» (1) → «WawiPay Version 5» (2) dort anschliessend den Tab «WawiPay Grundeinstellungen» (3) und geben dort unter «Instanzname» (4) den Namensteil aus Ihrem WawiPay Plattformzugang z.B. https://www.**musterfirma**.wawipay.com ein und tragen Sie den «API Schlüssel», den Sie unter [https://photografix.atlassian.net/wiki/spaces/DOCPL/pages/2022047745/Shop5+Plugin+WawiPay#API-Integrationen-f%C3%BCr-Pluginzugang](https://photografix.atlassian.net/wiki/spaces/DOCPL/pages/2022047745/Shop5+Plugin+WawiPay#API-Integrationen-f%C3%BCr-Pluginzugang) erstellt haben und kopiert haben unter «API Secret» (5) ein, und klicken Sie anschliessend auf «Speichern» (6).
> ⚠️ Achtung, bitte nur den «musterfirma» Teil eingeben, nicht die ganze URL.
Anschliessend unter «Look & Feel:» (1) das gewünschte auswählen (kann im WawiPay unter «ADMIN» → «Einstellungen» → «Look & Feel» angepasst werden) und bei «Mehrere Einzelbilder bei Zahlungsartenauswahl:» (2) auf «Ja» setzen und anschliessend «Speichern» (3)
Anschliessend wechseln Sie in den Tab «Konfiguration» (1) und wählen dort alle im Shop gewünschten Zahlungsarten an (2) und klicken anschliessend auf «Zahlungsprovider abgleichen» (3)
so ist die Pluginkonfiguration abgeschlossen.
# Webshop Zahlungsarten
Bitte gehen Sie in Ihrem Webshopbackend *(www.IHRSHOPNAME.ch/admin)* in das Verzeichnis «Zahlungen» (1) → «Zahlungsarten» scrollen Sie nach ganz unten dort finden Sie die aktivierten Zahlungsarten *(mit «WawiPay» hintenangestellt)* (2) und klicken nacheinander auf «bearbeiten» (3) und führen den nächsten Schritt für jede Zahlungsart aus.
Geben Sie den Namen, welcher beim Zahlvorgang für den Kunden erscheinen soll, unter «Angezeigter Name» (1) ein.
> ⚠️ Beachten Sie bitte, dass der «Angezeigter Name» nicht schon in einer anderen Zahlart vorkommt (z.B. «Kreditkarte»), ansonsten passen Sie bitte diesen an.
Anschliessend fügen Sie die Bilder (nur Bildname mit Endung z.B. «bar.svg»), welche Sie angezeigt haben möchten unter «Bild-URL» (2) immer mit «;» getrennt.
> ⚠️ Damit mehrere Bilder mit «;» funktionieren, muss im Plugin unter «WaWiPay Grundeinstellungen» → «Mehrere Einzelbilder bei Zahlungsartenauswahl:» auf «Ja» eingestellt sein. Plugin Version **ab 5.3.9**
> ℹ️ Die Bilder finden Sie, wenn Sie via [FTP](https://elink.ch/ftp) auf Ihren Shop zugreifen im Ordner «**IHRSHOPHAUPTVERZEICHNIS/plugins/xv_wawipay/images/**»
Anschliessend wählen Sie den «Name der Gebühr» (3) und die «Sortiernummer» (4), welche die Reihenfolge auf der Zahlungsauswahlseite festlegt *(je höher die Zahl, desto weiter unten)* anschliessend noch den «Hinweistext» (5) der unter dem Bild erscheint.
## Zahlungszeitpunkt
> ⚠️ Achtung: Folgende Einstellungen gelten für die Plugin Version **ab 5.3.6**
Im JTL-Shop kann der Zeitpunkt der Zahlung konfiguriert werden. Hierbei handelt es sich um Standardfunktionen vom Shop. In einem JTL-Shop wird eine Bestellung erst erzeugt, wenn im Webshop die Abschlussseite aufgerufen wird und die Bestellnummer angezeigt wurde.
#### Zahlung vor Bestellabschluss: «Ja»
Bei «Zahlung vor Bestellabschluss» (6) wählen Sie «Ja» (Empfehlung). Wenn der Shop erst nach der erfolgreichen Zahlung eine Bestellung erzeugen soll.
**Vorteil:**
:check_mark: Es werden nur Bestellungen in die JTL-Wawi übertragen die vom Kunde erfolgreich bezahlt wurden. Somit wird das Risiko für betrügerische Bestellungen minimiert
:check_mark: Sollte eine Zahlung fehlschlagen oder abgebrochen werden, kann der Kunde im Shopkonto zur Bestellung navigieren und versuchen diese nochmals zu bezahlen. Bei erfolgreicher Zahlung wird diese in JTL-Wawi übertragen
**Nachteil:**
:cross_mark: Der Händler erfährt nie, dass eine Bestellung vom Kunde gemacht wurde, falls die Rückleitung an den Shop misslingt oder die Zahlung abgebrochen wird, somit kann auch kein Kunde automatisiert an eine Zahlung erinnert werden
#### Zahlung vor Bestellabschluss: «Nein»
Alternativ kann bei «Zahlung vor Bestellabschluss» (6) «Nein» ausgewählt werden, wenn der Kunde erst nach der erfolgreichen Bestellung bezahlen soll.
**Vorteil:**
:check_mark: Webshop-Bestellung wird erstellt und mit nächstem Webshopabgleich in die JTL-Wawi übertragen
:check_mark: Bestellungen werden immer in die Wawi übertragen, somit kann man als Händler den Kunden kontaktieren oder automatisiert an eine Zahlung erinnern falls diese beim Bestellvorgang abgebrochen wurde oder fehlgeschlagen ist. Dazu haben wir [hier](https://www.wawipay.io/de/dokumentation/haufige-fragen#automatisieren-nachfrage) eine Anleitung zusammengestellt
**Nachteil:**
:cross_mark: Wenn der Kunde eine Zahlung abbricht oder nicht ausführt, gibt es trotzdem eine Bestellung (im JTL-Wawi) jedoch keine Zahlung, was zu Mehraufwand führen kann
## Mindestbestellwert
Stellen Sie den «Mindestbestellwert» (7) auf «1» und klicken anschliessend auf «Speichern» (8).
> ⚠️ Beachten Sie bitte, dass der «Angezeigter Name» (1) mit dem Namen der Zahlungsart im WaWi unter «Zahlungen» → «Zahlungsarten» → «Name» übereinstimmt für alle Zahlungsarten in jeder Sprache.
> ℹ️ Bitte [dieses Kapitel](https://photografix.atlassian.net/wiki/spaces/DOCPL/pages/2022047745/Shop5+Plugin+WawiPay#Webshop-Zahlungsarten) für alle «WawiPay Zahlungsarten» wiederholen.
# Webshop Versandarten
Bitte gehen Sie in Ihrem Webshopbackend *(www.IHRSHOPNAME.ch/admin)* in das Verzeichnis «Versand» (1) → «Versandarten» und klicken bei der gewünschten Versandart auf das Icon «Bearbeiten» (2)
gehen Sie in den Bereich «AKZEPTIERTE ZAHLUNGSARTEN» (1) und wählen Sie dort alle «Zahlungsarten» (2) aus, welche Sie für diese Versandart aktivieren möchten und geben Sie *(wenn es Rechtlich erlaubt ist)* einen allfäligen «Aufpreis/Rabatt» (3) ein und klicken anschliessend ganz unten auf «Speichern» (4)
> ⚠️ Bitte speichern mit Klick auf «Versandart ändern» nicht vergessen.
> ⚠️ Damit die Zahlungsart nicht in den Artikelpositionen der Bestellbestätigung erscheint , bitte bei (3) **nie “0” oder “0.00” eintragen**, sondern “leer” lassen!
> ℹ️ Bitte [dieses Kapitel](https://photografix.atlassian.net/wiki/spaces/DOCPL/pages/2022047745/Shop5+Plugin+WawiPay#Webshop-Versandarten) für alle Versandarten wiederholen.
# Webshop Abschlussseite nach externer Bezahlung
Wechseln Sie nun in das Verzeichnis «DARSTELLUNG» (1) → «Standardansichten»(2) → «Bestellvorgang» (3) zu den Einstellungen für den «Bestellabschluss» (4). Wählen Sie unter «Abschlussseite nach externer Bezahlung» (5) → Ihre gewünschte Auswahl und «Speichern» (6) Sie die Einstellung.
# CSS Anpassung für Icons auf Zahlungsseite
Für JTL-Shop **«NOVA» Template** im Webshopbackend unter *(www.IHRSHOPNAME.ch/admin)* das Verzeichnis «Einstellungen» → «Templates» → beim Template mit «STATUS» «Aktiviert» auf den Button «Einstellungen» klicken, anschliessend unter «Benutzerdefiniertes CSS, Sass oder Scss:» folgenden Code einfügen.
```html
/* Zahlungsarten Icon */
#fieldset-payment img {
height: 45px;
}
```
Für JTL-Shop **«SALEPIX" Templates** *(unter "IHRSHOPHAUPTVERZEICHNIS/templates/TEMPLATENAME-CHILD/themes/custom/custom.css) *folgenden Code einfügen.
```
/* Zahlungsarten Icon */
#fieldset-payment .img-sm {
width: auto;
max-width: 100% !important;
height: 45px;
}
```