Website (modal window)

Website (modal window)

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

Necessary resources

There are two files which need to be included into your existing html code in the section.

HTTP
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
    </script>
    <script type="text/javascript" src="https://media.okepay.info/modal/v1/modal.min.js"></script>

 

You can pass GET parameters in the url to predefine the field values. Example: https://demo.okepay.info/?invoice_number=987654321&invoice_amount=450.00&invoice_currency=1

Fieldname Parameters
Purpose invoice_number
Amount invoice_amount
Currency invoice_currency
Salutation contact_title
First name contact_forename
Surname contact_surname
Company contact_company
Street contact_street
Postcode contact_postcode
Place contact_place
Country contact_country
Telephone contact_phone
Email contact_email

Your okepay 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 okepay administration.

 

HTTP
    <a class="okepay-modal-window" href="#"
        data-href="https://example.okepay.info/pay?tid=PAYMENT-TEMPLATE-ID">
        Open modal window
    </a>
    <script type="text/javascript">
        jQuery(".okepay-modal-window").okepayModal();
    </script>

Replacements

Replace example.okepay.biz with the URL of your okepay installation

Replace PAYMENT-TEMPLATE-ID by the ID of the payment template you'd like to display.

Advanced options

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(".okepay-modal-window").okepayModal({
        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(".okepay-modal-window").okepayModal({
        hidden: function(transaction) {
            location.href = "http://mywebsite.com/thank-you-for-your-payment";
        }
    });

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

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

 

Next to read:
Web shops (plugins)