ProductPlan

The ProductPlan component is a set of composable components used together to create a classic pricing page.

Composable Components

The ProductPlan is made up of several components that allow you to compose different types of product plan layouts.

Component	Description
ProductPlans	The root component element
ProductPlan	The wrapper element for a single product plan
ProductPlanName	The element that contains the product name
ProductPlanDesc	The element that contains the product description
ProductPlanPrice	The element that contains the product price
ProductPlanFeatures	The element that displays the list of features
ProductPlanAction	The trigger button for the product selection event.

Examples

const products = ref([]) // this can come from your database or from stripe, etc

<ProductPlans class="mt-20">
    <template v-for="(product, i) in products" :key="i">
    <ProductPlan
        class="relative"
        :class="{ 'popular-border': product.metadata.popular === 'true' }"
    >
        <ProductPlanName :name="product.name" />
        <span v-if="product.metadata.popular === 'true'" class="popular">
            Most Popular
        </span>
        <ProductPlanPrice :price="product.prices[0].unit_amount / 100" />
        <ProductPlanDesc :description="product.description" />
        <ProductPlanFeatures :features="product.marketing_features" />
        <ProductPlanAction
            @product-action:click="handleProductClick(product)"
            class="btn-primary w-full"
            label="Purchase"
        />
    </ProductPlan>
    </template>
</ProductPlans>

A working example of this can be in /frontend/views/PricingPlansView.vue.

ProductPlans

Component Props

Prop	Description	Options
--

Component Events

Event	Description	Args
--

CSS Classes

Class	Description
.product-plans	the class applied to the root element

ProductPlanName

Component Props

Prop	Description	Options
name	the name of the product
as	the type of HTML element to render as

Component Events

Event	Description	Args
--

CSS Classes

Class	Description
.product-plan-name	the class applied to the root element

ProductPlanDesc

Component Props

Prop	Description	Options
description	the product description
as	the type of HTML element to render as

Component Events

Event	Description	Args
--

CSS Classes

Class	Description
.product-plan-desc	the class applied to the root element

ProductPlanPrice

Component Props

Prop	Description	Options
price	the product price
billed_unit	the units the product is priced at. For example, monthly or annually
as	the type of HTML element to render as

Component Events

Event	Description	Args
--

CSS Classes

Class	Description
.product-plan-price	the class applied to the root element

ProductPlanFeatures

Component Props

Prop	Description	Options
features	an array of feature objects with name props for each feature

Component Events

Event	Description	Args
--

CSS Classes

Class	Description
.product-plan-features	the class applied to the root element
.product-plan-feature	the class applied to the each feature element

ProductPlanAction

Component Props

Prop	Description	Options
label	the button text label

Component Events

Event	Description	Args
product-action:click	emits when the button element is clicked

CSS Classes

Class	Description
.product-plan-action	the class applied to the root element