Appearance

<th-cart-nav> ​

Displays and icon which can be placed in a header, which activates a drawer to display the shopping cart.

Usage

html
<th-cart-nav></th-cart-nav>
Properties

tooltipText String

"Your Shopping Cart" (default)

Text to display when the user hovers over the icon.

<th-checkout> ​

Implements a three-step checkout page. Note that it requires adding a <div> element with the id th-stripe-mount-point to allow Stripe to be properly installed for payments.

The Thirstie checkout process uses Stripe as our primary payment provider, including using a Stripe Element to securely capture user payment information. See Styling & Customization for notes on how to provide custom styling for the Stripe Element.

Usage

html
<th-checkout>
  <div id="th-stripe-mount-point" slot="th-stripe-payment"></div>
  <div slot="support-content" class="th-fouc-block">
    <div>Custom content goes here</div>
  </div>
</th-checkout>
Properties

continueButtonLabel String

"Continue" (default)

Text to display on CTA buttons to continue on the user information and shipping pages of checkout.

completeButtonLabel String

"Complete Your Order" (default)

Text to display on the CTA button after entering payment information on the last page of checkout, to proceed to the confirmation page.

optInRequired Boolean

false (default)

If false, then the email opt-in checkbox will be checked by default ("opt-out" behavior). If true, then the box will be unchecked. NOTE: the user can proceed without opting-in.

ageGatePassed Boolean

false (default)

If false, and the user has not entered LDA information in a Thirstie age gate component, then a checkbox will be presented to the user that says "By checking this box you confirm that are of legal drinking age." The user has to pass the age gate to proceed with checkout.

If true then the we will assume that you have presented an acceptable age gate to the user and the user will be marked as having passed the age gate. NOTE: Thirstie will test this behavior and reserves the right to deny production api keys if not acceptable.

ageGateDay Number

ageGateMonth Number

ageGateYear Number

(Optional)

Year, month, and day must all be provided, if any are provided. Will be used to set date of birth for age gate. Note, these values are ignored if ageGatePassed is also provided to the component.

Flag usage examples

A minimal implementation of a checkout page with optInRequired and ageGatePassed set to true would look the following:

html
  <body>
    <div class="th-fouc-block">
        <th-checkout
            continue-button-label="Go on"
            complete-button-label="Complete Checkout"
            opt-in-required
            age-gate-passed
        >
            <div id="th-stripe-mount-point" slot="th-stripe-payment"></div>
        </th-checkout>
    </div>
  </body>

Alternatively, provide the full date of birth to set age gate

html
  <body>
    <div class="th-fouc-block">
        <th-checkout
            continue-button-label="Go on"
            complete-button-label="Complete Checkout"
            opt-in-required
            age-gate-month="12"
            age-gate-day="5"
            age-gate-year="1933"
        >
            <div id="th-stripe-mount-point" slot="th-stripe-payment"></div>
        </th-checkout>
    </div>
  </body>
Slots

th-stripe-payment: Required, must be specified as <div id="th-stripe-mount-point" slot="th-stripe-payment"></div>

additional-checkout-content: Optional, custom html content to render below the information forms on each page of checkout. For example, this would be a suitable place to add links to your Terms & Conditions if desired. In general, Thirstie recommends not providing too much content that would lead the user to navigate away and abandon checkout.

additional-confirmation-content: Optional, custom html content to render below the confirmation page.

support-content: Optional, custom html content to render below cart details on the confirmation page.

© 2025 Thirstie