Pricing SDK

Lightweight, framework-agnostic pricing UI SDK with no external UI dependencies.

Build

npm install
npm run build

Demo

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

Usage

Include the SDK via CDN in your HTML:

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

Components

• <app-manager-billing-page>: Use this for custom UI (no external dependencies required).
• <app-manager-billing-page-polaris>: Use this if your app uses Shopify Polaris web components.
  • Important: You must also include the Polaris script in your HTML if it is not already present:

    <script src="https://cdn.shopify.com/shopifycloud/polaris.js"></script>

Listening for Plan Selection Events

Both <app-manager-billing-page> and <app-manager-billing-page-polaris> emit a custom event app-manager:plan-select when a user selects either the "Free plan" or chooses to "Choose later". You can listen for this event and handle each case separately:

document.addEventListener('app-manager:plan-select', e => {
  if (e.detail && e.detail.free_plan) {
    console.log('Free plan selected:', e.detail);
    // Handle free plan selection
  } else if (e.detail && e.detail.choose_later) {
    console.log('Choose later selected:', e.detail);
    // Handle choose later action
  }
});

Notes

• This SDK does not require or load any external UI libraries by default.
• For <app-manager-billing-page-polaris>, you must include the Polaris script as shown above if your app does not already include it.