All Collections
Installing Flowbox
Checkout script
Implementing the Checkout script
Implementing the Checkout script

How to implement the Checkout script

F
Written by Fernando Valdivielso
Updated over a week ago

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",
},
});
});
</script>

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

  • apiKey – Your Checkout Script API Key.

  • 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.

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:

Did this answer your question?