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:

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