Developer
DocsDeveloperPlatformTicket
  • Overview
  • Guides
    • Accept Payment
      • Payment Types
        • Pre Authorization
        • Tokenization
        • Subscription
      • Build Your Gateway
    • Webhook
      • Transaction
      • Subscription
      • Payout
    • Embedding
      • iFrame
      • Modal Window
      • Mobile Apps
      • Integration Parameter
  • General Information
    • Payment Method
      • Static QR Code
    • Payment Provider
    • Objects
      • Metadata
      • Invoice
      • Contact
  • Testing
  • Plugin Development
  • More Documentations
  • Merchant
  • API Reference
Powered by GitBook
On this page
  • Integration
  • Examples
  • Multiple Pay Buttons
  • Advanced
  1. Guides
  2. Embedding

Modal Window

PreviousiFrameNextMobile Apps

Last updated 6 months ago

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.

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.

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 )

  • Payrexx Modal JS:

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

<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

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

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

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

The Payrexx modal library and jQuery should only be present once in your HTML code.

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

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();
    }
});
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js
https://media.payrexx.com/modal/v1/modal.min.js
Pages Tool
LogoTools | ENGLISH | Docs
More integrations with Tools