If you are integrating the ProAbono hosted pages as an iframe into your 1-page application, you might need to be aware of a few customer’s actions in the iframe :

  • when a subscription starts
  • when an upgrade is validated
  • when a subscription’s options change

DO NOT rely on webhooks for real-time updates.
Webhooks can be sent minutes after the action.
Instead, use the Redirections and a neat HTML5 trick.

1) Pre-requisites

  • In the backoffice, go to Settings > General Settings > Hosted Pages
  • Disable ‘Close iframe after subscription’

2) Splash page

We’re gonna build a splash page saying “we are preparing your subscription”.
Don’t spend time doing a fancy design : this page will be opened inside the iframe.
It will be able to communicate with the page containing the iframe.

  • Create a dead-simple ‘splash.html’ on your server
  • Go to Settings > General Settings > URL Redirections
  • For each of the events you want to catch, add a redirection to your splash page on your server

3) Code

Let’s say you want to try your page on localhost:80.

Page containing the iframe

<iframe id="frame-proabono" src="<crypted-url>"  style="width: 100%; height: 700px;">
</iframe>

<script type="text/javascript">
  function handleFrameMessage(evt) {
      if (evt.origin == "http://localhost:80") {
        // ... your code here ...
        console.log(evt.data.ReferenceCustomer);
        console.log(evt.data.ReferenceOffer);
        console.log(evt.data.IdSubscription);
        // close the iframe
        var frameProAbono = document.getElementbyId('frame-proabono');
        frameProAbono.parentNode.removeChild(frameProAbono);
     }
  }

  if (window.addEventListener)
    window.addEventListener("message", handleFrameMessage, false);
  else
    window.attachEvent("onmessage", handleFrameMessage);
</script>


Splash page

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title>Completed</title>
  </head>
  <body>
    <h3>Preparing your subscription, please wait...<h3/>
    <p>If you are not redirected in 10 seconds, <a href="/">Click this link<a/>.</p>
    <script type="text/javascript">
      // url parsing utility
      function urlGetParameter(name) {
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)", 'i'),
          results = regex.exec(location.search);
        return (results === null)
          ? ""
          : decodeURIComponent(results[1].replace(/\+/g, " "));
      }

      try {
        // extract the data of the redirection
        var data = { };
        data.IdCustomer = urlGetParameter('idc');
        data.IdSubscription = urlGetParameter('idsu');
        data.ReferenceOffer = urlGetParameter('refo');
        // post as a message
        top.postMessage(data, 'http://localhost:3000');
      } catch(e) {
        console.log(e);
      }
    </script>
  </body>
</html>

Why is it so complicated ?
Because of cross-origin security issues.
Do not remove the origin verification by the way : it’s important for security reasons.
More information :
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

How do I get the ReferenceCustomer ?
For security reasons, it’s not disclosed in the client workflow.
Get it with an API call to Usages or Subscription.
Don’t forget that the API is Server-to-server.
This call will let you check the customer actually did end properly it’s workflow (and is not trying to get your service for free).