> For the complete documentation index, see [llms.txt](https://docs.payrexx.com/developer/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.payrexx.com/developer/guides/embedding/modal-window.md).

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.payrexx.com/developer/guides/embedding/modal-window.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.