Skip to content

    Website (modal window)

    The modal window allows you to display a Nets Easy Paylink payment page within a white modal window. All you need to do, is to copy the code snippets onto your website.

    Coding: Some

    Necessary ressources

    There are two files which need to be included into your existing html code:

    Code snippet

    <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.nets-pay.link/modal/v1/modal.min.js"></script>

    You can pass GET parameters as part of the URL to predefine the field values.
    Example: https://demo.nets-pay.link/invoice_number=987654321&invoice_amount=450.00&invoice_currency=1]

    FieldnameParameter
    Purposeinvoice_number
    Amountinvoice_amount
    Currencyinvoice_currency
    Salutationcontact_title
    First namecontact_forename
    Surnamecontact_surname
    Companycontact_company
    Streetcontact_street
    Postcodecontact_postcode
    Placecontact_place
    Countrycontact_country
    Telephonecontact_phone
    Emailcontact_email

    Your Nets Easy Paylink instance is able to generate all the GET parameters for you. This option can be found on the edit form on the payment page within your Nets Easy Paylink administration.

    Example code

    Code snippet

    sample.html
    <a class="nets-modal-window" href="#"
        data-href="https://example.nets-pay.link/pay?tid=PAYMENT-TEMPLATE-ID">
        Open modal window
    </a>
    <script type="text/javascript">
        jQuery(".nets-modal-window").netsModal();
    </script>

    Replacements:

    • Replace example.nets-pay.link with the URL of your Nets Easy Paylink installation
    • Replace PAYMENT-TEMPLATE-ID with the ID of the payment template you'd like to display

    Advanced options

    ParameterTypeDefault
    hideObjectsArray[]
    showFunctionfunction(e) {}
    shownFunctionfunction(e) {}
    hideFunctionfunction(transaction) {}
    hiddenFunctionfunction(transaction) {}

    You can add the hideObjects parameter, if you want to hide the entire contact details section of the payment template.

    Code snippet

    jQuery(".nets-modal-window").netsModal({
        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.

    Code snippet

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

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

    Code snippet

    jQuery(".nets-modal-window").netsModal({
        show: function(e) {
            if (validateMyForm()) {
                return true;
            }
            return e.preventDefault();
        }
    });