Website (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.

Necessary resources

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

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script type="text/javascript" src="https://media.payrexx.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.payrexx.com/?invoice_number=987654321&invoice_amount=450.00&invoice_currency=1

Fieldname
Parameter

Purpose

invoice_number

Amount

invoice_amount

Currency

invoice_currency

Salutation

contact_title

First name

contact_forename

Surname

contact_surname

Company

contact_company

Street

contact_street

Postcode

contact_postcode

Place

contact_place

Country

contact_country

Telephone

contact_phone

Email

contact_email

Your Payrexx 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 Payrexx administration.

Example code

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

Replacements

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

Advanced options

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();
    }
});

Website (modal window)