Plans Components

Along with MantleProvider, you’ll want to show your users what plans they have available and give them a way to select those plans. Our @heymantle/polaris library includes several drop-in components to make this easier.

HorizontalCards, VerticalCards, and HighlightedCard components all display the list of available plans with a button to choose the plan to subscribe to.

export default function () {
  const { customer, plans } = useMantle();
  return (
    <Page>
      <HorizontalCards
        customer={customer}
        plans={plans}
        onSubscribe={async ({ planId, discountId }) => {
          const subscription = await client.subscribe({ planId });
          const url = subscription.confirmationUrl;
          open(url, "_top");
        }}
      />
    </Page>
  );
}

Check out the @heymantle/polaris library to learn more.