Foodin Elements
If you don’t want to develop your own pantry inside the app. We got this covered for you. All you will need is to integrate Foodin package in your App and you will have a functional Grocery management app inside your app.
Include foodin.js
Include the Foodin.js script on each page of your site—it should always be loaded directly from https://js.foodin.ai, rather than included in a bundle or hosted yourself.
To best leverage Foodin’s advanced fraud functionality, include this script on every page, not just the checkout page. This allows Foodin to detect suspicious behavior that may be indicative of fraud as customers browse your website.
Using Foodin.js as a module We also provide an npm package that makes it easier to load and use Foodin.js as a module. For more information, check out the project on GitHub.
Asynchronous and deferred loading of Foodin.js Asynchronous loading of JavaScript is generally recommended, as it can improve the user experience of your site by not blocking DOM rendering during script loading. The easiest way to asynchronously load Foodin.js is to use the npm module as described above. It does asynchronous loading by default.
You can also load Foodin.js using the async or defer attribute on the script tag. Note, however, that with asynchronous loading any API calls will have to be made only after the script execution has finished.
Use as module
var foodin = Foodin(‘YOUR_API_KEY');Use Foodin(publishableKey,options?) to create an instance of the Foodin object. The Foodin object is your entrypoint to the rest of the Foodin.js SDK.
Your Foodin publishable API key is required when calling this function, as it identifies your website to Foodin.
Method parameters
| Field | Parameter | Description |
|---|---|---|
| publishableKey | String | Your publishable key. |
| Options | Object | Initialization options. |
Elements object
Foodin Elements are customizable UI components used to help you immerse your customers into grocery management and fullfillment.
Use an elements instance to create and manage a group of individual Element instances.
Foodin.elements(options)
Use an elements instance to create and manage a group of individual Element instances.
var elements = foodin.elements({
clientSecret: "CLIENT_SECRET",
});| Field | Parameter | Description |
|---|---|---|
| fonts | array | An array of custom fonts, which elements created from the Elements object can use. Fonts can be specified as CssFontSource or CustomFontSource objects. |
| locale | String | A locale to display placeholders and error strings in. Default is auto (Foodin detects the locale of the browser).Setting the locale does not affect the behavior of postal code validation valid postal code for the billing country of the card is still required. |
| clientSecret | String | Required to use within the fulfilment process. |
| appearance | Object | Supported for the Pantry Element, the Cart Element, and the Refill Element.Match the design of your site with the appearance option. The layout of each Element stays consistent, but you can modify colors, fonts, borders, padding, and more. |
| loader | auto always never | Supported for the Pantry Element, the Cart Element, and the Refill Element. |
Display skeleton loader UI while waiting for Elements to be fully loaded, after they are mounted. Default is ‘auto’ (Foodin determines if a loader UI should be shown).
Elements.fetchUpdates()
elements.fetchUpdates()
Used with the Refill Element
This method fetches updates from the associated UpdateInent or AddIntent on an existing instance of Elements, and reflects these updates in the Pantry.
This method returns a Promise which resolves with a result object. If this method succeeds, the result object will be empty. If this method fails, the result object will contain a localized error message in the error.message field. If the associated UpdateInent or AddIntent is in an unexpected status, the result object will also contain the intent's status in the error.status field.