{
  "name": "checkout-page",
  "title": "CheckoutPage",
  "description": "Multi-step checkout with auth, address, and payment.",
  "type": "component",
  "registryDependencies": [
    "cn"
  ],
  "files": [
    {
      "path": "checkout-page.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { ProcessCheckoutResult } from \"@cimplify/sdk\";\nimport { useCimplifyClient } from \"@cimplify/sdk/react\";\nimport { CimplifyCheckout } from \"@cimplify/sdk/react\";\nimport type { CimplifyCheckoutProps } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface CheckoutPageClassNames {\n  root?: string;\n  header?: string;\n  title?: string;\n  checkout?: string;\n}\n\nexport interface CheckoutPageProps {\n  /** Page title. */\n  title?: string;\n  /** Called after successful checkout. */\n  onComplete: (result: ProcessCheckoutResult) => void;\n  /** Called on checkout failure. */\n  onError?: (error: { code: string; message: string }) => void;\n  /** Props forwarded to CimplifyCheckout. */\n  checkoutProps?: Partial<\n    Omit<CimplifyCheckoutProps, \"client\" | \"onComplete\" | \"onError\">\n  >;\n  className?: string;\n  classNames?: CheckoutPageClassNames;\n}\n\n/**\n * CheckoutPage — thin page shell around CimplifyCheckout.\n *\n * Reads the CimplifyClient from CimplifyProvider context,\n * renders a page header, and delegates all checkout logic\n * to CimplifyCheckout.\n */\nexport function CheckoutPage({\n  title = \"Checkout\",\n  onComplete,\n  onError,\n  checkoutProps,\n  className,\n  classNames,\n}: CheckoutPageProps): React.ReactElement {\n  const { client } = useCimplifyClient();\n\n  return (\n    <div data-cimplify-checkout-page className={cn(className, classNames?.root)}>\n      <div data-cimplify-checkout-header className={classNames?.header}>\n        <h1 data-cimplify-checkout-title className={classNames?.title}>\n          {title}\n        </h1>\n      </div>\n\n      <CimplifyCheckout\n        client={client}\n        onComplete={onComplete}\n        onError={onError}\n        className={classNames?.checkout}\n        {...checkoutProps}\n      />\n    </div>\n  );\n}\n"
    }
  ]
}