Setting up the Checkout Script is a breeze. 🌞

The first step is making sure that you fulfill these requirements:

  • You have the Commerce product enabled and a Product List uploaded to Flowbox.
  • You have collected 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's it! 🎉

Some Dos and Don'ts:

  • Make sure that 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 that you also pass the Item Group ID into this checkout script.
  • Don't add any "" or '' in the 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 how to verify your Checkout Script implementation

Did this answer your question?