# iFrame

The iFrame integration allows you to display a Payrexx tool within your website. 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 an iFrame due to security issues. These payment methods include PostFinance Pay, Reka Pay, PayPal or Coinbase.

However, if you still want them to be displayed, this can be achieved by modifying the URL. In this case, the external payment page will open in a new browser tab.

Required change: Append the GET Parameter `&breakIframe=true` to the end of the URL.
{% endhint %}

{% hint style="info" %}
Google Pay will only work with the `attribute allow="payment *"`!
{% endhint %}

## Integration

### Examples

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

```html
<iframe
    src="https://{INSTANCE_NAME}.payrexx.com/pay?tid={PAYMENT_TEMPLATE_ID}"
    width="530"
    height="700"
    allow="payment *">
</iframe> 
```

* **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" %}

```html
<iframe
    src="https://{INSTANCE_NAME}.payrexx.com/vpos"
    width="530"
    height="700"
    allow="payment *">
</iframe> 
```

* **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 %}

### Advanced

An embedded Payrexx-iFrame sends messages to the page. These messages can be caught and processed. The following example shows how the messages can be caught.

```javascript
var iFrame = jQuery('iframe');

var postMessage = function(e) {
  if (typeof e.data === 'string') {
    try {
      var data = JSON.parse(e.data);
    } catch (e) {}
    if (data && data.payrexx) {
      jQuery.each(data.payrexx, function(name, value) {
        switch (name) {
          // implement functions here
        }
      });
    }
  }
};

iFrame.on('load', function() {
        jQuery(this)[0].contentWindow.postMessage(JSON.stringify({origin: window.location.origin}), iFrame.attr('src'));
});

window.addEventListener('message', postMessage, false);
```

There are four types of messages:

* *height*: Used to dynamically set the height of the iFrame so that there is no need to scroll inside the iFrame. You should not set the param **appview** if you want a dynamic height!
* *top*: If you have the dynamic height functionality implemented, you probably need to implement the scroll functionality to have the page scrolled if necessary. (e.g. on "Add to cart" button or on "Go to checkout").
* *transaction*: For all the transaction data, like the status, you can receive the transaction object.
* *closeModal*: Handle the iFrame close event. The value contains the redirect URL which you can use to lead the customer from the page with the iFrame to the according page. The iFrame is not allowed to make redirections on your site, therefore you need execute this redirection yourself.

Here you go with a full code example:

```javascript
var iFrame = jQuery('iframe');
var transaction = null;
var lastPostMessageHeight = 0;

var updateIframeHeight = function() {
  var height = lastPostMessageHeight;
    
  // This can be changed individually.
  // Currently the full height is only applied for big displays (> 590px in width)
  if (window.innerWidth <= 590) {
    iFrame.css('height', '100%');
  } else if (height) {
    iFrame.css('height', height + 'px');
  }
};

var scrollPage = function(offset) {
  var positionToScrollTo = iFrame.position().top + offset;
  jQuery('body, html').animate({scrollTop: positionToScrollTo}, 1000, 'linear', function() {
    jQuery(window).trigger('scroll')
  });
};

var postMessage = function(e) {
  if (typeof e.data === 'string') {
    try {
      var data = JSON.parse(e.data);
    } catch (e) {}
    if (data && data.payrexx) {
      jQuery.each(data.payrexx, function(name, value) {
        switch (name) {
          // Adjust the height of the iFrame
          case 'height':
            lastPostMessageHeight = parseInt(value);
            updateIframeHeight();
            break;
          // Scroll the page to a given point
          case 'top':
            scrollPage(parseInt(value));
            break;
          // Retrieve the transaction
          case 'transaction':
            if (typeof value === 'object') {
              transaction = value;
            }
            break;
          // Redirect from page with iFrame to given URL
          case 'closeModal':
            window.location.href = value;
            break;
        }
      });
    }
  }
};

window.addEventListener('message', postMessage, false);

iFrame.on('load', function() {
  jQuery(this)[0].contentWindow.postMessage(JSON.stringify({origin: window.location.origin}), iFrame.attr('src'));
  jQuery(window).resize(updateIframeHeight);
  updateIframeHeight();
});

var t;
jQuery(window).scroll(function(event) {
  window.clearTimeout(t);
  t = window.setTimeout(function() {
    iFrame[0].contentWindow.postMessage(JSON.stringify({scrollTopShoppingCart: jQuery(window).scrollTop() - iFrame.position().top}), iFrame.attr('src'));
  }, 100);
});
```


---

# Agent Instructions: 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:

```
GET https://docs.payrexx.com/developer/guides/embedding/iframe.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.