Modal Window

The modal window allows you to display a zahls.ch payment page within a white modal window. All you need to do is copy the code snippets onto your website.

Integration

Examples

Here you find two examples for zahls.ch modal window integrations. To enable the integration, two files must be included to the existing html code:

• jQuery: (e.g. from 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>

Payment Page from 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 of the payment instance
• PAYMENT_TEMPLATE_ID - Page ID of a payment Page: Pages Tool

Payment Page with 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 of the payment instance

More integrations with Tools

Multiple Pay Buttons

If you have multiple buttons where you want to initialize the zahls.ch modal, you need to change the default code as per the following instructions:

Replace the following attribute in all links/buttons:
id="btn-zahls-modal" with class="btn-zahls-modal"

and replace the javascript code with

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

This initializes the zahls.ch Modal on all links/buttons with the class "btn-zahls-modal".

Advanced

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

If you want to hide the entire contact details section of the payment template then you can add the parameter hideObjects

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

If you want to display a new page after a successful transaction, for example a "Thank you" message, you can add your own custom hidden-function.

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

If you need to validate a form before opening the zahls.ch modal but you have initialized the zahls.ch modal on the submit button, you can add a custom show-function.

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