> 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 Quickstart

> The recommended embedded Mint integration for React applications.

This guide shows the recommended embedded integration for React applications
using `@mintmoney/react`. Your backend creates payments; the SDK presents the
checkout inside your app.

## Before you start

You need:

* a Mint checkout ID
* a Mint public key for the frontend
* a Mint secret key for your backend
* a Reown project ID for wallet connectivity

Mint customer integrations should use the production API base URL: `https://api.getmint.money`.

## Install the SDK

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

## Create a payment on your backend

Your frontend calls your own server. That server calls Mint with the secret
key, then returns the `data` object to the browser.

```ts
const mintResponse = await fetch('https://api.getmint.money/v1/payments', {
  method: 'POST',
  headers: {
    'content-type': 'application/json',
    'x-api-key': process.env.MINT_SECRET_KEY!,
  },
  body: JSON.stringify({
    checkout_id: process.env.MINT_CHECKOUT_ID!,
    amount: 49.99,
    currency: 'USD',
    order_id: 'order_1234',
  }),
});

if (!mintResponse.ok) throw new Error('Mint payment creation failed');
return (await mintResponse.json()).data;
```

## Configure and render checkout

```tsx
import { createConfig } from '@mintmoney/react/config';
import { MintMoneyProvider } from '@mintmoney/react/context';
import '@mintmoney/react/css/styles.css';

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

Use `MintMoneyProvider` once near your application root. `Checkout` needs a
stable `resumeKey` and a callback that calls your backend, never Mint directly
from the browser.

```tsx
import { Checkout } from '@mintmoney/react';
import { createConfig } from '@mintmoney/react/config';
import { MintMoneyProvider } from '@mintmoney/react/context';
import '@mintmoney/react/css/styles.css';

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

export function PayButton() {
  return (
    <MintMoneyProvider config={config}>
      <Checkout
        resumeKey="order_1234"
        walletConnectProjectId="your_reown_project_id"
        createPayment={async () => {
          const response = await fetch('/api/payments', { method: 'POST' });
          if (!response.ok) throw new Error('Could not create payment');
          return (await response.json()).data;
        }}
        onSuccess={async (paymentId) => {
          // Refresh your order from your server. Do not fulfil here.
          console.log('Mint payment completed:', paymentId);
        }}
      />
    </MintMoneyProvider>
  );
}
```

Use a [webhook](/getting-started/webhooks) on your server to fulfil the order.
The client-side `onSuccess` callback is for presentation and refreshes, not a
payment-authority signal.