---
title: "Shop4 Plugin WawiPay"
canonical: "https://doc.wawi.ch/space/DOCPL/1731100673/Shop4%20Plugin%20WawiPay"
format: markdown
---
---
# Installation
Bitte installieren Sie das Plugin gemäss Anleitung unter [elink.ch/plugin4](https://elink.ch/plugin4)
# 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)
## 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 speichern Sie den Webhook indem Sie auf «Hinzufügen» (6) 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)*].
> ℹ️ Sollten Sie mehrere Webshop’s anbinden wollen, erstellen Sie für jeden Webshop einen eigenen «Webhook» *(wiederholen Sie dazu alle Schritte in diesem Kapitel).*
## API Integrationen für Pluginzugang
Gehen Sie auf den Menüpunkt «API & 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)*
# Plugin Konfiguration
Öffnen Sie in Ihrem Webshopbackend *(www.IHRSHOPNAME.ch/admin)* das Verzeichnis «Plugins» (1) → «WawiPay» dort anschliessend den Tab «WawiPay Grundeinstellungen» (2) und geben dort unter «Instanzname» (3) den Namensteil aus Ihrem WawiPay Plattformzugang z.B. www.**musterfirma**.wawipay.com ein und tragen Sie den «API Schlüssel», den Sie im vorangehenden Schritt kopiert haben unter «API Secret» (4) ein, und klicken Sie anschliessend auf «Speichern» (5). Nur für «WawiPay Advanced» Kunden, bitte öffnen Sie nochmals den Tab «WawiPay Grundeinstellungen» (2) und wählen Sie unter «Look & Feel» (6) das gewünschte Profil aus und klicken Sie anschliessend auf «Speichern» (5).
> ⚠️ Achtung, bitte nur den «musterfirma» Teil eingeben, nicht die ganze URL.
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 «Storefront» (1) → «Zahlungsarten» → «Übersicht» scrollen Sie nach ganz unten dort finden Sie die aktivierten Zahlungsarten *(mit hellgrau «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 wählen Sie das Bild, welches Sie angezeigt haben möchten unter «Bild-URL» (2)
> ℹ️ Die Bilder finden Sie wenn Sie via [FTP](https://elink.ch/ftp) auf Ihren Shop zugreifen im Ordner «**IHRSHOPHAUPTVERZEICHNIS/includes/plugins/xv_wawipay/images/**»
Anschliessend wählen Sie den «Gebührname» (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
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: «Nein»** **(Standard)
Bei «Zahlung vor Bestellabschluss» (6) wählen Sie «Nein» (Empfehlung), wenn der Kunde erst nach der erfolgreichen Bestellung bezahlen soll.
Vorteil:
:check_mark: Webshop-Bestellung wird sofort erstellt und ans JTL-Wawi übertragen
:check_mark: Dies verhindert, dass Sie Zahlungen ohne Bestellungen erhalten
:check_mark: Die Webshopbestellnummer in der WawiPay-Transaktion wird als «Referenz ID» eingetragen (ist also identisch)
Nachteil:
:cross_mark: Wenn Kunden eine Zahlung abbricht oder nicht ausführen, gibt es trotzdem eine Bestellung (im JTL-Wawi) jedoch keine Zahlung. Dafür erfährt der Händler das es eine Bestellung gibt, und könnte nachfassen. Um den Kunden automatisiert an eine Zahlung zu erinnern, haben wir [hier](https://www.wawipay.io/de/dokumentation/haufige-fragen#automatisieren-nachfrage) noch einen Tipp zusammengestellt.
#### Zahlung vor Bestellabschluss: «JA»
Alternativ wählt man bei «Zahlung vor Bestellabschluss» (6) «JA»** **(nicht Empfohlen). Wenn der Shop erst nach der erfolgreichen Zahlung eine Bestellung erzeugen soll.
Vorteil:
:check_mark: Sie bekommen nur noch Bestellungen die vom Kunde erfolgreich bezahlt wurden
Nachteil:
:cross_mark: Der Händler erfährt nie, wenn eine Bestellung vom Kunde aufgeführt wurde, jedoch die Rückleitung an den Shop misslingt oder die Zahlung abgebrochen wurde
:cross_mark: Wenn der Kunde bestellt, bezahlt, jedoch nicht mehr auf den Webshop zurück kommt, liegt eine Zahlung vor, es gibt jedoch keine Shop-Bestellung dazu. Dies kann vorkommen, wenn ein Kunde nach einer Zahlung zum Beispiel den Browser einfach «schliesst» statt zum Webshop zurückzukehren
:cross_mark: Es wird eine fiktive, zufällige «Referenz ID» in der Transaktion eingetragen (da ja noch keine Bestellung im Webshop vorhanden ist und somit noch keine Bestellnummer existiert)
## 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 diesen Schritt für alle Zahlungsarten wiederholen
# Webshop Versandarten
Bitte gehen Sie in Ihrem Webshopbackend *(www.IHRSHOPNAME.ch/admin)* in das Verzeichnis «Storefront» (1) → «Kaufabwicklung» → «Versandarten» und klicken bei der gewünschten Versandart auf «Bearbeiten» (2)
wählen Sie dort alle «Zahlungsarten» (1) aus, welche Sie für diese Versandart aktivieren möchten und geben Sie *(wenn es Rechtlich erlaubt ist)* einen allfälligen «Aufpreis/Rabatt» (2) ein und klicken anschliessend ganz unten auf «Versandart ändern»
> ⚠️ Bitte speichern mit klick auf «Versandart ändern» nicht vergessen.
> ℹ️ Diesen Schritt bitte für alle Versandarten wiederholen
## Webshop Abschlussseite nach externer Bezahlung
Wechseln Sie nun über «Storefront» (1) → «Kaufabwicklung» → «Warenkorb/Kaufabwicklung» (2) zu den Einstellungen für den «Bestellabschluss». Wählen Sie unter «Abschlussseite nach externer Bezahlung» (3) → Ihre gewünschte Auswahl und «Speichern» (4) Sie die Einstellung.
# CSS Anpassung für Icons auf Zahlungsseite
Für JTL-Shop «EVO» Template:
```css
/* Zahlungsarten Icon */
#fieldset-payment img {
max-width: 100%;
}
```
Für JTL-Shop "SALEPIX" Templates unter "templates/TEMPLATENAME-CHILD/themes/mytheme/mytheme.css
```css
/* Zahlungsarten Icon */
#fieldset-payment .img-sm {
width: auto;
max-width: 100% !important;
height: 45px;
}
```