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.

How to check that the ID corresponds to the product catalogs?
Navigate to your Flowbox account -> Go to Catalogs tab (under Commerce tab) -> click the meatball (three-dot) menu next to your feed labeled as ‘primary’ feed -> Click Edit.

In the “Edit Catalog” window, check the applied Category identifier and make sure that the check-out script sends the value of the same attribute in products: line of our check-out 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.

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

Content Security Policy (CSP) Error

Content Security Policy (CSP) is a W3C standard providing a layer of protection against Cross-Site Scripting (XSS). CSP policy allows blocking/allowing content from specified domains and avoiding the content coming from unapproved origin.

If you see an error message that states that the checkout script could not load due to Content Security Policy, you will need to add Flowbox to your CDN whitelist.