Skip to main content
View as Markdown

RedwoodSDK demo

Build a Cloudflare-native contribution flow with React Server Components. One Worker route creates the order for all three payment modes.

This demo uses the current RedwoodSDK, not the legacy RedwoodGraphQL stack.

What you’ll build

  • React Server Components and Web-standard request handling in RedwoodSDK
  • A Worker-held API key and application-lifetime Inttegro client
  • React integration through @inttegro/react
  • Trusted Product and Price lookup before Order creation
  • Bounded tiers, retry-safe idempotency, and a readable order number
  • Safe completion, cancellation, and error states

See the flow

The gallery shows one Worker-created order in each Checkout presentation. Worker secrets never enter the React component tree.

RedwoodSDK desktop embedded Checkout
Openfield RedwoodSDK campaign with Inttegro Checkout embedded beside the selected contribution tier. Shown without a previously attached payment method.
Embedded. Checkout mounts after hydration while the server-rendered campaign remains visible around it. Shown without a previously attached payment method.
RedwoodSDK desktop modal Checkout
Openfield RedwoodSDK campaign dimmed behind an Inttegro Checkout modal. Shown with an attached payment method.
Modal. The React adapter contains the payment lifecycle in an overlay without replacing the campaign route. Shown with an attached payment method.

Select any image to view it full screen.

Run the demo

Add the API key to .dev.vars, set the Product and Price IDs, and run the Worker. The released README has the exact commands.

Key files

  1. src/checkout.ts validates the tier and creates the order.
  2. src/worker.tsx connects the Worker route, React rendering, and response.
  3. src/inttegro-demo-checkout.tsx manages the React Checkout surface.
  4. public/checkout-presentations.js coordinates the three Checkout modes.

Before you ship

Store contributions and consume authenticated server events. Update public totals only from verified payment state.

Next