Sign in and Sign up iframe

While Marfeel provides a built-in Paywall integration, Marfeel doesn't itself develop some of the features like sign in or sign up, including the subscription and payment processes.

There are several reasons for this:

  • Confidentiality. During a registration process there's critical data like the user and payment details that Marfeel must not have access to and that must be fully and exclusively owned by the publisher.
  • Publishers traditionally already have an existing user base that they want to integrate.
  • A Paywall must be holistic and accessible globally from Desktop, Mobile, TV and any other interesting Channel.
    Restricting publishers to Marfeel's concrete solution would break this rule.
  • Payment methods.
    Although credit cards are one of the most extended payment methods, there are other payment methods specific to certain publishers that they have already implemented.
  • Funnel optimizations.
    Taking full control of the conversion funnel is extremely important. Different publishers use different tools to measure and optimize this. Giving publishers full control is important to empower them to use all these tools without relying on Marfeel.
  • Offers and Subscriptions packs.
    One common practice to promote subscriptions is to continuously make offers and iterate the subscription models quickly. 

The reasons above are the pillars why Marfeel doesn't provide an out-of-the-box solution. To accelerate the development and facilitate the integration process, Marfeel provides an HTML and CSS blueprint project that can be customized that reinforces best practices on mobile. The blueprint includes pages for:

  • Sign in
  • Sign up
  • Payment.

It's the responsibility of the publisher to implement the user flow on these screens and has total freedom. The development by the publisher will:

  • Provide a mechanism to validate the credentials and authenticate a user
  • Have as many screens as they need for the sign up
  • These pages will be loaded inside a sandboxed iframe inside Marfeel Progressive WebApp (PWA) that will guarantee data confidentiality

Marfeel provides a URL that must be used as a callback that will inform the PWA when this process has ended.

 Marfeel won't have access to any information about the user or the payment process (that is, Marfeel doesn't maintain user data or cookies for that purpose).  This means that keeping the user signed in is a responsibility of the Publisher development 

The following must be included in the <head> tag of the iframe:

paywall.js
(function() {
    var actions = {};

    actions.show = function() {
        document.querySelector("body").style.opacity = 1;
    }

    window.addEventListener("message", function (event) {
        try {
            var data = JSON.parse(event.data);
            if(data.scope === "authgateway") {
                actions[data.action](data);
            }
        } catch (error) {

        }
    });
}());

function mrfInit(pageName) {
    var pageHeight = parseInt(getComputedStyle(document.getElementsByTagName('body')[0]).height);
    parent.postMessage('{"scope":"authgateway","action":"pageInit","pageHeight":' + pageHeight + ',"pageName":"' + pageName + '"}', "*");
}

For this to work the client also has to add the following code to their HTML file before the closing the </body> tag.

<script>mrfInit("A");</script>
</body>

The param of mrfInit(param) stands for the number of the page on the iframe. "A" is the first page, "B" is the 2nd, etc. This param or pageName will be used to track Analytics on the Funnel.

Callback

What Marfeel provides is a URL that the client uses as a callback once the authentication process has concluded. Through query parameters, Marfeel receives the result of the authentication/payment process.

If the result is positive, the response includes an authentication token that Marfeel sends to its servers before granting the user access to the paid content.

This token will be validated from Marfeel's servers with the publisher's servers to avoid any hijacking of the paid content.