React SDK Quickstart

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

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.

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

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.

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 on your server to fulfil the order. The client-side onSuccess callback is for presentation and refreshes, not a payment-authority signal.