Pricing Table
A display-only pricing comparison table with configurable plans, features, and call-to-action buttons.
The Pricing Table field displays a side-by-side comparison of pricing plans. It does not collect user input directly, but each plan can include a call-to-action button that links to a checkout page or triggers a form action. Use it for SaaS pricing pages, service tier comparisons, or product plan selection.
Configuration
| Property | Type | Default | Description |
|---|---|---|---|
| label | string | -- | Heading text displayed above the pricing table |
| width | LayoutWidth | "full" | Horizontal space the field occupies |
| plans | PricingPlan[] | -- | Array of pricing plan objects (see below) |
| billingType | string | -- | Billing model: "subscription" or "oneTime" |
| showCtaButton | boolean | -- | Whether to show call-to-action buttons on each plan |
| showDiscountedPrice | boolean | -- | Whether to display discounted prices with strikethrough |
PricingPlan Object
Each plan in the plans array has the following properties:
| Property | Type | Description |
|---|---|---|
| id | string | Unique identifier for the plan |
| name | string | Plan name (e.g. "Starter", "Pro", "Enterprise") |
| price | string | Display price (e.g. "$29/mo") |
| description | string | Short description of the plan |
| monthlyPrice | string | Monthly price for toggle display |
| yearlyPrice | string | Yearly price for toggle display |
| features | string[] | List of feature descriptions |
| ctaText | string | Call-to-action button label (e.g. "Get Started") |
| ctaHref | string | URL the CTA button links to |
| discountedPrice | string | Discounted price shown with strikethrough on the original |
| ctaMethod | SubmitMethod | HTTP method for the CTA link ("GET", "POST", "PUT", "PATCH", "DELETE") |
| ctaHeaders | string | JSON string of headers for the CTA request |
| ctaTarget | string | Link target (e.g. "_blank", "_self") |
| ctaRel | string | Link rel attribute value |
Example Usage
A three-tier pricing table:
{
"type": "pricingTable",
"label": "Choose Your Plan",
"billingType": "subscription",
"showCtaButton": true,
"plans": [
{
"name": "Starter",
"price": "$9/mo",
"features": ["5 forms", "100 submissions/mo", "Email support"],
"ctaText": "Start Free Trial",
"ctaHref": "/signup?plan=starter"
},
{
"name": "Pro",
"price": "$29/mo",
"features": ["Unlimited forms", "10,000 submissions/mo", "Priority support", "Custom branding"],
"ctaText": "Get Started",
"ctaHref": "/signup?plan=pro"
}
]
}