Checkout configuration

Learn how to configure the checkout for the Flux Panda Player Widget Mode and Standalone Mode, and transfer shopping carts to your e-commerce website.

As a next step we need to complete the integration by transferring the Flux Panda Player shopping cart to your e-commerce stores' shopping cart.

Prerequisites

  1. You have installed the Embedded SDK on your website
  2. You have uploaded at least 2 products to Flux Panda of which one has variants
  3. You have created a live session in the Flux Panda admin panel and added the products to the session

Launching the session inside the widget

You can open a specific session in the Flux Panda Player by passing the sessionId to the FluxPlayer.open() method.

FluxPlayer.open({sessionId:'GDj3PGG7ULIOPbH3u3Bq'})

You can find the sessionId by opening the session in Flux Panda admin panel and copying the last part of the URL for example https://app.fluxpanda.com/your-channel/admin/s/**lzI8OBfTVgLtDzudRZ3q**.

Alternatively you can use the Embedded SDK FluxPlayer.getSessions(): Session[] method to receive a list of all your sessions.

Transfer the shopping cart and checkout

To test the integration add a console.log(data); statement to the onCheckout function of the Embedded SDK init function:

FluxPlayer.init({
    apiKey: 'YOUR-API-KEY',
    channelId: 'YOUR-CHANNEL-ID',
    onCheckout: function (data) {
        // This function is called whenever user clicks 
        // the "Checkout" button inside the player
        console.log(data);
    }
}).then((initialized) => {
    // Widget player is now initialized
    if (initialized) {
        FluxPlayer.open();
    }
});

Open your browser console (Chrome: CMD+Option+J).

Launch the live widget player and open the session with products.

Add the products to the Flux Panda shopping cart, and click the checkout button.

You should see a JSON object looking like this:

{
    "session_id": "lzI8OBfTVgLtDzudRZ3q",
    "currency_code": "USD",
    "items": [
        {
          "external_id": "39801767985326",
          "sku": "39801767985326",
            "quantity": 1
        }
    ],
    "checkout_type": "standard",
    "time_index": 0
}

Pleaser refer to our API documentation for a detailed explanation of each property.

The last step is to write the code that will populate your e-commerce store shopping cart.

We have code samples for the most common e-commerce stores, but the concept remains the same:

  1. Iterate over the items array
  2. Take the external_id (or SKU if unique), and quantity
  3. Write custom code to populate your cart

Here is an example on how to populate a Shopify store using their /cart/add.js API.

FluxPlayer.init({
    apiKey: 'YOUR-API-KEY',
    channelId: 'YOUR-CHANNEL-ID',
    onCheckout: function (data) {
        await fetch('/cart/add.js', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ items: data.items.map(({ sku, quantity }) => ({ id: sku, quantity })) })
        }).then(() => {
            FluxPlayer.clearShoppingCart();
        });
    }
}).then((initialized) => {
    // Widget player is now initialized
    if (initialized) {
        FluxPlayer.open();
    }
});

Sample integrations