Stripe Payments

The engine builds the Content Security Policy from site.yaml. Adding Stripe hosts to allowedDomains opens script-src, frame-src, and connect-src so Stripe's web components can load and post to checkout.

Add payment buttons to any page using Stripe's embeddable web components. Stripe handles the entire checkout — the site just embeds a button.

Setup

1. Get credentials from Stripe Dashboard:

   • Publishable key (pk_live_xxxxx or pk_test_xxxxx)
   • Buy Button ID (buy_btn_xxxxx) — created in Payment Links > Buy Button

2. Add domain to CSP in data/site.yaml:

   {
     "allowedDomains": ["js.stripe.com"]
   }
   

Stripe Buy Button (recommended)

The Buy Button is a web component that renders a styled button and handles checkout:

<script async src="https://js.stripe.com/v3/buy-button.js"></script>

<stripe-buy-button
  buy-button-id="buy_btn_xxxxx"
  publishable-key="pk_live_xxxxx"
></stripe-buy-button>

Customize appearance (colors, shape, font) in the Stripe Dashboard when creating the Buy Button.

Attributes

Payment Link as Button (simpler)

For the simplest approach — just a link to Stripe's hosted checkout:

<a href="https://buy.stripe.com/xxxxx"
   class="inline-block px-8 py-3 bg-primary-600 text-white font-semibold rounded-lg hover:bg-primary-700 transition-colors no-underline">
  Buy Now — $29
</a>

Create the Payment Link in Stripe Dashboard > Payment Links.

Common Patterns

Pricing table with buy buttons

<script async src="https://js.stripe.com/v3/buy-button.js"></script>

<div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
  <div class="border rounded-xl p-8 text-center">
    <h3 class="text-xl font-bold">Starter</h3>
    <p class="text-3xl font-bold my-4">$9<span class="text-sm text-secondary-500">/mo</span></p>
    <ul class="text-sm text-secondary-600 space-y-2 mb-6">
      <li>5 pages</li>
      <li>1 form</li>
    </ul>
    <stripe-buy-button buy-button-id="buy_btn_starter" publishable-key="pk_live_xxxxx"></stripe-buy-button>
  </div>
  <!-- Repeat for Pro, Enterprise -->
</div>

Donation button

<stripe-buy-button
  buy-button-id="buy_btn_donate"
  publishable-key="pk_live_xxxxx"
></stripe-buy-button>

Set up the donation as a "customer chooses price" Payment Link in Stripe Dashboard.

Rules

• Always ask the user for their publishable key and buy button ID — never invent placeholder values
• Use pk_test_ keys for development, pk_live_ keys for production
• Stripe handles ALL checkout, receipts, and payment processing — the site just embeds the button
• The Buy Button requires a web server to render (won't work from file://)
• CSP requires both frame-src https://js.stripe.com and script-src https://js.stripe.com