Website (modal window)

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

Necessary resources

There are two files which need to be included into your existing html code in the section.

<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.payzzter.com/modal/v1/modal.min.js"></script>

Link parameters

You can pass GET parameters in the url to predefine the field values.
Example: https://demo.payzzter.com/?invoice_number=987654321&invoice_amount=450.00&invoice_currency=1

FieldnameParameter
Purposeinvoice_number
Amountinvoice_amount
Currencyinvoice_currency
Salutationcontact_title
First namecontact_forename
Surnamecontact_surname
Companycontact_company
Streetcontact_street
Postcodecontact_postcode
Placecontact_place
Countrycontact_country
Telephonecontact_phone
Emailcontact_email

Your Payzzter instance is able to generate all the GET parameters for you. This option can be found on the edit form on the payment page within your Payzzter administration.

Example code

<a class="payzzter-modal-window" href="#"
    data-href="https://example.payzzter.com/pay?tid=PAYMENT-TEMPLATE-ID">
    Open modal window
</a>
<script type="text/javascript">
    jQuery(".payzzter-modal-window").payzzterModal();
</script>

🚧

Replacements

  • Replace example.payzzter.com with the URL of your Payzzter installation
  • Replace PAYMENT-TEMPLATE-ID by the ID of the payment template you'd like to display

Advanced options

ParameterTypeDefault
hideObjectsArray[]
showFunctionfunction(e) {}
shownFunctionfunction() {}
hideFunctionfunction(transaction) {}
hiddenFunctionfunction(transaction) {}

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

jQuery(".payzzter-modal-window").payzzterModal({
	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(".payzzter-modal-window").payzzterModal({
    hidden: function(transaction) {
        location.href = "http://mywebsite.com/thank-you-for-your-payment";
    }
});

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

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