Plan 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. The @heymantle/polaris library includes several components to make this easier.

Using PlanCardStack

The PlanCardStack component displays available plans and handles subscription management:

import { PlanCardStack, PlanCardType } from '@heymantle/polaris';

export default function () {
  const { customer, plans } = useMantle();
  
  return (
    <Page>
      <PlanCardStack
        cardType={PlanCardType.Highlighted}
        customer={customer}
        plans={plans}
        onSelectPlan={async ({ plan, discount }) => {
          const subscription = await client.subscribe({
            planId: plan.id,
            discountId: discount?.id,
            returnUrl: '/plans'
          });
          
          if (subscription.error) {
            console.error('Unable to subscribe: ', subscription.error);
          } else {
            open(subscription.confirmationUrl, "_top");
          }
        }}
      />
    </Page>
  );
}

Layout options

Choose between different layout styles for displaying your plans:

Vertical vs horizontal layouts

The library provides two main layout components:

• <VerticalCards /> - Displays plans in a column format, ideal for when you have many features to compare
• <HorizontalCards /> - Shows plans in a row format, better for highlighting a small number of plans

// Vertical layout
<VerticalCards
  customer={customer}
  plans={plans}
  onSelectPlan={handleSelectPlan}
/>

// Horizontal layout
<HorizontalCards
  customer={customer}
  plans={plans}
  onSelectPlan={handleSelectPlan}
/>

Card types

You can set different display styles using PlanCardType:

• PlanCardType.Highlighted - emphasizes plan differences for easy comparison
• Standard display (default) - simple presentation of plan details

Handling plan selection

The onSelectPlan callback receives:

• plan - the selected plan object
• discount - any applicable discount (optional)

This callback is where you'll handle subscription creation and redirect to Shopify's confirmation screen.

Using hosted billing

If you'd prefer not to build your own plan selection UI, Mantle offers a Hosted Billing solution that provides a professionally designed, customizable billing page out of the box.

import { useMantle } from "@heymantle/react";
import { useEffect } from 'react';

export default function () {
  const { createHostedSession } = useMantle();
  useEffect(() => {
    (async () => {
      const session = await createHostedSession({ type: 'plans' });
      open(session.url, "_self");
    })();
  }, []);
  return '';
}

The hosted billing option eliminates the need to build your own plan selection UI while still giving you complete control over the appearance and branding of your billing pages.

For more details and advanced customization options, check out the @heymantle/polaris library documentation.