Can You Combine Static Jekyll Catalogs with Dynamic Stripe Checkout?

By -

Yes — and it's surprisingly simple. While Jekyll itself can’t handle dynamic logic or server-side sessions, Stripe provides hosted checkout links that work perfectly in static sites. By embedding these links directly into your product pages, you can turn your static catalog into a functional storefront.

What Is Stripe Checkout?

Stripe Checkout is a fully hosted payment page provided by Stripe. You create the product and pricing inside your Stripe dashboard, then get a unique checkout link per product. No backend code needed.

Step-by-Step: Integrating Stripe Checkout into Jekyll

Step 1: Create Products in Stripe Dashboard

  • Go to the Stripe Products Dashboard.
  • Add a product with price and currency.
  • Click “More” → “Use with Checkout” to generate a hosted link.

Example Stripe Checkout URL:

https://buy.stripe.com/8wMdUe6Gz4z82eE7st

Step 2: Add Checkout URL to Your Product Front Matter

---
title: "Wireless Headphones"
price: "$79"
sku: "WH-XB900N"
image: "/assets/products/headphones.jpg"
layout: product
stripe_url: "https://buy.stripe.com/8wMdUe6Gz4z82eE7st"
---

Step 3: Modify the Product Layout to Include a Checkout Button

{% raw %}
<a href="{{ page.stripe_url }}" class="btn-checkout">Buy with Stripe</a>
{% endraw %}

Style the button with Tailwind, Bootstrap, or custom CSS for a modern look.

How to Handle Inventory and Stock

Since Jekyll is static, it doesn’t track stock. But Stripe can control this for you:

  • Set limited stock per item in Stripe.
  • Enable Stripe’s quantity limits to stop orders when stock runs out.

Optional: Display Stock Status in Jekyll

Jekyll itself can’t fetch real-time stock, but you can simulate it by maintaining a small inventory YAML file or use Stripe’s webhook + JSON feed to sync it externally and rebuild Jekyll with GitHub Actions periodically.

How to Handle Product Variants with Stripe

Create separate Stripe checkout links per variant and list them individually inside your product front matter:

variants:
  - name: "Black / Large"
    price: "$79"
    stripe_url: "https://buy.stripe.com/black-l"
  - name: "White / Medium"
    price: "$75"
    stripe_url: "https://buy.stripe.com/white-m"

Render them like this:

{% raw %}
<ul>
{% for v in page.variants %}
  <li>{{ v.name }} — {{ v.price }} 
  <a href="{{ v.stripe_url }}" class="btn-small">Buy Now</a></li>
{% endfor %}
</ul>
{% endraw %}

Use Case: Migrating from WooCommerce to Stripe + Jekyll

Let’s look at a real-world migration case:

Original Setup (WooCommerce)

  • 60+ digital products (ebooks, music)
  • Variable pricing with coupons
  • Frequent plugin conflicts and slow load times

Migrated Setup (Jekyll + Stripe)

  • Products stored in _products folder
  • One Stripe checkout link per product/variant
  • Hosted on GitHub Pages with Netlify Forms for inquiries

Results:

  • Load time reduced from 5.6s to 1.2s
  • No plugin or update headaches
  • Stripe handles checkout, tax, and delivery

Enhancing UX: Add-to-Cart Alternatives

Since Stripe links are per-product, you lose the dynamic cart. But you can improve the user experience using:

1. “Add to Bag” with Local Storage

Use JS to store selected product data in localStorage and show a faux cart sidebar. Redirect to Stripe from there.

2. Redirect to Stripe on Button Click

Skip cart entirely — go directly to Stripe checkout from every product page.

3. Batch Products Using Stripe Checkout Sessions

Advanced: Use serverless functions (e.g. Netlify Functions or Cloudflare Workers) to dynamically create multi-item checkout sessions.

Can You Automate Stripe Link Insertion in Jekyll?

If you have many products, maintaining checkout URLs manually is painful. You can:

  • Use a CSV/YAML data file exported from Stripe and import into your build.
  • Automate Stripe data sync with GitHub Actions using stripe-cli.

Conclusion: Stripe Checkout Makes Jekyll Catalogs Truly Sellable

Combining Jekyll with Stripe’s hosted checkout bridges the gap between a static catalog and a real store. You can enjoy:

  • Fast, secure, static hosting (no PHP or backend)
  • Real payments, with tax and invoice support
  • No plugin maintenance or WooCommerce conflicts

While it doesn’t offer cart functionality out of the box, you gain flexibility and peace of mind. This approach is ideal for creators, digital product sellers, and catalog sites transitioning from WordPress to static architecture.