Embedded Storefront

The fastest path to a native look and feel for your Moonbase-powered e-commerce is using our embedded storefront package. It comes with pre-built UI for customer authentication, cart management, checkout flow, license activations and much more. Although the UI is included, we've exposed a number of style variables so that you can make it yours.

This package can be included in your own websites, no matter what platform you use. On this page you will find instructions for popular platforms, but if yours is missing, reach out to us through the support channel, or at developers@moonbase.sh.

This feature is currently in public beta, and available to all Moonbase merchants. If you encounter any issues or rough edges while adding to your storefront, please let us know!

Getting started

To add e-commerce capabilities to your website, install using the appropriate method:

Static websites

For static websites, a simple <script> element is enough to add the basic features:

<script type="module" src="https://assets.moonbase.sh/storefront/moonbase.js"></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', () => {
        // TODO: Replace this with the URL of your Moonbase account
        Moonbase.setup('https://demo.moonbase.sh')
    })
</script>

This snippet can be added at the end of your document, and should be included on every page you want storefront features available on. Read on for more details on how to configure buttons and render dynamic content.

Javascript apps

To make it easier to use this when building sites using React.js, Vue.js, Svelte, or similar frameworks, you can also add this package to your dependencies and install it:

npm install @moonbase.sh/storefront --save

At this point you can import and call the Moonbase setup method whenever your UI is ready:

import Moonbase from '@moonbase.sh/storefront'

// TODO: Replace this with the URL of your Moonbase account
Moonbase.setup('https://demo.moonbase.sh')

Be sure to keep this package updated, as we often publish improvements and bug fixes to optimize your storefront.

Wordpress

A Moonbase Wordpress plugin is currently in development and will be launched soon.
If you're interested in updates on this, let us know at developers@moonbase.sh.

Look & Feel

Using CSS variables on your website, you can easily tweak the theme of the UI, the following is the default settings:

:root {
  /* General */
  --moonbase-dark-mode: -1; /* -1 = off, 1 = on */
  --moonbase-text-color: rgb(17 24 39);
  --moonbase-primary-color: rgb(79 70 229);
  --moonbase-error-color: rgb(167, 33, 33);
  --moonbase-success-color: rgb(22 163 74);
  --moonbase-background-color: white;
  --moonbase-button-border-radius: 6px;

  /* Buttons */
  --moonbase-button-padding: 8px 32px;
  --moonbase-button-text-color: rgb(255 255 255);
  --moonbase-button-background-color: var(--moonbase-primary-color);
  --moonbase-button-shadow-color: rgb(0 0 0 / 0.05);
  --moonbase-button-success-color: rgb(22 163 74);
  --moonbase-button-error-color: rgb(167, 33, 33);
  --moonbase-button-border-radius: var(--moonbase-border-radius);

  /* Inputs */
  --moonbase-input-padding: 8px 12px;
  --moonbase-input-text-color: var(--moonbase-text-color);
  --moonbase-input-active-color: var(--moonbase-primary-color);
  --moonbase-input-shadow-color: rgb(0 0 0 / 0.05);
  --moonbase-input-error-color: rgb(167, 33, 33);
  --moonbase-input-background-color: transparent;
  --moonbase-input-border-radius: var(--moonbase-border-radius);

  /* Modals */
  --moonbase-modal-padding: 8px 32px;
  --moonbase-modal-text-color: var(--moonbase-text-color);
  --moonbase-modal-background-color: var(--moonbase-background-color);;
  --moonbase-modal-shadow-color: rgb(0 0 0 / 0.05);
  --moonbase-modal-border-radius: var(--moonbase-border-radius);
}

To override any of these, simply add your own CSS setting new values to the variables to your site:

#moonbase {
  --moonbase-primary-color: #ff9a1f;
}

Configure options

When adding the package to your site, you can configure parts of the experience by overriding any the settings listed below, this is their default values:

{
  toolbar: {
    // Whether or not to show the toolbar
    enabled: true,
    // The location of the toolbar, can be one of:
    // `bottom-right`, `bottom-left`
    location: 'bottom-right',
    show: {
        // Whether or not to show the cart button of the toolbar
        cart: true,
        // Whether or not to show the account button of the toolbar
        account: true,
        // Whether or not to show the Moonbase logo in the toolbar
        moonbase: true,
    },
  },
  auth: {
    signUp: {
        // Enables or disables customer sign-ups
        enabled: true,
    },
  },
  checkout: {
    // Changes the checkout flow to be a redirect based flow
    redirect: false,
  },
}

To override them, simply pass in options with your configuration when setting up the storefront:

<script type="module" src="https://assets.moonbase.sh/storefront/moonbase.js"></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', () => {
        // TODO: Replace this with the URL of your Moonbase account
        Moonbase.setup('https://demo.moonbase.sh', {
            toolbar: {
                // We have custom buttons to trigger account and cart,
                // so let's hide the default toolbar.
                enabled: false,
            }
        })
    })
</script>

Call methods

The Moonbase embedded storefront supports a whole range features, from authentication, to e-commerce and licensing. By default, it will pick up on URL parameters that contains intents, but you can also trigger these yourself. Below is the full list of intents you can initiate:

type MoonbaseInstance = {
  // Identity
  sign_in(parameters?: { email?: string; }): void
  sign_up(parameters?: { email?: string; }): void
  forgot_password(parameters?: { email?: string; }): void
  reset_password(parameters: { email: string; code: string; }): void
  confirm_account(parameters: { email: string; code: string; }): void
  confirm_email(parameters: { email: string; code: string; }): void
  confirm_email_change(parameters: { email: string; code: string; }): void

  // Customer
  view_account(): void
  view_products(): void
  redeem_voucher(parameters?: { code?: string; }): void

  // Products
  download_product(parameters: { product_id: string; version?: string; key?: string; }): void
  activate_product(parameters: { token: string; }): void

  // Orders
  view_cart(): void
  add_to_cart(parameters?: {
    product_id?: string;
    bundle_id?: string;
    variation_id?: string;
  }): void
  checkout(parameters?: { complete?: boolean; }): void
  close_checkout(): void
}

To actually trigger the UI elements, you can add onclick handlers to buttons like so:

<button onclick="Moonbase.add_to_cart({ product_id: 'example-product' })">
    Add to cart
</button>

Or, if using the Javascript package, you can also call them from your code:

import Moonbase from '@moonbase.sh/storefront'

const onAddToCartButtonClick = () => {
    Moonbase.add_to_cart({ product_id: 'example-product' })
};

Render dynamic content

The embedded storefront will fetch and cache data related to products & bundles, the authenticated customer, and the current cart. To make your web site dynamic, we support rendering and conditionally hiding/showing elements part of your site.

Rendering content is as simple as adding the data-moonbase-render attribute to the elements you want dynamic content to appear in:

<button data-moonbase-render="user.name" onclick="Moonbase.view_account()">
    Account
</button>

Any initial content will be replaced with data loaded by the embedded storefront, if present. In the above example, the button will show "Account" until a customer signs in, after which it will show the user's name.

The available properties to render are:

# User properties
user.name
user.email

# Product properties
product.<product_id>.name
product.<product_id>.price
product.<product_id>.original_price

# Bundle properties
bundle.<bundle_id>.name
bundle.<bundle_id>.price
bundle.<bundle_id>.original_price

In case you have elements you want to only conditionally show based on properties, we support a data-moonbase-if attribute:

<button
    hidden
    data-moonbase-if="user"
    data-moonbase-render="user.name"
    onclick="Moonbase.view_account()"
></button>

Any elements with data-moonbase-if attributes will have their hidden attribute set based on storefront context. In the above example, we add the hidden attribute to ensure it's hidden by default, and only when a user is authenticated will is show.

The available properties to conditionally render based on are:

# User properties
user

# Product properties
product.<product_id>
product.<product_id>.has_discount

# Bundle properties
bundle.<bundle_id>
bundle.<bundle_id>.has_discount