Pricing table patterns
Three pricing table patterns — from a clean 2-column layout to a monthly/annual toggle with Stripe Checkout integration. Each is deployable through a single conversation with Claude, styled to match your brand.
Pricing table patterns for every product
Pick the layout that fits your pricing structure. Each prompt adapts to your plan names, prices, and Stripe product IDs.
1. Two-column Starter / Pro
The simplest pricing layout — two plans side by side. Clean and effective for products with a clear free/paid or basic/pro split. No JavaScript required, pure HTML and CSS.
- Two-column CSS Grid layout with equal-width plan cards
- Feature checklist per plan with tick markers and strikethrough for unavailable features
- CTA button per plan — links to Stripe Checkout Session or any URL
- Optional “Most popular” badge on the preferred plan
- Responsive: stacks to single column on mobile
- Pure HTML/CSS — no JavaScript dependency
Add a two-column pricing section to my site. Plan 1 (Starter, free): features [list]. Plan 2 (Pro, £[X]/month): features [list]. Add a “Most popular” badge to Pro. Each plan has a CTA button — Starter links to /sign-up, Pro links to a Stripe Checkout Session for price ID [price_xxx]. Style it to match the existing site theme. Stack to single column on mobile.
2. Three-column with highlighted middle
The standard SaaS pricing table. Three tiers with the middle plan elevated visually as the recommended option. Proven conversion layout for subscription products with a clear “best value” tier.
- Three-column layout — Basic, Pro (recommended), Enterprise
- Middle column visually elevated: accent border, glow shadow, “Most popular” badge
- Feature list per plan with checkmarks and optional “coming soon” labels
- Stripe Checkout Session link per plan (or “Contact us” for enterprise)
- Per-plan description text and monthly price with currency symbol
- Responsive: 3-column desktop, 1-column mobile with recommended plan first
Build a 3-column pricing table for my site. Plans: Basic (£[X]/mo): [features]. Pro (£[Y]/mo, recommended): [features]. Enterprise (£[Z]/mo or “Contact us”): [features]. Highlight the Pro column with an accent border and “Most popular” badge. Wire each CTA to a Stripe Checkout Session (price IDs: [list]). Match the existing site colours. Stack to single column on mobile with Pro first.
3. Monthly / Annual toggle with savings badge
A toggle that switches between monthly and annual pricing, showing the annual saving as a badge per plan. Increases annual plan uptake by making the saving visible and immediate. Works with 2 or 3 columns.
- Monthly / Annual toggle button — vanilla JS, no library
- Price text swaps on toggle with smooth CSS opacity transition
- “Save X%” badge appears on annual view per plan
- Separate Stripe Checkout Session links for monthly and annual Stripe price IDs
- Configurable default (annual or monthly)
- Compatible with 2-column or 3-column plan layout
Build a pricing section with a monthly/annual toggle. Plans: [list plan names and descriptions]. Monthly prices: [list]. Annual prices: [list — typically ~20% less]. Show a “Save X%” badge on annual view for each plan. Wire monthly CTAs to Stripe price IDs [list monthly IDs] and annual CTAs to [list annual IDs]. Use vanilla JS for the toggle — no libraries. Default to annual pricing. Match the site’s existing colour scheme.
Connected to Stripe out of the box
Claude wires every pricing table to Stripe Checkout Sessions — not a payment form you build yourself. Stripe handles PCI compliance, 3D Secure, and international payments automatically.
Stripe Checkout Sessions
Each plan CTA links to a Stripe-hosted Checkout page. Claude generates the PHP endpoint that creates the Session — you supply your Stripe API key and price IDs.
Webhook handler included
Claude creates a webhook.php endpoint that listens for checkout.session.completed and subscription events — updating your MySQL orders table on successful payment.
Subscriptions & one-time
Both payment modes supported. Monthly/annual subscriptions use Stripe Subscriptions API. One-time purchases use Payment Intents. Claude handles both in the same deployment.
Zero platform commission
Claude CMS takes no cut on payments. You pay Stripe’s standard rate (typically 1.4% + 20p for UK cards) and nothing else. No app fees, no per-transaction platform charges.
Deploy a pricing page today
From £6.99/month. First month free — no credit card required. Pick a pattern, open Claude, paste the prompt. Your pricing page will be live in minutes.