# Webseiten-Integration

Sobald Du in Payrexx eine [Page](/merchant/payrexx-administration/tools/pages.md) erstellt hast, besteht die Möglichkeit, diese in Deine bestehende Webseite zu integrieren.

## Erste Schritte

{% hint style="info" %}
Um zu beginnen, logge Dich bitte in Dein [Konto](https://login.payrexx.com/) bei Payrexx ein.
{% endhint %}

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

<div align="left"><figure><img src="/files/eSVWUopTwHiQQi0ILMPO" alt=""><figcaption><p>Erstellte Pages im Händler-Backend von Payrexx</p></figcaption></figure></div>

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

<figure><img src="/files/suiqQyV24CrEsFLqsN0i" alt=""><figcaption><p>Editieren einer bestehenden Page in Payrexx</p></figcaption></figure>

## Konfiguration

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

<figure><img src="/files/n7hglg8lSs1uud1Et3mi" alt=""><figcaption><p>Einbinden einer Payrexx-Page in die eigene Webseite</p></figcaption></figure>

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](#einbindung-als-button), als [Link](#einbindung-als-link) oder als [iFrame](#einbindung-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:

<div align="left"><figure><img src="/files/IusOCkkF8Kg6nW14egaj" alt=""><figcaption><p>Einbindung der Page als Button</p></figcaption></figure></div>

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:

<div align="left"><figure><img src="/files/woHdTSXZql0aGLgSlajM" alt=""><figcaption><p>Einbindung der Page als Link</p></figcaption></figure></div>

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:

<div align="left"><figure><img src="/files/dZ4bzZ0fqkWrGNpAXaCE" alt="" width="297"><figcaption><p>Einbindung der Page als Link</p></figcaption></figure></div>

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](/merchant/bezahldienste/payrexx-pay/zahlungsmittel/postfinance-pay.md), [REKA](/merchant/bezahldienste/payrexx-pay/zahlungsmittel/reka.md) und [Coinbase](/merchant/bezahldienste/externe-zahlungsanbieter/wallets-and-alternative/coinbase.md) 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.

{% hint style="danger" %}
Bitte beachtet, dass Apple Pay nicht angezeigt werden kann, wenn die Bezahlseite mittels iFrame eingebunden wird.
{% endhint %}

## 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:

{% embed url="<https://docs.payrexx.com/merchant/payrexx-administration/tools/parameter>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.payrexx.com/merchant/payrexx-administration/tools/pages/webseiten-integration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.