https://github.com/manifoldco/manifold-subscription
Web Component to create a subscription
https://github.com/manifoldco/manifold-subscription
Last synced: about 2 months ago
JSON representation
Web Component to create a subscription
- Host: GitHub
- URL: https://github.com/manifoldco/manifold-subscription
- Owner: manifoldco
- License: mit
- Created: 2020-03-18T20:22:27.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-08-03T19:55:37.000Z (about 4 years ago)
- Last Synced: 2025-05-08T08:03:25.344Z (5 months ago)
- Language: TypeScript
- Homepage: https://www.manifold.co
- Size: 4.51 MB
- Stars: 0
- Watchers: 11
- Forks: 0
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# @manifoldco/manifold-subscription
**Components**
- ``
- ``
## Getting Started
Place the following HTML where you’d like the component to appear (this works in any JS framework,
or even no framework!):
```html
```
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 `` tag:
```html
```
Place this component’s CSS in your `` tag (optional if you want to write your own styles):
```html
```
### Option 2: npm
Alternately, if you build your site with npm using webpack, create-react-app, etc., run:
```bash
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:
```js
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):
```js
import '@manifoldco/manifold-subscription/dist/manifold-subscription/manifold-subscription.css';
```
This libary is built using [Stencil][stencil]. For more information about integrating with your
site, please refer to the latest [framework docs][stencil-framework].
## ``
### 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 | `` |
| `owner-id` | Y | The owner of the subscription | `` |
| `heading` | | Heading at the top of the component | `` |
| `stripe-publishable-key` | Y | A publishable key for your Stripe account | `` |
#### Children
##### `` (Optional)
Feature selections for a confugurable plan.
```html
```
Configured Features can also be set as a property using JavaScript:
```js
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 |
## ``
TBD
## ``
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][tsconfig-includes] property:
```ts
import { Components, JSX as LocalJSX } from '@manifoldco/manifold-subscription/loader';
import { DetailedHTMLProps, HTMLAttributes } from 'react';
type StencilProps = {
[P in keyof T]?: Omit;
};
type ReactProps = {
[P in keyof T]?: DetailedHTMLProps, T[P]>;
};
type StencilToReact = StencilProps &
ReactProps;
declare global {
export namespace JSX {
interface IntrinsicElements extends StencilToReact {}
}
}
```
[manifold-init]: https://github.com/manifoldco/manifold-init
[stencil-framework]: https://stenciljs.com/docs/overview
[stencil]: https://stenciljs.com/docs/introduction
[tsconfig-includes]: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#examples