Skip to main content

Last update : 25/11/2025

GreenLeaze's modal

GreenLeaze provides an iframe that can be used as a modal to display the pricing to the customer.
This page helps to understand how it works and how to improve your integration.

Wording​

Parent window describes your website page where you call the modal from.
Modal describes the iframe that is displayed in the parent window.
Event describes a JavaScript event.

How it works​

First, the modal is loaded on the parent window and marked as hidden, it is important to load the modal even if not displayed to avoid loading issues and delays for the customer. The modal may be loaded with default values to be ready to be displayed when the customer clicks on the button to open the modal.

The modal is loaded with the following URL :

<iframe class="modal-abonnement-product--greenleaze" src="/modal-product?durations=pricePerDurationEncoded&trackingId=trackingId&variantId=variantId&data=data">
    </iframe>

The url parameters are :

  • durations: stringified JSON object with the pricings for each duration Example :

    {
      "12": { "monthly": 100, "initial": 100 },
      "24": { "monthly": 80, "initial": 80 }
    }

  • trackingId: tracking ID for the customer Example : "1234567890" If not provided, a random ID will be generated. You can pass the same trackingId when creating the transaction on GreenLeaze to track the order and conversions.

  • variantId: variant ID for the product Example : "1234567890"

  • data: stringified JSON object with more data for the modal Example :

    { "key": "value" }

Then the customer clicks on the button to open the modal on the parent window, the parent window switched the modal from hidden to visible and sends an event "openGreenleazeModal" :

button.addEventListener("click", function () {
  window.postMessage(
    {
      type: "openGreenleazeModal",
    },
    "*"
  );
  const modal = document.querySelector("#modal-abonnement-product--greenleaze");
  modal.style.display = "block";
});

The parent windows then listen for the events "closeGreenleazeModal" and "submitGreenleazeModal" to close the modal and submit the order.

window.addEventListener("message", function (event) {
  if (event.data.type === "closeGreenleazeModal") {
    // Close the modal
    document.querySelector(
      "#modal-abonnement-product--greenleaze"
    ).style.display = "none";
  }
  if (event.data.type === "submitGreenleazeModal") {
    // Create the order on GreenLeaze, then redirect the customer to the payment page.
  }
});

Dynamicly update the modal​

You may want to update the modal with new pricings when editing something on the parent window or to optimize performances by having only one modal on the page (recommended).

For this you may send a event "greenleazeJsonChange" with the new pricings to the modal just before displaying it.

window.postMessage({
  type: "greenleazeJsonChange",
  content: priceFormated,
  modal: "product",
});

Passing more data to the modal​

You may want to track which product is displayed in the modal to avoid storing the state in the parent window.

For this you can pass a "variantId" parameter in the modal iframe src url, or "data" object if you need more than one parameter, data must be a stringified JSON object.

You may also update it as you wish with the "greenleazeJsonChange" event :

window.postMessage({
  type: "greenleazeJsonChange",
  content: priceFormated,
  variantId: variantId,
  data: {
    key: "value",
  },
  modal: "product",
});

Be careful, the "content" with the pricing is mandatory, other parameters (variantId and data object) are optional.

Styling the modal​

It is not possible to change the modal styling on your side. Contact us if you need to change the modal styling or wording.