Appearance

Getting Started ​

Prerequisites ​

Before you can use the Thirstie SDK, you will need to have the following:

  • API keys for your application (Thirstie API key + Google Maps API key) to initialize the SDK and make API calls.
  • Product IDs for the products that will be advertised for sale on your website.

Thirstie provides a sandbox environment for development and testing, which does not require live payments. When you are ready to go live, you will switch to the production environment and use the production API keys provided by Thirstie.

Initialization ​

The library can be installed from our CDN (content delivery network) using a script tag for in-browser loading, or via npm.

CDN ​

  • CDN location: https://cdn.thirstie.cloud/js/latest/thirstie-ecomm-vue.js

  • Install via script tag with dependencies:

    html
    <!-- thirstie-ecomm-vue requires the base vue package -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.thirstie.cloud/js/latest/thirstie-ecomm-vue.js"></script>

  • The init function is available as window.thirstieEcommVue.initApp

NPM ​

  • Install: npm install @thirstie/ecomm-vue
  • Import the init function into your project script: import { initApp } from '@thirstie/ecomm-vue'

You will receive api keys needed to enable your brand's application (see prerequisites above).

Examples showing basic implementations of the Thirstie SDK are on the examples page and in the thirstiejs-starter repo on GitHub.

If you run into any problems getting a site running, check the Troubleshooting section.

Basic Example ​

What follows is an example of a minimal web application which installs the Thirstie SDK using a script tag. The web application consists of a landing page with a product listing component and a checkout page implemented with the Thirstie web components and requires no additional javascript code, just plain HTML markup and CSS styling.

First, you need a landing page.

/index.html

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Thirstie SDK Demo</title>

    <!-- BEGIN THIRSTIE SDK CODE -->
    <!-- load base style sheets used by the Thirstie Ecomm library -->
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.thirstie.cloud/css/latest/thirstiebase.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.thirstie.cloud/css/latest/thirstieecomm.css"
    />

    <!-- thirstie-ecomm-vue requires the base vue package -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
    <script src="https://cdn.thirstie.cloud/js/latest/thirstie-ecomm-vue.js"></script>

    <script defer type="module">
      globalThis.__VUE_PROD_DEVTOOLS__ = false;
      globalThis.__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = false;
      globalThis.__VUE_OPTIONS_API__ = false;

      window.thirstieEcommVue.initApp({
        APIKEY: "------", // You will replace this with the Thirstie API Key provided Thirstie
        MAPSKEY: "------", // You will replace this with the Google Maps API Key
        environment: "sandbox", // "sandbox" allows you to develop and test without live payments. "prod" will be used to go live,
        primaryColor: "#154D5B",
        secondaryColor: "#f0a0a0",
        primaryContrastingColor: "#fff",
        secondaryContrastingColor: "#000",
        routes: {
          checkout: "/checkout.html",
          shopping: "/",
        },
        supportEmail: "support@mybrand.thirstie.com",
        brandLogo:
          "https://media.thirstie.cloud/content/2Dt1hdN5CDkHNn7UBCQ5yH,x250f.png",
      });
    </script>
    <!-- END THIRSTIE SDK CODE -->

    <!-- Load your site style sheets after Thirstie SDK Code-->
    <link rel="stylesheet" type="text/css" href="/styles.css" />

    <!-- Or specify CSS in <style /> tag -->
    <style>
      .header-container {
        background-color: #172956;
        color: #fff;
      }

      .content {
        background-color: #f0f0f0;
        color: #172956;
      }
    </style>
  </head>
  <body>
    <header class="header-container">
      <!-- Your standard navigation bar header -->
      <nav class="navbar">
        <div class="navbar-nav">
          <a href="/"
            ><span
              ><img
                src="https://media.thirstie.cloud/content/2Dt1hdN5CDkHNn7UBCQ5yH,x60f.png" /></span
          ></a>
        </div>
        <div class="navbar-cta">
          <!-- Thirstie Custom component placing the shopping cart icon in the header -->
          <!-- th-cart-nav also enables a slide in drawer to preview shopping cart details -->
          <th-cart-nav></th-cart-nav>
        </div>
      </nav>
    </header>

    <div class="content">
      <!-- Add a component to allow the user to specify their delivery address or zipcode in order to determine product availability -->
      <th-availability-wrapper check-type="zipcode" header-height="65">
        <slot name="page-content">
          <div class="page-content">
            <!-- This component displays a product listing grid with the ability to view product detail and add to cart  -->
            <th-product-container></th-product-container>
          </div>
        </slot>
      </th-availability-wrapper>
    </div>

    <th-agegate-modal type="yesno">
      <h2 slot="header">Are you old enough to drink?</h2>
      <div slot="additional-msg">
        <div>
          For information about enjoying Alcohol RESPONSIBLY visit
          <a href="https://responsibility.org">responsibility.org</a> &
          <a href="https://responsibledrinking.org">responsibledrinking.org</a>
        </div>
      </div>
      <div slot="fail-msg">
        You must 21 or older to enter. Click
        <a href="https://responsibility.org" target="_blank">here</a>
      </div>
    </th-agegate-modal>
  </body>
</html>

Then you define a page for checkout at /checkout.html.

/checkout.html

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Demo</title>

    <!-- BEGIN THIRSTIE SDK CODE -->
    <!-- load base style sheets used by the Thirstie Ecomm library -->
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.thirstie.cloud/css/latest/thirstiebase.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.thirstie.cloud/css/latest/thirstieecomm.css"
    />

    <!-- thirstie-ecomm-vue requires the base vue package -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
    <script src="https://cdn.thirstie.cloud/js/latest/thirstie-ecomm-vue.js"></script>

    <script defer type="module">
      globalThis.__VUE_PROD_DEVTOOLS__ = false;
      globalThis.__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = false;
      globalThis.__VUE_OPTIONS_API__ = false;

      window.thirstieEcommVue.initApp({
        APIKEY: "------", // You will replace this with the Thirstie API Key provided by Thirstie
        MAPSKEY: "------", // You will replace this with the Google Maps API Key
        environment: "sandbox", // "sandbox" allows you to develop and test without live payments. "prod" will be used to go live,
        primaryColor: "#154D5B",
        secondaryColor: "#f0a0a0",
        primaryContrastingColor: "#fff",
        secondaryContrastingColor: "#000",
        routes: {
          checkout: "/checkout.html",
          shopping: "/",
        },
        supportEmail: "support@mybrand.thirstie.com",
        brandLogo:
          "https://media.thirstie.cloud/content/2Dt1hdN5CDkHNn7UBCQ5yH,x250f.png",
      });
    </script>
    <!-- END THIRSTIE SDK CODE -->

    <!-- Load your site style sheets after Thirstie SDK Code-->
    <link rel="stylesheet" type="text/css" href="/styles.css" />
  </head>

  <body>
    <div id="app">
      <!-- Thirstie's 3-step checkout -->
      <th-checkout>
        <div id="th-stripe-mount-point" slot="th-stripe-payment"></div>
      </th-checkout>
    </div>
  </body>
</html>

Step-By-Step ​

Let's review what is happening here.

initApp ​

Each page has the initialization code

javascript
window.thirstieEcommVue.initApp({
  APIKEY: "------", // You will replace this with the Thirstie API Key
  MAPSKEY: "------", // You will replace this with the Google Maps API Key
  environment: "sandbox", // "sandbox" allows you to develop and test without live payments.
  // "prod" will be used to go live,
  primaryColor: "#154D5B",
  secondaryColor: "#f0a0a0",
  primaryContrastingColor: "#fff",
  secondaryContrastingColor: "#000",
  routes: {
    checkout: "/checkout.html",
    shopping: "/",
  },
  supportEmail: "support@mybrand.thirstie.com",
  brandLogo:
    "https://media.thirstie.cloud/content/2Dt1hdN5CDkHNn7UBCQ5yH,x250f.png",
});

This example shows a minimal configuration. The details of these and other options are given in the Styling & Customization section.

The primary and secondary color settings are applied to ensure the page follows your site theme. The primaryColor will be used for buttons and other CTAs, the secondaryColor is used as a background in most cases.

The supportEmail will be an address that is provided by Thirstie.

Landing page setup -- Age Gate ​

Thirstie can manage the age gate for your site. The following code implements a simple "Yes" / "No" age gate. Note that if you do not implement the age gate, or use a non-Thirstie age gate without setting the age in a Thirstie component, the consumer will be prompted for Legal Drinking Age (LDA) during checkout.

html
<th-agegate-modal type="yesno">
  <h2 slot="header">Are you old enough to drink?</h2>
  <div slot="additional-msg">
    <div>
      For information about enjoying Alcohol RESPONSIBLY visit
      <a href="https://responsibility.org">responsibility.org</a> &
      <a href="https://responsibledrinking.org">responsibledrinking.org</a>
    </div>
  </div>
  <div slot="fail-msg">
    You must 21 or older to enter. Click
    <a href="https://responsibility.org" target="_blank">here</a>
  </div>
</th-agegate-modal>

Landing page setup -- Shopping cart navigation ​

This section adds the shopping cart icon to the nav bar of the site. When the cart icon is clicked, it opens a slide drawer to preview cart details and allow the user to continue to checkout.

html
<div class="navbar-cta">
  <!-- Thirstie Custom component placing the shopping cart icon in the header -->
  <!-- th-cart-nav also enables a slide in drawer to preview shopping cart details -->
  <th-cart-nav></th-cart-nav>
</div>

Landing page setup -- Delivery address and commerce components ​

Beverage alcohol sales require knowing the delivery address upfront to identify which licensed retailers can legally ship to that location. This is a difference with e-commerce in non-regulated industries, see the Bev-Alc e-commerce guide for more information.

This section adds a zipcode entry widget, which acts a container for the product listing component. The zip code entry widget will be "sticky" positioned to the top of the screen if the user scrolls.

html
<div class="content">
  <!-- Add a component to allow the user to specify their delivery address or zipcode in order to determine product availability -->
  <th-availability-wrapper check-type="zipcode" header-height="65">
    <slot name="page-content">
      <div class="page-content">
        <!-- This component displays a product listing grid with the ability to view product detail and add to cart  -->
        <th-product-container></th-product-container>
      </div>
    </slot>
  </th-availability-wrapper>
</div>

Checkout ​

Thirstie's checkout is self-contained and optimized for checkout completion. It is installed as a single component.

html
<th-checkout>
  <div id="th-stripe-mount-point" slot="th-stripe-payment"></div>
</th-checkout>

See the checkout component reference for more details.

© 2026 Thirstie