---
title: "Astro demo"
description: "Explore an Astro fundraising checkout built with the Inttegro TypeScript SDK."
canonical: "https://studio.inttegro.com/demos/astro"
format: inttegro-machine-docs/v1
language: "C#"
sdk_version: "v10.3.0"
reader_profile: optional
reader_manifest: "https://studio.inttegro.com/machine/csharp/readers/index.json"
reader_identification: "Optional: declare your client only if known and your current-session capabilities; use reader_manifest for supplemental recommendations."
preamble_estimated_tokens: 378
model_token_report: "https://studio.inttegro.com/machine/token-report.json"
preamble_questions: 5
preamble_source: "general"
recommended_mcp_tools: []
estimated_tokens: 1177
token_estimate_method: "utf8_bytes_divided_by_4"
---

## Machine preamble

**Summary:** Explore an Astro fundraising checkout built with the Inttegro TypeScript SDK. This C# representation uses the selected SDK's native names wherever Studio has a verified mapping.

### Five questions

#### Q1. When should the reader use Astro demo?

Use this demo guide to inspect a complete working integration and compare it with the application being built.

#### Q2. What is authoritative on this page?

The demo proves one working composition, not the only supported architecture. Follow its linked SDK and API pages for current contracts.

#### Q3. What page-specific constraint matters most?

Do not copy demo credentials, identifiers, or deployment assumptions. Recreate configuration through supported public setup paths.

#### Q4. Can Inttegro MCP materially help with this task?

No catalog ability is sufficiently specific to recommend for this page. Use the documentation directly; consult the MCP catalog only if the task later requires governed live account context or a supported operation.

#### Q5. How should the reader verify the answer and continue?

Open the hosted experience, trace the corresponding source, and verify that its SDK and API usage still matches the current linked documentation. Continue with [Read the Orders API](https://studio.inttegro.com/machine/csharp/api/orders.md) and [Accept payment with Inttegro Checkout](https://studio.inttegro.com/machine/csharp/guides/accept-payment-with-inttegro-checkout.md) when those concerns enter scope.

## Document content

# Astro demo

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

> Demo Release is interactive content. Use the canonical page to view it.

## What you’ll build

- [Astro](https://astro.build/) components, server endpoints, and standalone Node deployment
- Typed Product lookup and Order creation with the [Inttegro TypeScript SDK](https://studio.inttegro.com/machine/csharp/sdks/typescript.md)
- A stable idempotency key and readable order number
- Progressive enhancement with [`@inttegro/js`](https://studio.inttegro.com/machine/csharp/web/javascript.md)
- 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.

> Demo Presentation Gallery is interactive content. Use the canonical page to view it.

## Run the demo

Add your API key, Product ID, Price ID, and public origin. The
[released README](https://github.com/inttegro/inttegro-demos/blob/astro-v1.8.3/astro/README.md)
has the local, Docker, build, and test commands.

## Key files

1. [`src/lib/checkout.ts`](https://github.com/inttegro/inttegro-demos/blob/astro-v1.8.3/astro/src/lib/checkout.ts)
   validates the amount against the catalog Price and creates the order.
2. [`src/pages/checkout.ts`](https://github.com/inttegro/inttegro-demos/blob/astro-v1.8.3/astro/src/pages/checkout.ts)
   handles the request and safe errors.
3. [`src/layouts/BaseLayout.astro`](https://github.com/inttegro/inttegro-demos/blob/astro-v1.8.3/astro/src/layouts/BaseLayout.astro)
   renders the shared page layout.
4. [`public/checkout-presentations.js`](https://github.com/inttegro/inttegro-demos/blob/astro-v1.8.3/astro/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

- [Open the live Astro demo](https://astro-demo.inttegro.dev)
- [Browse the released source](https://github.com/inttegro/inttegro-demos/tree/astro-v1.8.3/astro)
- [Accept payment with Inttegro Checkout](https://studio.inttegro.com/machine/csharp/guides/accept-payment-with-inttegro-checkout.md)
- [Read the Orders API](https://studio.inttegro.com/machine/csharp/api/orders.md)