Website (modal window)

The modal window allows you to display a VR pay secure payment page within a white modal window.
All you need to do is copy the code snippets into your website.

Necessary resources

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

• jQuery: (e.g. from CDN) https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
• VR pay secure Modal JS: https://media.vr-pay-secure.de/modal/v1/modal.min.js

HTML

<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.vr-pay-secure.de/modal/v1/modal.min.js"></script>

Link parameters

You can pass GET parameters in the url to predefine the field values.
Example: https://demo.vr-pay-secure.de/?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 VR pay secure instance is able to generate all the GET parameters for you.
This option can be found on the edit form in the payment page within your VR pay secure administration.

Example code

HTML

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

🚧

Replacements

• Replace example.vr-pay-secure.de with the URL of your VR pay secure 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

JavaScript

jQuery(".vr-pay-secure-modal-window").vrpaysecureModal({
	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.

JavaScript

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

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

JavaScript

jQuery(".vr-pay-secure-modal-window").vrpaysecureModal({
	show: function(e) {
    	if (validateMyForm()) {
        	return true;
        }
        return e.preventDefault();
    }
});