@sintec/checkout

React components for integrating Sintec License Server checkout into your product website.

Installation

npm install @sintecinformatik/checkout

Finding Your Product Slug

To find available products and their slugs, call the products endpoint:

curl https://license.sintec.ch/api/v1/checkout/products

Response:

[
  {
    "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:

import { CheckoutButton } from "@sintecinformatik/checkout";

function BuyPage() {
  return (
    <CheckoutButton
      productSlug="your-product"
      licenseType="perpetual"
      customerEmail="[email protected]"
      className="buy-button"
    >
      Buy License - $99
    </CheckoutButton>
  );
}

useCheckout Hook

For custom UI implementations:

import { useCheckout } from "@sintecinformatik/checkout";

function CustomCheckout() {
  const { startCheckout, isLoading, error } = useCheckout();

  const handleBuy = async () => {
    await startCheckout({
      productSlug: "your-product",
      licenseType: "perpetual",
      customerEmail: "[email protected]",
    });
  };

  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

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