Implementing the Checkout script | Flowbox Help Center

The Checkout script is responsible for sending information about each purchase made on your website to Flowbox. This information is then displayed in the Conversion panel, allowing you to identify which purchases can be attributed to our Flows.

Prerequisites

You have the Commerce product enabled and a product catalog uploaded to Flowbox.
You have collected posts and assigned products to them.
You have the Checkout Script API Key. Ask your Customer Success Manager about this.

How to integrate the script on your site

Add the following JavaScript snippet to your E-Commerce system. We recommend placing it on the order confirmation, or "Thank you" page, shown to the user:

<script>
!(function (e, t) {
  var o = document.createElement("script");
  (o.type = "text/javascript"),
    o.readyState
      ? (o.onreadystatechange = function () {
          ("loaded" === o.readyState || "complete" === o.readyState) &&
            ((o.onreadystatechange = null), t());
        })
      : (o.onload = function () {
          t();
        }),
    (o.src = e),
    document.getElementsByTagName("head")[0].appendChild(o);
})("//connect.getflowbox.com/bzfy-checkout.js", function () {
  window.flowboxCheckout.checkout({
    apiKey: 'Your API Key',
    products: [
      { id: '123', quantity: 1, price: 199.99, currency: 'EUR' },
      { id: '456', quantity: 3, price: 9.99, currency: 'EUR' },
    ],
    orderId: 100,
    locale: "es-ES",
    customerData: {
      name: "John",
      lastName: "Doe",
      email: "johndoe42@example.com",
      mobile: "+312345678"  
    },
 // Optional property required to send events to Google Analytics
 // enableWebAnalytics: true
  });
});
</script>

The window.flowboxCheckout.checkout requires the following parameters, all of which are mandatory:

apiKey – Your Checkout Script API Key (your Customer Success Manager will provide it for you).
products - An array of products represented as JavaScript objects. Each product object must have an id (string or number) and quantity (number) property. For example: { id: '1', quantity: 5 }.

price and currency are optional, but recommended. Passing these values to the Checkout script will ensure your analytics always receive the correct price, as opposed to retrieving the value from your Catalog, which may have outdated prices.

orderId – An integer number or a string indicating the ID of the order.

locale – Requires the language-region code, in ISO format, of the site where your visitor has placed the order so the reminder email is sent in the same language.
customerData – An object containing the buyer's contact information for the reminder email.

Make sure that the product IDs passed in the checkout script corresponds to the IDs in the primary Catalog in your Flowbox account. Any mismatches will lead to an error.

Web analytics

It is possible to send conversion events from the checkout script implemented in your order complete page to the Google Analytics property implemented on your site. To do this the checkout script code must include the enableWebAnalytics property set to true in the configuration object, as shown in the example code above.

How to make sure that your Checkout Script is working

Once your Checkout Script is integrated, please perform the troubleshooting process detailed in the following guide to confirm that it's working:

Verify Checkout Script >>