Widgets

The checkout widget is a powerful tool which allows users to directly interact with Kosmo's Backend without the need of developing your own layout and performing a manual integration of API requests. This significantly reduces the integration time with Kosmo.

Obtain API Key

To get started, heading to 🔑 API Authentication section to get your API Key.

How it works?

The following diagram aims to explain, in a simplified manner. the flow of the widget in terms of systems and data:

You can generate an HTML that will include all the delivery options based on your sender and recipient data. This can be embedded in any place you consider it suits within your customer journey. Find below an example of the layout you will get in return:

Once you choose an option and click on Order button, it will automatically place an order on Kosmo that can be then tracked in 2 ways:

Webhook Updates
Kosmo Tracking

Usage

Start using by request a widget session via API Request

const { data } = await axios.post(`http://api-stg.kosmo.delivery/session/create`, {
      recipient: {
        firstName: "Sample",
        lastName: "Recipient",
        organizationName: "",
        phone: "33000000000",
        location: {
          address: "Payalebar mall",
          latitude: 1.3334285,
          longitude: 103.8110754,
          postalCode: "409051"
        }
      },
      sender: {
        firstName: "Sample",
        lastName: "Sender",
        organizationName: "",
        phone: "33000000000",
        location: {
          address: "Airport Blvd., Singapour",
          latitude: 1.2875387,
          longitude: 103.8135205,
          postalCode: "12345"
        }
      }
    });
    const { sessionId, htmlSnippet } = data;
    // Injecting the HTMLSnippet into the dom will setup the widget
    widgetWrapperRef.current.innerHTML = String.raw`${htmlSnippet}`;

    // Most browsers will not automatically run an injected script
    // We have to clone it, to trick the browser into runing it
    nodeScriptReplace(document.getElementById("kosmo-widget"));

    //Save sessionId if you need to
    setSessionId(sessionId);

Full Example

Refer to our Codesandbox with a full example for reference:
https://codesandbox.io/s/restless-rgb-ffk0sb?file=/src/App.js