> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.getmint.money/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.getmint.money/_mcp/server.

# React SDK Reference

> The main @mintmoney/react API surface used in applications today.

This page covers the small public surface needed for a standard embedded
checkout. The API Reference documents Mint's HTTP endpoints.

## Package

```bash
npm install @mintmoney/react
```

## `createConfig(publicKey, options)`

Creates the SDK configuration. Supply your browser-safe public key and the
checkout ID. You can also set `apiUrl`, theme options, and crypto checkout
options.

```ts
const config = createConfig('pk_live_or_test_xxx', {
  checkoutId: 'checkout_uuid',
  apiUrl: 'https://api.getmint.money',
});
```

## `MintMoneyProvider`

Wrap the part of your React tree that renders Mint checkout. It receives the
configuration returned by `createConfig`.

```tsx
<MintMoneyProvider config={config}>{children}</MintMoneyProvider>
```

## `Checkout`

Renders a payment trigger and opens the checkout UI. Its required props are:

* `createPayment`: an async function that calls **your backend** and resolves
  to a Mint payment.
* `resumeKey`: a stable key for restoring checkout state after a redirect.

Useful optional props include `onSuccess`, `onError`, `walletConnectProjectId`,
and `asChild` for providing your own button.

## `getPaymentById(paymentId)`

Fetches the current payment state using the configured public API client. Use
it to refresh the UI; make fulfilment decisions from a verified webhook or
your backend's authenticated Mint API request.

## Styles

Import the package stylesheet once in your application:

```ts
import '@mintmoney/react/css/styles.css';
```