Skip to content

manifoldco/manifold-subscription

Repository files navigation

@manifoldco/manifold-subscription

Built With Stencil

Components

  • <manifold-subscription-create>
    • <manifold-configured-feature>

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-subscription-create
  heading="Purchase Subscription"
  plan-id="[my plan ID]"
></manifold-subscription-create>

Note that the <manifold-init> component is required once per page for any other Manifold Web Components you embed.

Option 1: Manifold CDN

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

<!-- modern browsers -->
<script
  async
  type="module"
  src="https://js.cdn.manifold.co/@manifoldco/manifold-init/dist/manifold-init/manifold-init.esm.js"
></script>
<script
  async
  type="module"
  src="https://js.cdn.manifold.co/@manifoldco/manifold-subscription/dist/manifold-subscription/manifold-subscription.esm.js"
></script>

<!-- legacy browsers -->
<script
  nomodule
  src="https://js.cdn.manifold.co/@manifoldco/manifold-init/dist/manifold-init/manifold-init.js"
></script>
<script
  nomodule
  src="https://js.cdn.manifold.co/@manifoldco/manifold-subscription/dist/manifold-subscription.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-subscription/dist/manifold-subscription/manifold-subscription.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-subscription/loader').then(({ defineCustomElements }) =>
  defineCustomElements(window)
);

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

import '@manifoldco/manifold-subscription/dist/manifold-subscription/manifold-subscription.css';

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

<manifold-subscription-create>

Options

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

Attributes

Name Required Description Example
plan-id Y Your Plan’s identifier <manifold-subscription-create product-id="234qkjvrptpy3thna4qttwt7m2nf6">
owner-id Y The owner of the subscription <manifold-subscription-create owner-id="[id]">
heading Heading at the top of the component <manifold-subscription-create heading="Purchase Subscription">
stripe-publishable-key Y A publishable key for your Stripe account `<manifold-subscription-create stripe-publishable-key="pk_test_[hash]

Children

<manifold-configured-feature> (Optional)

Feature selections for a confugurable plan.

<manifold-subscription-create plan-id="[configurable-plan-id]">
  <manifold-configured-feature label="feature" value="feature-value">     <!-- string feature -->
  <manifold-configured-feature label="another-feature" value="10">        <!-- number feature -->
  <manifold-configured-feature label="yet-another-feature" value="true">  <!-- boolean feature -->
</manifold-subscription-create>

Configured Features can also be set as a property using JavaScript:

const element = document.getElementByTagName('manifold-subscription-create');

element.configuredFeatures = {
  { feature: 'feature-value' },
  { 'another-feature': 10 },
  { 'yet-another-feature': true },
};

Events

success

A subscription creation has been initialized.

Detail Type Description
id string A subscription ID

<manifold-subscription-details>

TBD

<manifold-subscription-list>

TBD

Using in TypeScript + JSX

This Web Component works in all frameworks & environments, but if you’re using within a React & TypeScript setup, you’ll also need the following config.

Create a custom-elements.d.ts file anywhere in your project that’s within tsconfig.json’s includes property:

import { Components, JSX as LocalJSX } from '@manifoldco/manifold-subscription/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<T = LocalJSX.IntrinsicElements, U = HTMLElementTagNameMap> = StencilProps<T> &
  ReactProps<U>;

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