Widgets

Custom checkout that seamlessly integrates with your application.

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:

3579

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:

856

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
810

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