Package Exports

@heymantle/surface
@heymantle/surface/dist/index.mjs
@heymantle/surface/dist/index.umd.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@heymantle/surface) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Mantle App API React Client and Components

A react interface for interacting with the Mantle App API and drop-in components for your billing UI.

Installation

You can install the Mantle react package using npm:

$ npm install @heymantle/surface

Usage

Include the MantleProvider react context somewhere near the root of your component tree, after you have access to your customer / shop data, you'll need the stored Mantle customer token from the identify request you did server-side. For example:

import { MantleProvider } from "@heymantle/react";

const App = (Component) => {
  const [shop, setShop] = useState();

  const fetchShop = async () => {
    const response = await fetch('/api/shop');
    setShop(await response.json());
  }

  useEffect(() => {
    fetchShop();
  }, [])

  if (!shop) {
    return <Loading />;
  }

  ReactDOM.render(
    <BrowserRouter>
      <AppFrame host={host}>
        <MantleProvider
          appId={process.env.MANTLE_APP_ID}
          customerApiToken={shop.mantleApiToken}
          apiUrl={process.env.MANTLE_API_URL}
        >
          <Component />
        </MantleProvider>
      </AppFrame>
    </BrowserRouter>,
    document.getElementById("app-container")
  );
};

Furthur down the stack you can then use the useMantle hook for most data and operations, for example:

import { useMantle, HorizontalCards } from "@heymantle/react";

const HomePage = () => {
  const { customer, subscription, plans, subscribe, cancelSubscription, pushEvent } = useMantle();

  useEffect(() => {
    pushEvent({
      eventName: 'page_view',
      properties: {
        path: window.location.href,
      },
    });
  }, [window.location]);

  return (
    <div>
      {customer.subscription ? (
        <div>
          <span>You're currently susbcribed to: {customer.subscription.plan.name}</span>
          <button
            onclick={async () => {
              await cancelSubscription();
            }}
          >
            Cancel subscription
          </button>
        </div>
      ) : (
        <HorizontalCards
          customer={customer}
          plans={plans}
          onSubscribe={async ({ planId, discountId }) => {
            const subscription = await subscribe({ planId, discountId });
            open(subscription.confirmationUrl, "_top");
          }}
        />
      )}
    </div>
  )
};

Documentation

Documentation is available at https://heymantle.com/docs/surfacing-mantle-data.