payment-processing.json

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "payment-processing",
  "title": "Payment Processing",
  "description": "A payment processing state card with spinner and security messaging.",
  "dependencies": ["lucide-react"],
  "registryDependencies": ["card", "separator", "utils"],
  "files": [
    {
      "path": "src/registry/billingsdk/payment-processing.tsx",
      "content": "import { Loader2, Shield, LucideIcon } from \"lucide-react\";\nimport { Separator } from \"@/components/ui/separator\";\n\ntype PaymentProcessingTypes = {\n  status?: boolean;\n  title?: string;\n  description?: string;\n  icon?: LucideIcon;\n  processLabel?: string;\n  warning?: string;\n};\n\nexport default function PaymentProcessing({\n  status = true,\n  title = \"Processing Payment\",\n  description = \"This may take a few moments\",\n  icon: Icon = Shield,\n  processLabel = \"Secure Transaction\",\n  warning = \"Please do not close this window\",\n}: PaymentProcessingTypes) {\n  return (\n    <>\n      {status && (\n        <div className=\"bg-background flex min-h-screen items-center justify-center p-4\">\n          <div className=\"bg-card w-full max-w-sm space-y-6 rounded-xl border px-8 py-6 text-center md:p-8 lg:p-10\">\n            <div className=\"space-y-4\">\n              <div className=\"flex justify-center\">\n                <Loader2 className=\"text-primary h-12 w-12 animate-spin\" />\n              </div>\n              <div className=\"space-y-2\">\n                <h1 className=\"text-2xl font-semibold tracking-tight\">\n                  {title}\n                </h1>\n                <p className=\"text-muted-foreground text-sm\">{description}</p>\n              </div>\n            </div>\n\n            <Separator />\n\n            <div className=\"space-y-2\">\n              <div className=\"flex items-center justify-center gap-2 text-sm\">\n                <Icon className=\"text-muted-foreground h-4 w-4\" />\n                <span className=\"text-muted-foreground\">{processLabel}</span>\n              </div>\n            </div>\n\n            <Separator />\n\n            <p className=\"text-muted-foreground text-xs\">{warning}</p>\n          </div>\n        </div>\n      )}\n    </>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/billingsdk/payment-processing.tsx"
    },
    {
      "path": "src/registry/billingsdk/demo/payment-processing-demo.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport PaymentProcessing from \"@/registry/billingsdk/payment-processing\";\nimport { setTimeout } from \"timers\";\nimport { Button } from \"@/components/ui/button\";\n\nexport function PaymentProcessingDemo() {\n  const [loading, setLoading] = useState(false);\n  const handleProcessing = async () => {\n    setTimeout(() => {\n      setLoading(false);\n    }, 8000);\n  };\n\n  const onClickHandler = async () => {\n    setLoading(true);\n    await handleProcessing();\n  };\n\n  return (\n    <div className=\"bg-background flex min-h-screen items-center justify-center p-4\">\n      <Button\n        onClick={async () => await onClickHandler()}\n        className={`${loading ? \"hidden\" : \"block\"}`}\n      >\n        Pay now!\n      </Button>\n      <PaymentProcessing status={loading} />\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/payment-processing-demo.tsx"
    }
  ],
  "type": "registry:block"
}