---
title: Getting started
description: Install the React package and connect a host site to a Lockerverse widget.
sidebar:
  order: 2
---

import CodeBlock from "blume/components/content/CodeBlock.astro";
import catalogRecipe from "../recipes/catalog.tsx?raw";
import paymentRecipe from "../recipes/payment.tsx?raw";

## Install catalog or signup

```bash
pnpm add @lockerverse/react react react-dom
```

Use narrow entry points to keep Stripe out of catalog-only pages.

## Install payment

```bash
pnpm add @lockerverse/react @stripe/react-stripe-js @stripe/stripe-js react react-dom
```

The Stripe packages are optional peers. Install them when you use payment UI.

## Load a catalog

<CodeBlock code={catalogRecipe} lang="tsx" />

## Render payment

<CodeBlock code={paymentRecipe} lang="tsx" />

## DEV configuration

Production is the default. DEV requires both values:

```tsx
const development = {
  apiBaseUrl: "https://portal-dev.lockerverse.com/api",
  environment: "development" as const,
};
```

The SDK uses public widget identifiers. Do not add private API keys.