Pricing SDK

Lightweight, framework-agnostic pricing UI SDK using Shopify Polaris Web Components (via CDN).

How Polaris is Used

• Polaris web components are loaded via CDN: https://cdn.shopify.com/shopifycloud/polaris.js.
• No npm package for @shopify/polaris is used or required.
• All UI is built with Polaris tags (e.g., <s-stack>, <s-button>, <s-switch>, etc.).

Build

npm install
npm run build

Demo

• Run npm run dev and open /public/serve.html.
• Edit source files for instant live reload.

Usage

• In production, import from dist/pricing-sdk.es.js:

  <script type="module">
    import { init } from 'pricing-sdk';
    init({ autoRegister: true });
  </script>

• Or use the CDN UMD bundle:

  <script src="https://cdn.jsdelivr.net/npm/pricing-sdk@{version}/dist/pricing-sdk.umd.js"></script>

• Add <app-manager-billing-page></app-manager-billing-page> to your HTML.
• Listen for the pricing:plan-selected event:

  document.addEventListener('pricing:plan-selected', e => {
    console.log('Selected plan:', e.detail.planId);
  });

Notes

• Polaris is loaded via CDN automatically by the SDK.
• All UI is built with Polaris web components.
• You can use the SDK directly via CDN:

  <script src="https://cdn.jsdelivr.net/npm/pricing-sdk@{version}/dist/pricing-sdk.umd.js"></script>