Hosted pages

Creating scheme compliant payment pages can be quite a challenge. For example, it is important to ensure a correct workflow and to maintain up-to-date legal texts. Both factors vary from payment scheme to payment scheme, and without the required know-how, creating a user-friendly checkout page can prove to be a daunting task.

To take this work off the hands of merchants and payment service providers, We have developed a fast, efficient and simple way to host a checkout page on demand to ensure an optimal payment experience.

The hosted page can be configured individually for each merchant to execute the appropriate risk checks.

Hosted page flow

Creating a mandate using a hosted page is very simple. The implementation can be summarized into the following 4 steps:

1. First off, you will have to include sepaExpress.js in the HTML document of your checkout page.
2. Next, initialize the JavaScript object sepaExpress and pass the hostedPageId received in the response as parameter to create a HostedPage of type=createMandate.
   Note: Use the approvalBy parameter to choose how you want your mandate to be approved. (E.g.: click, sms, email, or ais). The HostedPage Wizard will then act accordingly and collect any missing information from the user for you.
3. Then subscribe to the sepaExpress.finish() and sepaExpress.error() event handlers.
   (If you wish to be notified when the javascript is loaded and ready you can optionally subscribe to the sepaExpress.ready() eventhandler)
4. Based on the feedback from the handlers, you can now decide how to proceed. A common approach would be to redirect the customer to a URL if the process was successful or alternatively to an error page if something went wrong.

Note: The type of message object in the finish() and error() handlers are different. You can find their properties in the commented out code in the following example:

<div id="sepa-express-container"></div>

        <!-- Content loading -->
        <script src="https://sepaexpress-prod-fx.azurewebsites.net/sepaExpress.js"></script>


        <!-- Init and callback handling -->
        <script>
            /* Insert HostedPageId here: */
            sepaExpress.init('226fad210933875d97af876e4d98ed19')

            sepaExpress.finish(function (message) {
                console.log("response: ", message);
                /*  
                    message: { 
                    hostedPageId: string,
                    mandateId: string,
                    customerId: string,
                    bankAccountId: string,
                    merchantId: string,
                    connectorId: string,
                    reference: string,
                    approvalDate: string,
                }*/
            });

            sepaExpress.error(function (message) {
                console.log("response: ", message);
                /*  
                    message: { 
                    hostedPageId: string,
                    success: boolean,
                    reasonCode: string,
                    message: string,             
                    action: string,             
                    bestPractice: string,             
                    cause: string,             
                    info: string,             
                    token: string,             
                    trigger: string             
                }*/
            });

            sepaExpress.ready(function (message) {
                console.log("response: ", message);
                /* message: { 
                    message: "HostedPage ready"
                }*/
            });
 
        </script>