mdk-cloudflare-react

Hosted checkout React UI for mdk-cloudflare.

This package gives you a ready-made buyer flow on top of the backend package's /api/mdk route:

• home page
• checkout page
• success page
• browser helpers for create_checkout, get_checkout, confirm_checkout, and list_products
• shared CSS for the hosted flow

Use it when you already have a Cloudflare Worker serving mdk-cloudflare and you want hosted checkout pages without rebuilding the buyer flow from scratch.

Documentation:

• Repo README: https://github.com/johncantrell97/mdk-cloudflare/blob/main/README.md
• React integration docs: https://github.com/johncantrell97/mdk-cloudflare/blob/main/HOSTED_CHECKOUT_SETUP.md
• Architecture guide: https://github.com/johncantrell97/mdk-cloudflare/blob/main/ARCHITECTURE.md
• Full setup guide: https://github.com/johncantrell97/mdk-cloudflare/blob/main/HOSTED_CHECKOUT_SETUP.md
• Source examples: https://github.com/johncantrell97/mdk-cloudflare/tree/main/examples

Install

npm install mdk-cloudflare mdk-cloudflare-react

Peer support:

• react: ^18.2.0 || ^19.0.0
• react-dom: ^18.2.0 || ^19.0.0

Requirement

Your Worker must already expose /api/mdk using createUnifiedHandler() from mdk-cloudflare.

Plain React / Vite SPA

import 'mdk-cloudflare-react/styles.css'
import { HostedCheckoutStandaloneApp } from 'mdk-cloudflare-react'

export function App() {
  return <HostedCheckoutStandaloneApp />
}

If the flow should live under a subpath like /checkout, use:

<HostedCheckoutStandaloneApp basePath="/checkout" />

React Router

import 'mdk-cloudflare-react/styles.css'
import { HostedCheckoutFlow } from 'mdk-cloudflare-react'
import { Route, Routes, useLocation, useNavigate } from 'react-router-dom'

function CheckoutRoute() {
  const location = useLocation()
  const navigate = useNavigate()

  return (
    <HostedCheckoutFlow
      pathname={location.pathname}
      search={location.search}
      navigate={navigate}
      basePath="/checkout"
    />
  )
}

export function App() {
  return (
    <Routes>
      <Route path="/checkout/*" element={<CheckoutRoute />} />
    </Routes>
  )
}

Main Exports

import 'mdk-cloudflare-react/styles.css'
import {
  HostedCheckoutFlow,
  HostedCheckoutStandaloneApp,
  HostedCheckoutHomePage,
  HostedCheckoutPage,
  HostedCheckoutSuccessPage,
} from 'mdk-cloudflare-react'

The higher-level entry points are:

• HostedCheckoutStandaloneApp for simple SPAs
• HostedCheckoutFlow for apps that already own routing

basePath is optional and supports mounts like /checkout/* or /pay/*.

Reference Apps

• React + Vite hosted checkout: https://github.com/johncantrell97/mdk-cloudflare/tree/main/examples/react-vite-worker
• React Router hosted checkout: https://github.com/johncantrell97/mdk-cloudflare/tree/main/examples/react-router-worker