npm package: @sintecinformatik/checkout
Description: Checkout components for Sintec License Server
Author: Sintec
Latest version: 1.3.0

# @sintec/checkout

React components for integrating Sintec License Server checkout into your product website.

## Installation

```bash
npm install @sintecinformatik/checkout
```

## Finding Your Product Slug

To find available products and their slugs, call the products endpoint:

```bash
curl https://license.sintec.ch/api/v1/checkout/products
```

Response:
```json
[
  {
    "slug": "littlewoodshed",
    "name": "LittleWoodshed",
    "perpetualPriceCents": 19900,
    "monthlyPriceCents": 900,
    "yearlyPriceCents": 7800,
    "currency": "chf",
    "checkoutEnabled": true
  }
]
```

Use the `slug` value as your `productSlug` prop.

## Usage

### CheckoutButton Component

The simplest way to add a buy button:

```tsx
import { CheckoutButton } from "@sintecinformatik/checkout";

function BuyPage() {
  return (
    <CheckoutButton
      productSlug="your-product"
      licenseType="perpetual"
      customerEmail="user@example.com"
      className="buy-button"
    >
      Buy License - $99
    </CheckoutButton>
  );
}
```

### useCheckout Hook

For custom UI implementations:

```tsx
import { useCheckout } from "@sintecinformatik/checkout";

function CustomCheckout() {
  const { startCheckout, isLoading, error } = useCheckout();

  const handleBuy = async () => {
    await startCheckout({
      productSlug: "your-product",
      licenseType: "perpetual",
      customerEmail: "user@example.com",
    });
  };

  return (
    <div>
      <button onClick={handleBuy} disabled={isLoading}>
        {isLoading ? "Processing..." : "Purchase"}
      </button>
      {error && <p className="error">{error}</p>}
    </div>
  );
}
```

## API Reference

### CheckoutButton Props

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `productSlug` | `string` | Yes | Product identifier |
| `licenseType` | `"perpetual" \| "monthly" \| "yearly"` | Yes | License type |
| `customerEmail` | `string` | No | Pre-fill customer email in Stripe |
| `serverUrl` | `string` | No | License server URL (default: `https://license.sintec.ch`) |
| `className` | `string` | No | CSS class for styling |
| `children` | `ReactNode` | No | Button content (default: "Buy Now") |
| `onCheckoutStart` | `() => void` | No | Called when checkout begins |
| `onError` | `(error: string) => void` | No | Called on error |

### useCheckout Options

```tsx
const { startCheckout, isLoading, error } = useCheckout({
  serverUrl: "https://license.sintec.ch", // optional
});
```

### startCheckout Parameters

| Param | Type | Required | Description |
|-------|------|----------|-------------|
| `productSlug` | `string` | Yes | Product identifier |
| `licenseType` | `"perpetual" \| "monthly" \| "yearly"` | Yes | License type |
| `customerEmail` | `string` | No | Pre-fill customer email |

## How It Works

1. User clicks the checkout button
2. Package calls the license server API to create a Stripe checkout session
3. User is redirected to Stripe to complete payment
4. After payment, user is redirected to the license server success page
5. Success page displays the generated license key

## License

MIT