# 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.

{% hint style="warning" %}
Some payment methods may not allow the integration in a Modal Window due to security issues. These payment methods include *PostFinance Pay, PayPal* and *Coinbase*.

*PostFinance* is disabled in Modal Windows if the client device disallows 3rd party cookies. This is the standard behaviour for iOS and MacOS clients.
{% endhint %}

## Integration

### Examples

Here you find two examples for Payrexx 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>)
* Payrexx Modal JS: <https://media.payrexx.com/modal/v1/modal.min.js>

```markup
<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>
```

{% tabs %}
{% tab title="Payment Page from Pages Tool" %}

```javascript
<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>
```

* **INSTANCE\_NAME** - Name of the payment instance
* **PAYMENT\_TEMPLATE\_ID** - Page ID of a payment Page: [Pages Tool](https://docs.payrexx.com/merchant/payrexx-administration/tools/pages)
  {% endtab %}

{% tab title="Payment Page with Terminal" %}

```javascript
<a class="payrexx-modal-window" href="#"
    data-href="https://{INSTANCE_NAME}.payrexx.com/vpos">
    Open modal window
</a>
<script type="text/javascript">
    jQuery(".payrexx-modal-window").payrexxModal();
</script>
```

* **INSTANCE\_NAME** - Name of the payment instance
  {% endtab %}
  {% endtabs %}

{% embed url="<https://docs.payrexx.com/merchant/v/english/account/tools>" %}
More integrations with Tools
{% endembed %}

### 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

```javascript
jQuery(".btn-payrexx-modal").each(function() {    
    jQuery(this).payrexxModal();
});
```

This initializes the Payrexx Modal on all links/buttons with the class "*btn-payrexx-modal*".

{% hint style="info" %}
The Payrexx modal library and jQuery should only be present once in your HTML code.
{% endhint %}

### 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**

```javascript
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.

```javascript
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.

```javascript
jQuery(".payrexx-modal-window").payrexxModal({
    show: function(e) {
        if (validateMyForm()) {
            return true;
        }
        return e.preventDefault();
    }
});
```