Skip to main content
View as Markdown

Astro demo

Build an Astro contribution page with embedded, modal, and hosted Checkout. Astro creates the order on the server.

What you’ll build

  • Astro components, server endpoints, and standalone Node deployment
  • Typed Product lookup and Order creation with the Inttegro TypeScript SDK
  • A stable idempotency key and readable order number
  • Progressive enhancement with @inttegro/js
  • A customer-selected Price with trusted server-side amount validation

See the flow

The gallery shows the same order in each Checkout presentation. The browser receives only the finalized order ID.

Astro desktop embedded Checkout
Openfield Astro campaign with Inttegro Checkout embedded beside the selected contribution tier. Shown without a previously attached payment method.
Embedded. Astro keeps the content-rich campaign server-rendered while Checkout occupies a dedicated payment region. Shown without a previously attached payment method.
Astro desktop modal Checkout
Openfield Astro campaign dimmed behind an Inttegro Checkout modal. Shown with an attached payment method.
Modal. Payment becomes the focused task without replacing the supporter’s campaign route. Shown with an attached payment method.

Select any image to view it full screen.

Run the demo

Add your API key, Product ID, Price ID, and public origin. The released README has the local, Docker, build, and test commands.

Key files

  1. src/lib/checkout.ts validates the amount against the catalog Price and creates the order.
  2. src/pages/checkout.ts handles the request and safe errors.
  3. src/layouts/BaseLayout.astro renders the shared page layout.
  4. public/checkout-presentations.js presents Checkout in all three modes.

Before you ship

Store the contribution, idempotency key, and Inttegro order ID. Update totals and send receipts only after server-side payment verification.

Next