Build a Pricing Table in Statamic

How to setup Statamic to support a complex pricing table

On a recent project, I've been working on a SaaS app built in Laravel and Vue JS for a client.

I've also been involved in building out the marketing site that's powered by Statamic, a totally awesome flat-file CMS.

Most SaaS apps tend to have different tiers of pricing within the app. The more you pay, the more features that are available to you or your company.

Historically, building a content editable pricing table in a CMS has been a horrible experience. Both from the editors view and the developer. My old friend Matrix for ExpressionEngine got you close to being a great solution, but you would get to a point where the UI became kinda gnarly.

Of course, there's no silver bullet, each app will have its nuances and what I'm about to demo isn't perfect but hopefully it will save you some time in the future if you need a starting point for one in Statamic.

Our SaaS app pricing has a couple of elements:

  • packages (name, cost, description, feature set)
  • features

The lovely marketing folks here effectively wanted 2 pricing tables. One would present the 3 packages, the monthly/annual pricing in various currencies as well as highlighting some of the features available to that package. The second table would have a side-by-side feature comparison between packages

This is what design came up with for both tables

One thing I wanted to avoid was marketing having to edit content in multiple places. Features seemed the obvious place where that was likely to happen and so I decided to have each feature (and description of that feature) as a content type within Statamic.

My package overview I decided would be a stacked Statamic grid field containing these fields:

  • package name (text)
  • package colour (to style the signup button) (collection)
  • feature overview (collection)
  • pricing (grid) with currency (text) and costs (array) for monthly/annual

Here's what the UI for that ended up looking like

The package feature comparison table was a little trickier.

Marketing wanted to group the features by type and display if that feature was available to the package or perhaps have some text display for that feature.

In this instance, I opted for feature_comparison to be a stacked grid field. With the following fields:

  • feature group name (text)
  • feature set (grid) containing fields: feature name (collection referencing features) and feature availability (array with keys of basic, pro & premium)

The array field above is one piece that I'd like to improve upon. Right now there's no correlation between the packages field and the feature availability.

If a new package is added, marketing would need a developer to add it to the options of the array field in the comparison table.

Here's what the UI for the feature comparison builder looks like in Statamic.

Here's a breakdown of the Statamic YAML configs for the feature collection and then for the pricing page as well as the HTML for the pricing page and package comparison table.

As always, if you can find a better way, lemme know.