<manifold-init client-id="[my client ID]"></manifold-init>
<manifold-plan-table product-id="[my product ID]" client-id="[my client ID]"></manifold-plan-table>

Note that the <manifold-init> component is required only once per page for all Manifold Components (along with its JS). If you have that installed already, you may skip that here and in the following steps.

Option 1: Manifold CDN

Place the following at the very beginning of the <body> tag:

<script async type="module" src="https://js.cdn.manifold.co/@manifoldco/manifold-init/dist/manifold-init/manifold-init.esm.js" ></script>
<script nomodule src="https://js.cdn.manifold.co/@manifoldco/manifold-init/dist/manifold-init/manifold-init.js" ></script>
<script async type="module" src="https://js.cdn.manifold.co/@manifoldco/manifold-plan-table/dist/manifold-plan-table/manifold-plan-table.esm.js" ></script>
<script nomodule src="https://js.cdn.manifold.co/@manifoldco/manifold-plan-table/dist/manifold-plan-table.js" ></script>

Place this component’s CSS in your <head> tag (optional if you want to write your own styles):

<link rel="stylesheet" href="https://js.cdn.manifold.co/@manifoldco/manifold-plan-table/dist/manifold-plan-table/manifold-plan-table.css" />

Option 2: npm

Alternately, if you build your site with npm using webpack, create-react-app, etc., run:

npm install @manifoldco/manifold-init @manifoldco/manifold-plan-table

And add the following code to your application, ideally to your entry file so it’s loaded as early as possible:

import('@manifoldco/manifold-init/loader').then(({ defineCustomElements }) =>
  defineCustomElements(window)
);
import('@manifoldco/manifold-plan-table/loader').then(({ defineCustomElements }) =>
  defineCustomElements(window)
);

Also if using CSS from npm, import the file in a way that works for your setup (for example, webpack):

import '@manifoldco/manifold-plan-table/dist/manifold-plan-table/manifold-plan-table.css';

This libary is built using Stencil. For more information about integrating with your site, please refer to the latest framework docs.

Options

Options are passed to the component in the form of HTML Attributes:

Name	Required	Description	Example
`product-id`	Y	Your Product’s identifier	`<manifold-plan-table product-id="234qkjvrptpy3thna4qttwt7m2nf6">`
`client-id`	Y	Your Account identifier (this helps us associate analytics to your account)	`<manifold-plan-table client-id="284ablb7scfm8oxwz9wrxpt2q0jii">`
`base-url`		The URL the buttons link to (plan ID & user selection will be appended to the end of the URL in a query string)	`<manifold-plan-table base-url="/checkout">`
`cta-text`		Change the ”Getting Started” default text.	`<manifold-plan-table cta-text="Buy Now!">`
`version`		The version of your product (omit for latest published product). Use `version="latest"` for the latest draft.	`<manifold-plan-table version="1">`

Events

This component emits [Custom JavaScript Events][custom-events] at key interaction points.

Setup

To begin listening for events, add a listener like so (you’ll want to make sure that this component exists in the DOM):

// your custom listener function
function myFunc(evt) {
  console.log(evt);
}

document.querySelector('manifold-plan-table').addEventListener('ctaClick', myFunc); // do something on CTA clicks
document.querySelector('manifold-plan-table').addEventListener('init', myFunc); // do something on initial load
document.querySelector('manifold-plan-table').addEventListener('update', myFunc); // do something on updates

All Events

Event Name	Trigger	Returns
`ctaClick`	Fires when a user clicks the CTA	`planID`, `planDisplayName`, `userSelection`
`init`	Fires once when the component has loaded (broadcasts default options for all plans)	`defaultSelections`
`update`	Fires when a user selects a feature option (if you don’t have user-selectable features, you probably don’t need this)	`planID`, `planDisplayName`, `userSelection`

TypeScript + JSX

This component works in all frameworks & environments, but when you first add the component in a JSX + TypeScript setup, you may see the following warning at first:

Property 'manifold-init' does not exist on type 'JSX.IntrinsicElements'.

To solve this, import the types this library ships with. Create a custom-elements.d.ts file anywhere in your project that’s within tsconfig.json’s includes:

import { JSX as ManifoldInit } from '@manifoldco/manifold-init/loader';
import { JSX as ManifoldPlanTable } from '@manifoldco/manifold-plan-table/loader';
import { DetailedHTMLProps, HTMLAttributes } from 'react';

type StencilProps<T> = { [P in keyof T]?: Omit<T[P], 'ref'> };
type ReactProps<T> = { [P in keyof T]?: DetailedHTMLProps<HTMLAttributes<T[P]>, T[P]> };

type StencilToReact = ReactProps<HTMLElementTagNameMap> &
  StencilProps<ManifoldInit.IntrinsicElements> &
  StencilProps<ManifoldPlanTable.IntrinsicElements>;
// add additional Manifold Component types here if needed

declare global {
  export namespace JSX {
    interface IntrinsicElements extends StencilToReact {}
  }
}

You’ll now get TypeScript errors if you mistype an attribute while still being able to use JSX features like refs:

<manifold-init fakeproperty="foo" />
// Property 'fakeproperty' does not exist on type …

FAQs

What is @manifoldco/manifold-plan-table?

Is @manifoldco/manifold-plan-table popular?

Is @manifoldco/manifold-plan-table well maintained?

Package last updated on 01 Jun 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@manifoldco/manifold-plan-table