Webseiten-Integration

Nachdem in Payrexx eine "Page" erstellt wurde, besteht die Möglichkeit, sie in eine bestehende Webseite zu integrieren. Der vorliegende Artikel zeigt, wie es funktioniert.

Sobald Du in Payrexx eine Page erstellt hast, besteht die Möglichkeit, diese in Deine bestehende Webseite zu integrieren.

Erste Schritte

Um zu beginnen, logge Dich bitte in Dein Konto bei Payrexx ein.

Navigiere im Händler-Backend von Payrexx zu Pages > Übersicht:

Erstellte Pages im Händler-Backend von Payrexx

Klicke bei der gewünschten Page auf das "Editieren"-Symbol, um mit der Einbindung in die Webseite zu beginnen:

Editieren einer bestehenden Page in Payrexx

Konfiguration

Klicke als erstes auf den Button "In Webseite einbinden":

Einbinden einer Payrexx-Page in die eigene Webseite

Es öffnet sich ein neues Fenster, das in zwei Bereiche unterteilt ist:

• Im linken Bereich der Fensters werden die Einstellungen vorgenommen.

• Im rechten Bereich des Fensters werden die Auswirkungen der Einstellungen in Echtzeit als Vorschau angezeigt.

Für die Einbindung in die Webseite gibt es drei Varianten: Die Page kann als Button, als Link oder als iFrame eingebunden werden. Je nachdem, für welche Variante Du Dich entscheidest, werden andere Konfigurationsmöglichkeiten angezeigt.

Einbindung als Button

Für die Einbindung der Page als Button stehen die folgenden Konfigurationsmöglichkeiten zur Verfügung:

Einbindung der Page als Button

1. Aktion bei Klick: Lege fest, was passieren soll, wenn der Kunde auf den Button klickt, der in Deine Webseite eingebunden wird: Soll ich ein modales Fenster öffnen oder soll eine Weiterleitung auf eine andere Seite erfolgen?

2. Button-Text: Definiere, mit welchem Text der Button beschriftet sein soll. Zur Auswahl stehen "Bezahlen", "Spenden" oder die Eingabe eines benutzerdefinierten Texts.

3. Sprache für Button-Text: Definiere die Sprache, in welcher der Text (z. B. "Bezahlen" oder "Spenden") angezeigt wird.

4. Button-Stil: Nimm verschiedene Einstellungen vor, um die Darstellung des Buttons festzulegen.

5. Code kopieren: Wenn Du sämtliche Einstellungen vorgenommen hast, wird der HTML-Code angezeigt, der die gemachten Einstellungen beinhaltet und in die Webseite eingebunden werden kann.

Einbindung als Link

Für die Einbindung der Page als Link stehen die folgenden Konfigurationsmöglichkeiten zur Verfügung:

Einbindung der Page als Link

1. Aktion bei Klick: Lege fest, was passieren soll, wenn der Kunde auf den Button klickt, der in Deine Webseite eingebunden wird: Soll ich ein modales Fenster öffnen oder soll eine Weiterleitung auf eine andere Seite erfolgen?

2. Button-Text: Definiere, mit welchem Text der Button beschriftet sein soll. Zur Auswahl stehen "Bezahlen", "Spenden" oder die Eingabe eines benutzerdefinierten Texts.

3. Sprache für Button-Text: Definiere die Sprache, in welcher der Text (z. B. "Bezahlen" oder "Spenden") angezeigt wird.

4. Code kopieren: Wenn Du sämtliche Einstellungen vorgenommen hast, wird der HTML-Code angezeigt, der die gemachten Einstellungen beinhaltet und in die Webseite eingebunden werden kann.

Einbindung als iFrame

Die dritte Möglichkeit zur Einbindung einer Page in die eigene Webseite ist die Nutzung eines iFrames, was auch als "Fenster im Fenster" beschrieben werden kann. Für die Einbindung als iFrame stehen keine Konfigurationsmöglichkeiten zur Verfügung:

Einbindung der Page als Link

1. Mit diesem HTML-Code kann das iFrame in die eigene Webseite eingebunden werden.

Eingeschränkte Anzeige gewisser Zahlungsarten

Wenn Du die Zahlungsseite mittels iFrame einbindest, werden die Zahlungsarten PostFinance Pay, REKA und Coinbase nicht angezeigt.

Um dies zu umgehen, füge der iFrame-URL einfach den String breakIframe=1 hinzu. Dadurch wird der Kunde aus dem iFrame hinausgeleitet, wo er die Zahlung ganz normal durchführen kann.

Bitte beachtet, dass Apple Pay nicht angezeigt werden kann, wenn die Bezahlseite mittels iFrame eingebunden wird.

HTML-Code in Webseite einbetten

Um die Einbindung der Payrexx-Page in die eigene Webseite abzuschliessen, füge den kopierten HTML-Code an der Stelle in Deine Webseite ein, an der die Page angezeigt werden soll.

Zusätzliche Übergabeparameter einstellen

Es besteht die Möglichkeit, zusätzliche Parameter an die Webseite zu übergeben, zum Beispiel einen vordefinierten Betrag. Im folgenden Beispiel beträgt er CHF 20.00:

https://INSTANZ.payrexx.com/pay?tid=4152bd78&invoice_amount=20

Weitere Informationen zu URL-Parametern findest Du im folgenden Artikel:

Parameter | Docsdocs.payrexx.com