Skip to content

Latest commit

 

History

History
151 lines (111 loc) · 8.23 KB

README.md

File metadata and controls

151 lines (111 loc) · 8.23 KB
Raw

@manifoldco/manifold-plan-table

Built With Stencil

Getting Started

Place the following HTML where you’d like the component to appear (this works in any JS framework, or even no framework!):

<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 …