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 > Hosted Pages > Customer Workflows
  • Disable ‘Close the 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 > Hosted pages > Customer Workflows> 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;">

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

  if (window.addEventListener)
    window.addEventListener("message", handleFrameMessage, false);
    window.attachEvent("onmessage", handleFrameMessage);

Splash page

<!DOCTYPE html>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <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) {

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 :

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).