Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@prestashopcorp/billing-plans

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@prestashopcorp/billing-plans

A Web components library for displaying your plans

0.0.2
beta
npm

Version published: last year

Weekly downloads: 0

Maintainers: 7

Weekly downloads

Created: 2 years ago

Source

PrestaShop Billing Plans

A Web component library to display your plans

Documentation

About The Project

PrestaShop Billing Plans is a web component library that aims to provide a set of reusable components to use to display your plans in your module.

Using the Web Components

Prerequisites

A package manager like NPM, yarn or pnpm

Installation

For the moment this package is private
To install it you must configure a .npmrc file in your project

//registry.npmjs.org/:_authToken=YOUR_NPM_RO_SQUAD_TOKEN
@prestashopcorp:registry=https://registry.npmjs.org/

You can ask the IT for a NPM read only token for your squad if you don't have a NPM Token

# chose your favorite package manager
# NPM
$ npm install @prestashopcorp/billing-plans --save
# Yarn
$ yarn add @prestashopcorp/billing-plans
# pnpm
$ pnpm install @prestashopcorp/billing-plans

(back to top)

Usage

On demand import (recommended)

Import the Web component in the JS file your are using for your module and define a new customElement

import { BillingPlan } from '@prestashopcorp/billing-plans'

customElements.define("billing-plan", window.billingPlans.BillingPlan);
customElements.define("billing-plan-feature", window.billingPlans.BillingPlanFeature);

Then add the web component to your template

<billing-plan plan-id="builtforps-advanced" name="Plan Advanced" price="1000">
  <div slot="features">
    <billing-plan-feature>Feature 1</billing-plan-feature>
    <billing-plan-feature>Feature 2</billing-plan-feature>
    <billing-plan-feature>Feature 3</billing-plan-feature>
  </div>
</billing-plan>
<billing-plan plan-id="builtforps-ultimate" name="Plan Ultimate" price="3000">
  <div slot="features">
    <billing-plan-feature>Feature 1</billing-plan-feature>
    <billing-plan-feature>Feature 2</billing-plan-feature>
    <billing-plan-feature>Feature 3</billing-plan-feature>
    <billing-plan-feature>Feature 4</billing-plan-feature>
  </div>
</billing-plan>

ℹ️ Web components can use the same props as Vue components

ℹ️ You must handle the translation of feature and plan name by yourself

(back to top)

Usage without bundler

Copy paste the following code snippet in your html file

<head>
  <!-- Import component library -->
  <script src="//unpkg.com/@prestashopcorp/billing-plans"></script>
</head>

You can access to all of the components by using the billingPlans global object

(back to top)

FAQs

What is @prestashopcorp/billing-plans?

Is @prestashopcorp/billing-plans popular?

Is @prestashopcorp/billing-plans well maintained?

Package last updated on 16 Jun 2023

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