@manifoldco/manifold-subscription
v0.0.16
Published
Manifold Subscription Web Components
Downloads
844
Keywords
Readme
@manifoldco/manifold-subscription
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-tableAnd 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]|pk_live_[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 |
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 {}
}
}