Guides

How to add a pricing table to your website (HTML, builders and Paylead)

Three ways to add a pricing table to your website: write it in HTML and CSS, use a website builder, or embed one that takes payment by MoMo or card.

Back to blog
How to add a pricing table to your website (HTML, builders and Paylead)

To add a pricing table to your website, you can write one in HTML and CSS, use your website builder's pricing block, or paste an embeddable table that already has working Subscribe buttons. The first two give you a nice-looking table. Only the third also takes the payment. This guide shows all three, so you can pick the one that fits your site.

What should a pricing table include?

Keep it simple. For each plan show:

  • The plan name
  • The price and how often it renews (per month, per year)
  • Three to six lines on what the buyer gets
  • One clear button
  • A highlighted "most popular" plan, to guide the choice

Two to four plans is best. More than four makes people stall.

Option 1: Write it in HTML and CSS

This works on any site where you can paste code. Here is a plain three-column table:

<div class="plans">
  <div class="plan">
    <h3>Basic</h3>
    <p class="price">GH₵ 50 <span>/month</span></p>
    <ul>
      <li>One course</li>
      <li>Email support</li>
    </ul>
    <a href="/checkout/basic">Choose Basic</a>
  </div>
  <div class="plan featured">
    <h3>Pro</h3>
    <p class="price">GH₵ 120 <span>/month</span></p>
    <ul>
      <li>All courses</li>
      <li>Monthly live call</li>
    </ul>
    <a href="/checkout/pro">Choose Pro</a>
  </div>
</div>
.plans { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.plan { border: 1px solid #ddd; border-radius: 12px; padding: 24px; }
.plan.featured { border-color: #111; }
.price { font-size: 2rem; font-weight: 700; }

The auto-fit grid stacks the plans on a phone and puts them side by side on a computer. The catch: the buttons are only links. You still need a way to take payment and give access, which means setting up checkout and a way to track who has paid.

Option 2: Use your website builder

Most builders have a ready-made pricing section.

  • WordPress: a block or page-builder pricing element, or a plugin
  • Wix, Squarespace, Webflow: add a pricing or "plans" section from their library, or use their own pricing plans feature
  • Canva or Carrd websites: a pricing section template

Edit the text, change the colours and link each button to your payment page. Check what the builder's own payment feature supports in your country, as some only work with cards or payment providers not available in Ghana.

Option 3: Embed a pricing table that takes payment

If you sell subscriptions to people in Ghana, you want MoMo and card. With Paylead, you can show your subscription plans side by side on your own website, each with a Subscribe button that opens checkout over your page. You do not rebuild your site or write any table code.

You need at least one subscription product. Subscriptions are on the Pro and Business plans.

  1. Go to Settings → Developers → Embeds.
  2. Choose Subscription plans.
  3. Tick the plans to show (up to 4) and click Highlight on the one you want to stand out. It gets a "Most popular" badge.
  4. Set the colour, theme and corners.
  5. Copy the HTML and paste it on your site.

Each plan shows its price, how often it renews, and the lines you wrote under What subscribers get. The plans appear in the order you pick.

The code looks like this:

<script src="https://paylead.app/embed.js" async></script>

<div
  data-paylead-pricing="b4s1c0,pr0p1n,t3am99"
  data-paylead-featured="pr0p1n"
></div>

The codes inside data-paylead-pricing are your subscription product codes. Full steps are in the help guide, add a pricing table to your website, and the developer docs show every option, including how to pass a signed-in user's id so your app knows who paid. It works on WordPress, Wix, Webflow and any site that accepts HTML. For WordPress, see add Paylead to WordPress.

Which option should I choose?

You Choose
Want a table for show only (for example, quotes by WhatsApp) HTML and CSS or a builder block
Have a builder with a payment feature that works in Ghana The builder's own pricing plans
Need MoMo and card subscriptions on your own site An embedded table with checkout

Tips for a pricing table that converts

  • Put the plan you want most people to pick in the middle and highlight it.
  • Write benefits, not features: "Join a live call every month" beats "Live calls".
  • Keep names plain. "Starter, Pro, Team" is clear.
  • Show the price in cedis.
  • Say how to cancel, near the table.
  • Make sure it reads well on a phone, because most visitors in Ghana are on one.

See how to charge monthly subscriptions in Ghana with mobile money for how renewals work with MoMo.

FAQ

Can I add a pricing table to a free website builder?

Yes, if it lets you paste HTML or embed code. Most do, sometimes only on paid plans.

How many plans should I show?

Two to four. Paylead's embed shows up to four.

Do visitors leave my site to pay?

With the Paylead embed, checkout opens over your page. For mobile money, the buyer approves the payment on their phone and then lands on your after-purchase link.

Do I need to code?

Not with the embed: you copy and paste. The HTML and CSS option needs light editing.

Start selling subscriptions with Paylead →

Three women planning their business together

Your first sale could land tonight.

Free to start. 4% + GH₵ 1 per sale, or let your buyer pay it. Paid out the next working day.