Setting up the Checkout Script is a breeze. 🌞

Start out by making sure you fulfill these requirements:

  • You have the Commerce product enabled and a Product List uploaded to Flowbox
  • You have a few posts with products connected in Moderate
  • You have the Checkout Script Api Key. Ask your Client Success Manager about this

Then, it's basically a matter of adding a Javascript snippet in your E-Commerce system— preferably on a completed purchase confirmation screen presented to the user — to which you pass your API Key, a list of products and an order ID:

<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 }, { id: 456, quantity: 14 }],
      orderId: 100
    })
  });
</script>

The window.flowboxCheckout.checkout function takes three—all required—parameters:

  • apiKey - Your Checkout Script API Key
  • products - An array of products. The products are represented as Javascript object with the properties id (a string  or number ) and quantity (a number ). E.g. { id: 1, quantity: 5 }
  • orderId  - A number indicating the ID of the order.

And that should be it! 🎉

Some Do's and Don'ts:

  • Make sure the ID used in the checkout script corresponds to the product catalogs in your Flowbox account. Any mismatches will lead to an error.
    For example, if you use Item Group ID, make sure you also pass the Item Group ID into this checkout script.
  • Don't add any "" or '' in products: line. Keep it similar to what is stated earlier in this article. Any syntax error can negatively impact the script.
    Paste your implementation into https://jshint.com/ and ensure that no syntax errors are reported 🎯.

Having trouble? Take a look here on how to verify your Checkout Script implementation

Did this answer your question?