OTP Page In an Iframe

This feature enables you to open the OTP page in an iframe without external redirection. This will enable you to keep your customers on your website during the whole payment process.

How it Works

1- Create the iframe on your website.

The design and creation of the iframe are done from your side. You will open the PaymentUrl in the iframe so that the customer can enter their OTP.

📘

Handling the iframe

You will handle fully the iframe from your side. You need to create the iframe and open the PaymentUrl for the OTP in it. You should also handle the cancelation if the customer wants to cancel the payment after the OTP is open and so on.

2- Get the redirection URL after the customer enters his OTP

After the customer completes the 3DS challenge, you will need to use an event listener to get the redirection URL. The event listener needs to be added to the page (In a javascript section) on which you will open the iframe.

The name of the sender of the message will be exactly "MF-3DSecure"

The redirection URL will be the Redirection value that you sent to the Create Session endpoint, appended to it the PaymentId.

https://{{Your_CallBackURL}}/?paymentId={{PaymentId}}&Id={{ID}}

You will have multiple options to choose from for the next action, whether you want to open the redirection URL in the iframe or close the iFrame and show the result page directly on your website.

//The event listener is used to listen to the Redirection URL after the  customer completes the 3DS Challenge
window.addEventListener("message", function (event) { 
        if (!event.data) return;
        try {
            //The redirection URL is returned in the message
            var message = JSON.parse(event.data);
          
            //Proceed only with the following steps if the sender is exactly "MF-3DSecure"
            if (message.sender == "MF-3DSecure") {
              var url = message.url;
            //Here, you need to handle the next action, and here are some suggestions:
            //Redirect the full page to the received URL.
            //Load the received URL in your iframe.
            //Close the iframe and display the result on the same page. You can use AJAX requests to your server with the payment ID to confirm the transaction status (invoke GetPaymentStatus) and display the result accordingly.
            }
        } catch (error) {
            return;
        }
    }, false);