mint money

Appearance

React SDK Quickstart ​

This guide shows the recommended embedded integration for React applications using @mintmoney/react.

Before you start ​

You need:

  • a Mint checkout ID
  • a Mint public key for the frontend
  • a Mint secret key for your backend
  • a React application running on an origin allowed by your Mint configuration

1. Install the SDK ​

bash
npm install @mintmoney/react

2. Configure the provider ​

Wrap your app with MintMoneyProvider and pass a config created with createConfig.

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',
});

export function AppProviders({ children }: { children: React.ReactNode }) {
  return <MintMoneyProvider config={config}>{children}</MintMoneyProvider>;
}

Notes:

  • publicKey is safe to use in the browser.
  • checkoutId is required.
  • apiUrl defaults to https://api.getmint.money if you omit it.

3. Create payments on your backend ​

The SDK expects a createPayment callback that returns a Mint payment object. That callback should call your own backend, and your backend should call Mint using your secret key.

Example backend:

ts
app.post('/api/mint/payments', async (req, res) => {
  const response = await fetch(`${process.env.MINT_API_URL}/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: Number(req.body.amount),
      currency: 'USD',
      order_id: req.body.orderId,
      return_url: 'https://your-app.example.com/checkout/complete',
    }),
  });

  const payload = await response.json();

  if (!response.ok) {
    res.status(response.status).json(payload);
    return;
  }

  res.json(payload.data);
});

4. Render checkout ​

Use the Checkout component anywhere inside the provider.

tsx
import { Checkout } from '@mintmoney/react';

export function BuyButton() {
  return (
    <Checkout
      createPayment={async () => {
        const response = await fetch('/api/mint/payments', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            amount: 49,
            orderId: 'order_123',
          }),
        });

        if (!response.ok) {
          throw new Error('Failed to create payment');
        }

        return response.json();
      }}
      onSuccess={async (paymentId) => {
        console.log('Payment complete', paymentId);
      }}
      onError={async (error) => {
        console.error('Checkout error', error);
      }}
      asChild
    >
      <button type="button">Pay with Mint</button>
    </Checkout>
  );
}

5. Understand the flow ​

The embedded SDK flow looks like this:

  1. Your frontend calls your backend.
  2. Your backend creates a Mint payment with your secret key.
  3. Your frontend returns that payment object to Checkout.
  4. The SDK opens the Mint checkout modal.
  5. Mint guides the buyer through the configured payment flow.
  6. Mint updates the payment status until it reaches a terminal state.

Common mistakes ​

  • Creating Mint payments directly from the browser with your secret key.
  • Returning the whole API envelope instead of the payment object from your backend.
  • Forgetting to import @mintmoney/react/css/styles.css.
  • Hard-coding the wrong apiUrl for the environment you are testing.

Next steps ​