@kvass.ai/order-widget

KVASS Order Widget

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
213Sep 4, 2018Mar 28, 2018Minified + gzip package size for @kvass.ai/order-widget in KB

Readme

Kvass logo

Kvass Ordering Widget

Kvass offers a platform as a service that digitizes core business functions and optimizes resource allocation with baked-in machine learning capabilities.

Kvass ordering widget uses the Kvass platform for product, order, payment and user management.

Requirement

Install

From the unpkg CDN

<script src="https://unpkg.com/@kvass.ai/order-widget@latest/dist/kvass.bundle.js"></script>

From npm

npm install @kvass.ai/order-widget

Demo

Try out our demo

Getting started

Add the required script dependencies in your header, and remember to add your Google Maps JavaScript API key.

Add a div element in the body with an id of your choosing.

<head>
  <link rel="stylesheet" href="https://unpkg.com/@kvass.ai/order-widget@latest/dist/kvass.css">
  <script src="https://js.stripe.com/v3/" async></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
  <script src="https://unpkg.com/@kvass.ai/order-widget@latest/dist/kvass.bundle.js"></script>
</head>

<body>
  <div id="kvass-example-instance"></div>
</body>

init(options)

  • domElementId {String}
  • apiKey {String}
  • endpoint {String}
  • lng {String}
  • firebaseConfig {Object}
  • stripeApiKey {String}

Initialize the widget by providing the required configuration, using your Kvass API key and Kvass endpoint (https://qa.kvass.ai/ for our QA environment or https://api.kvass.ai/ for our production environment), Firebase domain and API key for the user verification and authentication, a Stripe API key to process payments and the locale you want to use (en or no are the only supported locals)

<script>
  KvassOrdering.init({
    domElementId: 'kvass-example-instance',
    apiKey: "KVASS_API_KEY",
    endpoint: "KVASS_API_ENDPOINT",
    lng: 'en',
    firebaseConfig: {
      domain: "YOUR_FIREBASE_DOMAIN",
      apiKey: "YOUR_FIREBASE_APIKEY"
    },
    stripeApiKey: "YOUR_STRIPE_KEY"
  });
</script>

open()

function to open the widget

<script>
  KvassOrdering.open();
</script>

close()

function to close the widget

<script>
  KvassOrdering.close();
</script>

destroy()

function to destroy the widget instance

<script>
  KvassOrdering.destroy();
</script>

Development

Install dependencies:

npm install

Add config file named keys.json to the config folder, containing your keys:

{
  "domElementId": "",
  "apiKey": "",
  "endpoint": "",
  "lng": "",
  "firebaseConfig": {
    "domain": "",
    "apiKey": ""
  },
  "stripeApiKey": ""
}
npm run start

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.