Links

Modal Window

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

Integration

Example

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.payrexx.com/modal/v1/modal.min.js"></script>
<a class="payrexx-modal-window" href="#"
data-href="https://{INSTANCE_NAME}.payrexx.com/pay?tid={PAYMENT_TEMPLATE_ID}">
Open modal window
</a>
<script type="text/javascript">
jQuery(".payrexx-modal-window").payrexxModal();
</script>

Multiple Pay Buttons

If you have multiple buttons where you want to initialize the Payrexx modal, you need to change the default code as per the following instructions:
Replace the following attribute in all links/buttons: id="btn-payrexx-modal" with class="btn-payrexx-modal"
and replace the javascript code with
jQuery(".btn-payrexx-modal").each(function() {
jQuery(this).payrexxModal();
});
This initializes the Payrexx Modal on all links/buttons with the class "btn-payrexx-modal".
The Payrexx modal library and jQuery should only be present once in your HTML code.

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(".payrexx-modal-window").payrexxModal({
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(".payrexx-modal-window").payrexxModal({
hidden: function(transaction) {
location.href = "http://mywebsite.com/thank-you-for-your-payment";
}
});
If you need to validate a form before opening the payrexx modal but you have initialized the payrexx modal on the submit button, you can add a custom show-function.
jQuery(".payrexx-modal-window").payrexxModal({
show: function(e) {
if (validateMyForm()) {
return true;
}
return e.preventDefault();
}
});
Last modified 10mo ago