Modal-Fenster

Mit dem Modal-Fenster zeigst du eine zahls.ch-Zahlungsseite in einem weissen Modal an. Kopiere die Code-Snippets auf deine Website.

Integration

Beispiele

Zwei Beispiele für zahls.ch-Modal-Integrationen. Für die Einbindung müssen zwei Dateien im HTML eingebunden werden:

• jQuery: (z. B. vom CDN https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js)
• zahls.ch Modal JS: https://media.zahls.ch/modal/v1/modal.min.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://media.zahls.ch/modal/v1/modal.min.js"></script>

Zahlungsseite aus dem Pages-Tool

<a class="zahls-modal-window" href="#"
    data-href="https://{INSTANCE_NAME}.zahls.ch/pay?tid={PAYMENT_TEMPLATE_ID}">
    Open modal window
</a>
<script type="text/javascript">
    jQuery(".zahls-modal-window").zahlsModal();
</script>

• INSTANCE_NAME – Name der Zahlungsinstanz
• PAYMENT_TEMPLATE_ID – Seiten-ID einer Zahlungsseite: Pages-Tool

Zahlungsseite mit Terminal

<a class="zahls-modal-window" href="#"
    data-href="https://{INSTANCE_NAME}.zahls.ch/vpos">
    Open modal window
</a>
<script type="text/javascript">
    jQuery(".zahls-modal-window").zahlsModal();
</script>

• INSTANCE_NAME – Name der Zahlungsinstanz

Weitere Integrationen mit Tools

Mehrere Pay-Buttons

Bei mehreren Buttons für das zahls.ch-Modal passt du den Standardcode wie folgt an:

Ersetze in allen Links/Buttons das Attribut:
id="btn-zahls-modal" durch class="btn-zahls-modal"

und ersetze den JavaScript-Code durch

jQuery(".btn-zahls-modal").each(function() {    
    jQuery(this).zahlsModal();
});

Damit wird das zahls.ch-Modal auf allen Links/Buttons mit der Klasse «btn-zahls-modal» initialisiert.

Erweitert

Parameter	Type	Default
hideObjects	Array	[]
show	Function	function(e)
shown	Function	function()
hide	Function	function(transaction)
hidden	Function	function(transaction)

Willst du den gesamten Kontaktbereich der Zahlungsvorlage ausblenden, kannst du den Parameter hideObjects setzen:

jQuery(".zahls-modal-window").zahlsModal({
    hideObjects: ['#contact-details', '.contact']
});

Nach einer erfolgreichen Transaktion soll eine neue Seite erscheinen, z. B. eine Danke-Seite – dann kannst du eine eigene hidden-Funktion definieren:

jQuery(".zahls-modal-window").zahlsModal({
    hidden: function(transaction) {
        location.href = "http://mywebsite.com/thank-you-for-your-payment";
    }
});

Du musst ein Formular validieren, bevor das zahls.ch-Modal öffnet, hast das Modal aber am Submit-Button initialisiert – dann kannst du eine eigene show-Funktion setzen:

jQuery(".zahls-modal-window").zahlsModal({
    show: function(e) {
        if (validateMyForm()) {
            return true;
        }
        return e.preventDefault();
    }
});