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:

  !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() {
    }, o.src = e, document.getElementsByTagName("head")[0].appendChild(o)
  }("//", function() {
      apiKey: 'Your API Key',
      products: [{ id: 123, quantity: 1 }, { id: 456, quantity: 14 }],
      orderId: 100

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.

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.

Did this answer your question?