Build beautiful, accessible pricing tables programmatically with the V2 JSON API
A classic three-tier pricing table with monthly/annual billing toggle, savings badges, and feature lists.
RSL.JSONLayout.renderLayout('#pricing-container', {
version: 2,
layoutId: "saas-pricing",
breakpoints: { xs: 1 },
items: [{
content: {
type: "pricing-table",
currency: "$",
animate: true,
tiers: [
{
name: "Starter",
description: "Perfect for individuals",
priceMonthly: 9,
priceAnnual: 7,
ctaText: "Get Started",
ctaUrl: "#signup",
features: [
{ text: "5 Projects", included: true },
{ text: "10GB Storage", included: true },
{ text: "Email Support", included: true },
{ text: "API Access", included: false },
{ text: "Custom Domain", included: false }
]
},
{
name: "Professional",
description: "For growing teams",
priceMonthly: 29,
priceAnnual: 24,
badge: "Most Popular",
highlighted: true,
ctaText: "Start Free Trial",
ctaUrl: "#trial",
ctaVariant: "primary",
features: [
{ text: "Unlimited Projects", included: true },
{ text: "100GB Storage", included: true },
{ text: "Priority Support", included: true },
{ text: "API Access", included: true },
{ text: "Custom Domain", included: true }
]
},
{
name: "Enterprise",
description: "For large organizations",
customPrice: "Contact Sales",
ctaText: "Contact Us",
ctaUrl: "#contact",
features: [
{ text: "Unlimited Everything", included: true },
{ text: "Unlimited Storage", included: true },
{ text: "24/7 Phone Support", included: true },
{ text: "Full API Access", included: true },
{ text: "SLA Guarantee", included: true }
]
}
]
}
}]
});A simpler pricing table with fixed prices (no monthly/annual toggle) and custom price text.
RSL.JSONLayout.renderLayout('#simple-container', {
version: 2,
layoutId: "simple-pricing",
breakpoints: { xs: 1 },
items: [{
content: {
type: "pricing-table",
currency: "$",
billingPeriod: "one-time",
tiers: [
{
name: "Free",
description: "Get started at no cost",
customPrice: "Free Forever",
ctaText: "Sign Up Free",
ctaUrl: "#free",
features: [
{ text: "1 User", included: true },
{ text: "Basic Features", included: true },
{ text: "Community Support", included: true }
]
},
{
name: "Pro",
description: "One-time purchase",
priceMonthly: 99,
priceNote: "one-time payment",
badge: "Best Value",
highlighted: true,
ctaText: "Buy Now",
ctaUrl: "#buy",
ctaVariant: "primary",
features: [
{ text: "5 Users", included: true },
{ text: "All Features", included: true },
{ text: "Email Support", included: true },
{ text: "Free Updates", included: true }
]
},
{
name: "Team",
description: "For larger teams",
priceMonthly: 249,
priceNote: "one-time payment",
ctaText: "Buy Now",
ctaUrl: "#buy-team",
features: [
{ text: "Unlimited Users", included: true },
{ text: "All Features", included: true },
{ text: "Priority Support", included: true },
{ text: "Free Updates", included: true },
{ text: "Custom Branding", included: true }
]
}
]
}
}]
});Demonstrates feature tooltips and partial inclusion states for more nuanced feature comparisons.
RSL.JSONLayout.renderLayout('#tooltips-container', {
version: 2,
layoutId: "tooltips-pricing",
breakpoints: { xs: 1 },
items: [{
content: {
type: "pricing-table",
currency: "$",
tiers: [
{
name: "Basic",
priceMonthly: 19,
priceAnnual: 15,
ctaText: "Choose Basic",
features: [
{
text: "Storage",
included: true,
tooltip: "10GB of secure cloud storage"
},
{
text: "API Calls",
included: "partial",
tooltip: "Limited to 1,000 calls/month"
},
{
text: "Support",
included: true,
tooltip: "Email support with 48hr response time"
},
{
text: "Analytics",
included: false,
tooltip: "Advanced analytics not available"
}
]
},
{
name: "Premium",
priceMonthly: 49,
priceAnnual: 39,
badge: "Recommended",
highlighted: true,
ctaText: "Choose Premium",
ctaVariant: "primary",
features: [
{
text: "Storage",
included: true,
tooltip: "100GB of secure cloud storage"
},
{
text: "API Calls",
included: true,
tooltip: "Unlimited API calls"
},
{
text: "Support",
included: true,
tooltip: "Priority support with 4hr response time"
},
{
text: "Analytics",
included: true,
tooltip: "Full analytics dashboard with exports"
}
]
}
]
}
}]
});