How does it work?

Creating and deploying a pricing plan table for your users can be done in one day, in just a few simple steps:

1. Decide on your pricing strategy

Determining your pricing strategy is arguably one of the most important decisions for your business. If you've already decided on a strategy, please jump to step 2 to set it up in the Plan Builder. If not, our Billing model & Subscription Period will give you the basics, but we encourage you to check out our blog for lots of valuable resources to help guide your decision (we've been doing this a while).

2. Create your products, features and plans in Plan Builder

Plan Builder is a tool that anyone on your team can use to click, drag, and toggle their way to a standard pricing table that showcases your product plans and corresponding features.

Plans

Define your plans with their associated feature sets. We start you with 3 plans to show what’s possible but please add or remove as many plans as you need with the plus button on the right.

Features‍

Configure your product's features such as rate limits, maximum storage, etc. To add a feature, click the feature row on the left to open the feature editor. Name your new feature, and specify the type of feature you want it to be. There are currently six types to choose from.

  • Text

  • Checkbox

  • Pay-as-you-go (Metered)

  • Multiple Choice

  • Toggle

  • Numeric Range

Customizable Actions

Customize your call to action buttons to call out to your own HTTP endpoint or handle the event on the client in Javascript. From there, you can call out to Stripe, Chargebee, or other payments platform and provision any related services. Because the Manifold Web Component talks to your own action or handler, there are no restrictions on what you can do or the payments platform you can use.

Preview

Preview your plans before they get published. Grab the URL in the browser to share with your team.

3. Publish your product's pricing plans

Once you are satisfied with your product's pricing plans, publish them to make them live.

Save and publish plans

Simply Log in to save and publish your plans. All changes will be saved and automatically published to everywhere you have your embed code deployed, as well as the GraphQL API.

Update plan tables

When logging back into the Manifold Console, you will see all of your Products. Simply click the Edit button to go back into edit mode for each one. Publishing them again will update your pricing table and the GraphQL API.

4. Embed the generated pricing table into your website

Copy and paste the two HTML snippets into your website. When you save and publish changes to a plan, it's updated anywhere you've deployed the snippet.

Web Components

The modern Web Component architecture lets you simply copy and paste an embed code to display your pricing plan table wherever you want.

Web components are compatible with most popular Javascript frameworks:

Framework

Supported?

Vanilla JS (no framework)

Angular

React

Vue

Ember

Copy/Paste Integration With Your Frontend

Embed your newly created and ready-to-use pricing plan table into your frontend with two small HTML snippets. The pricing plan table is a Stencil web component. Stencil builds web components that run natively or near-natively in all widely used desktop and mobile browsers.

5. Create a handler for the Call-to-Action event

When a user clicks on your plan’s call-to-action button, the Manifold web component passes key:value pairs which contain information about the plan and any plan settings that have been selected. Depending on whether you selected "URL" or "Javascript action" for the CTA event above, you will either need to create a corresponding HTTP endpoint or a Javascript handler to handle the CTAClick event emitted when a user hits the call-to-action button for a given plan. What you do after that is dependent on your specific subscription, provisioning and/or billing workflows. Either way, you will need to query our GraphQL API to retrieve the features associated with the given plan.

GraphQL API‍

Access Manifold as the single source of truth for your plans and pricing, during signup flows identify what entitlements should be enabled for that user.

Flexibility to work with Stripe or any billing system

Customize your Call-to-Action (CTA) buttons to send users to a Stripe checkout flow or any billing or contact journey you want.