@moonbase.sh/storefront

Embeddable Moonbase storefront widget for browser apps.

This package wraps auth, cart, checkout, voucher redemption, product downloads, activation, and subscription management behind one client-side API.

Learn more about our embedded storefront in our official docs: https://moonbase.sh/docs/storefronts/embedded/

Install

pnpm add @moonbase.sh/storefront

Quick start

import Moonbase, { MoonbaseEvent } from '@moonbase.sh/storefront'

Moonbase.setup('https://demo.moonbase.sh', {
  toolbar: {
    enabled: true,
    location: 'top-right',
  },
})

Moonbase.on(MoonbaseEvent.CheckoutCompleted, ({ order }) => {
  console.log('Order completed', order.id)
})

setup should be run once, client-side, after the DOM is available.

Trigger intents

Use intent methods to open specific views or execute actions:

Moonbase.sign_in({ email: '[email protected]' })

Moonbase.add_to_cart({
  product_id: 'my-product',
  quantity: 1,
})

Moonbase.view_cart()
Moonbase.checkout()
Moonbase.view_products()

All intents are snake_case methods on the Moonbase instance (for example view_product, manage_subscription, redeem_voucher).

Configure behavior and theme

You can pass options in setup(...) and update them later with configure(...):

Moonbase.configure({
  auth: {
    signUp: {
      enabled: false,
    },
  },
  cart: {
    quantity: 'single',
  },
  theme: {
    colors: {
      primary: '#E5A000',
      background: 'white',
    },
    fonts: {
      heading: 'Aleo',
      body: 'Inter',
    },
  },
})

You can also control where the widget mounts by providing target.

Events

Subscribe to widget lifecycle events with Moonbase.on(...).

Available events include:

• signed-in
• signed-up
• signed-out
• redeemed-voucher
• downloaded-product
• activated-product
• added-to-cart
• checkout-initiated
• checkout-closed
• checkout-completed