Checkout Widget Overview

The WeatherIt Checkout Widget is a set of three embeddable Web Components that add rain protection to partner checkout pages. Partners load a single script, place HTML tags on their pages, and the widget handles quoting and protection selection. The widget does not process payment — partners handle payment via Stripe Connect.

Components

How It Works

flowchart TB
    subgraph PartnerSite["Partner Site"]
        direction TB
        subgraph Checkout["Checkout Page"]
            W["weatherit-widget\nFetches quote, displays options"]
            C["weatherit-cart-item\nShows line item when selected"]
        end
        subgraph Confirmation["Confirmation Page (separate URL)"]
            CF["weatherit-confirmation\nConfirms policy or upsells"]
        end
    end

    API["QLP-Back-End<br/>api.weatherit.ai"]

    W -->|"POST /quotes"| API
    W -->|"Custom Events"| C
    CF -->|"GET /partners/:id"| API

    classDef checkoutStyle fill:#e8f4f8
    classDef confirmStyle fill:#e8f5e9
    class Checkout checkoutStyle
    class Confirmation confirmStyle

Customer Journey

1. Widget loads — embed.js registers the three components. Only components present in the page activate.
2. Quote displayed — weatherit-widget fetches partner branding and a quote from the API, then displays Full and Budget protection options.
3. Customer selects — The customer chooses a protection tier (or selects "No Protection"). The widget fires a Custom Event.
4. Cart updated — weatherit-cart-item listens for the event and shows a line item with the selected tier and premium.
5. Partner completes checkout — The partner's checkout flow proceeds. The partner captures the quoteId from the widget event.
6. Policy activated — After payment, the partner's backend calls POST /quotes/:quoteId/purchase to activate the policy.
7. Confirmation page — weatherit-confirmation shows the policy confirmation, or an upsell if protection was not purchased.

Key Facts

• Single script tag — weatherit.ai/embed.js registers all three components.
• No payment in the widget — The widget handles quoting and selection only. Partners process payment via Stripe Connect.
• Shadow DOM — Each component uses Shadow DOM for style isolation. Widget styles do not leak into or out of the partner's page.
• Co-branding — Partner branding (logo and primary colour) is fetched from the API and applied automatically.
• Lightweight — The full bundle is approximately 10-15 KB gzipped (Lit framework, no React, no Stripe.js).

📘

Terminology

WeatherIt documentation uses specific terms per the brand guide:

Use	Do not use
protection	coverage / insurance
payout	claim settlement / reimbursement
rain trigger	precipitation threshold
experience	event / activity
partner	reseller

Code identifiers (event names, attributes) retain their technical names — for example, weatherit:coverage-selected uses "coverage" because it is a code identifier.

⚠️

Visual placeholder — A screenshot or mockup of the widget embedded in a checkout page will be added here.