Skip to content

README.md

Latest commit

 

History

History
37 lines (28 loc) · 1.29 KB

README.md

File metadata and controls

37 lines (28 loc) · 1.29 KB
Raw

Web Component Playground

A development harness for the <shopify-checkout> web component. It imports the same entry as published consumers (@shopify/checkout-kit, aliased to ../src/index.ts in dev), registers the custom element, and logs ec.* events.

Run locally

cd platforms/web
pnpm sample

Vite serves at http://localhost:5173. The page has three panels:

  • Options — form for src, target (auto | popup), appearance (default storefront | app:light | app:dark | app:automatic | storefront), and debug, plus buttons for open(), close(), and focus().
  • Demo Storefront — a mocked product card with Buy now calling checkout.open(). The button stays disabled until a checkout URL is set. The collapsible readout shows checkout, error, target, appearance, and debug.
  • Events — log of dispatched events with a JSON snapshot of state at fire time.

The element is mounted on <body>. For popup / auto, the visible UI is mostly the overlay scrim while checkout is open in a separate window or tab.

Build

pnpm sample:build      # outputs to sample/dist/

CI runs this on every PR (see .github/workflows/web.yml). The sample is not published to npm (files allowlist in platforms/web/package.json).