// @bun
// src/components/docs/integrations/IntegrationsStripePage.tsx
import Link from "@contractspec/lib.ui-link";
import { ChevronRight } from "lucide-react";
import { jsx, jsxs } from "react/jsx-runtime";
function IntegrationsStripePage() {
  return /* @__PURE__ */ jsxs("div", {
    className: "space-y-8",
    children: [
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h1", {
            className: "text-4xl font-bold",
            children: "Stripe"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "The Stripe integration enables payment processing, subscription management, and invoicing in your ContractSpec applications. All Stripe operations are type-safe, policy-enforced, and automatically logged."
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Setup"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "Add your Stripe credentials to your environment variables:"
          }),
          /* @__PURE__ */ jsx("div", {
            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
            children: /* @__PURE__ */ jsx("pre", {
              children: `# .env
STRIPE_SECRET_KEY=sk_test_...
STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...`
            })
          }),
          /* @__PURE__ */ jsxs("p", {
            className: "text-muted-foreground text-sm",
            children: [
              "Get your API keys from the",
              " ",
              /* @__PURE__ */ jsx("a", {
                href: "https://dashboard.stripe.com/apikeys",
                target: "_blank",
                rel: "noopener noreferrer",
                className: "text-violet-400 hover:text-violet-300",
                children: "Stripe Dashboard"
              }),
              "."
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Available capabilities"
          }),
          /* @__PURE__ */ jsxs("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx("h3", {
                className: "text-lg font-semibold",
                children: "Payment Intents"
              }),
              /* @__PURE__ */ jsx("div", {
                className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
                children: /* @__PURE__ */ jsx("pre", {
                  children: `capabilityId: stripe-create-payment-intent
provider:
  type: stripe
  operation: createPaymentIntent

inputs:
  amount:
    type: number
    description: "Amount in cents"
  currency:
    type: string
    default: "usd"
  customerId:
    type: string
    optional: true
  metadata:
    type: object
    optional: true

outputs:
  paymentIntentId:
    type: string
  clientSecret:
    type: string
  status:
    type: string`
                })
              })
            ]
          }),
          /* @__PURE__ */ jsxs("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx("h3", {
                className: "text-lg font-semibold",
                children: "Customers"
              }),
              /* @__PURE__ */ jsx("div", {
                className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
                children: /* @__PURE__ */ jsx("pre", {
                  children: `capabilityId: stripe-create-customer
provider:
  type: stripe
  operation: createCustomer

inputs:
  email:
    type: string
  name:
    type: string
    optional: true
  metadata:
    type: object
    optional: true

outputs:
  customerId:
    type: string
  email:
    type: string`
                })
              })
            ]
          }),
          /* @__PURE__ */ jsxs("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx("h3", {
                className: "text-lg font-semibold",
                children: "Subscriptions"
              }),
              /* @__PURE__ */ jsx("div", {
                className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
                children: /* @__PURE__ */ jsx("pre", {
                  children: `capabilityId: stripe-create-subscription
provider:
  type: stripe
  operation: createSubscription

inputs:
  customerId:
    type: string
  priceId:
    type: string
  trialDays:
    type: number
    optional: true

outputs:
  subscriptionId:
    type: string
  status:
    type: string
  currentPeriodEnd:
    type: timestamp`
                })
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Webhooks"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "ContractSpec automatically handles Stripe webhooks. Configure your webhook endpoint in the Stripe Dashboard:"
          }),
          /* @__PURE__ */ jsx("div", {
            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
            children: /* @__PURE__ */ jsx("pre", {
              children: `https://your-app.com/api/webhooks/stripe`
            })
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "Subscribe to these events:"
          }),
          /* @__PURE__ */ jsxs("ul", {
            className: "text-muted-foreground list-inside list-disc space-y-2",
            children: [
              /* @__PURE__ */ jsx("li", {
                children: /* @__PURE__ */ jsx("code", {
                  className: "bg-background/50 rounded px-2 py-1",
                  children: "payment_intent.succeeded"
                })
              }),
              /* @__PURE__ */ jsx("li", {
                children: /* @__PURE__ */ jsx("code", {
                  className: "bg-background/50 rounded px-2 py-1",
                  children: "payment_intent.payment_failed"
                })
              }),
              /* @__PURE__ */ jsx("li", {
                children: /* @__PURE__ */ jsx("code", {
                  className: "bg-background/50 rounded px-2 py-1",
                  children: "customer.subscription.created"
                })
              }),
              /* @__PURE__ */ jsx("li", {
                children: /* @__PURE__ */ jsx("code", {
                  className: "bg-background/50 rounded px-2 py-1",
                  children: "customer.subscription.updated"
                })
              }),
              /* @__PURE__ */ jsx("li", {
                children: /* @__PURE__ */ jsx("code", {
                  className: "bg-background/50 rounded px-2 py-1",
                  children: "customer.subscription.deleted"
                })
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Example workflow"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "Here's a complete payment workflow using Stripe:"
          }),
          /* @__PURE__ */ jsx("div", {
            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
            children: /* @__PURE__ */ jsx("pre", {
              children: `workflowId: process-payment
version: '1.0.0'.0.0

steps:
  - id: create-customer
    capability: stripe-create-customer
    inputs:
      email: \${input.customerEmail}
      name: \${input.customerName}
    onSuccess: create-payment-intent
    onFailure: notify-error

  - id: create-payment-intent
    capability: stripe-create-payment-intent
    inputs:
      amount: \${input.amount}
      currency: "usd"
      customerId: \${steps.create-customer.output.customerId}
    onSuccess: send-payment-link
    onFailure: notify-error

  - id: send-payment-link
    capability: send-email
    inputs:
      to: \${input.customerEmail}
      template: "payment-link"
      data:
        clientSecret: \${steps.create-payment-intent.output.clientSecret}
        amount: \${input.amount}

  - id: notify-error
    capability: send-email
    inputs:
      to: "admin@example.com"
      template: "payment-error"
      data:
        error: \${error.message}`
            })
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Testing"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "Use Stripe's test cards for development:"
          }),
          /* @__PURE__ */ jsx("div", {
            className: "border-border/50 overflow-x-auto rounded-lg border",
            children: /* @__PURE__ */ jsxs("table", {
              className: "w-full text-left text-sm",
              children: [
                /* @__PURE__ */ jsx("thead", {
                  className: "bg-card/50",
                  children: /* @__PURE__ */ jsxs("tr", {
                    className: "border-border/50 border-b",
                    children: [
                      /* @__PURE__ */ jsx("th", {
                        className: "px-4 py-3 font-semibold",
                        children: "Card Number"
                      }),
                      /* @__PURE__ */ jsx("th", {
                        className: "px-4 py-3 font-semibold",
                        children: "Scenario"
                      })
                    ]
                  })
                }),
                /* @__PURE__ */ jsxs("tbody", {
                  className: "divide-border/50 divide-y",
                  children: [
                    /* @__PURE__ */ jsxs("tr", {
                      children: [
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 font-mono",
                          children: "4242 4242 4242 4242"
                        }),
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3",
                          children: "Successful payment"
                        })
                      ]
                    }),
                    /* @__PURE__ */ jsxs("tr", {
                      children: [
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 font-mono",
                          children: "4000 0000 0000 9995"
                        }),
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3",
                          children: "Insufficient funds"
                        })
                      ]
                    }),
                    /* @__PURE__ */ jsxs("tr", {
                      children: [
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3 font-mono",
                          children: "4000 0000 0000 0002"
                        }),
                        /* @__PURE__ */ jsx("td", {
                          className: "px-4 py-3",
                          children: "Card declined"
                        })
                      ]
                    })
                  ]
                })
              ]
            })
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Best practices"
          }),
          /* @__PURE__ */ jsxs("ul", {
            className: "text-muted-foreground list-inside list-disc space-y-2",
            children: [
              /* @__PURE__ */ jsx("li", {
                children: "Always use test mode during development"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Verify webhook signatures to prevent fraud"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Handle idempotency for payment operations"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Store customer IDs for recurring payments"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Use metadata to link Stripe objects to your application records"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Monitor failed payments and retry logic"
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "flex items-center gap-4 pt-4",
        children: [
          /* @__PURE__ */ jsx(Link, {
            href: "/docs/integrations",
            className: "btn-ghost",
            children: "Back to Integrations"
          }),
          /* @__PURE__ */ jsxs(Link, {
            href: "/docs/integrations/postmark",
            className: "btn-primary",
            children: [
              "Next: Postmark ",
              /* @__PURE__ */ jsx(ChevronRight, {
                size: 16
              })
            ]
          })
        ]
      })
    ]
  });
}
export {
  IntegrationsStripePage
};
