React SDK Reference

This page documents the main @mintmoney/react API surface used in applications.

Package

npm install @mintmoney/react

The package expects:

• react >=18 <20
• react-dom >=18 <20

createConfig(publicKey, options)

Creates the SDK config object used by MintMoneyProvider.

import { createConfig } from '@mintmoney/react/config';

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

Parameters

Name	Type	Required	Notes
publicKey	string	Yes	Mint public key for browser requests
options.checkoutId	string	Yes	Mint checkout ID
options.apiUrl	string	No	Defaults to https://api.getmint.money
options.theme	Partial<ThemeConfig>	No	Partial theme overrides
options.cryptoCheckoutConfig	CryptoCheckoutConfig	No	Crypto checkout behavior overrides

CryptoCheckoutConfig

Field	Type	Default
numBlockConfirmations	number	1
paymentConfirmationStatus	PaymentStatus	confirming_payment

MintMoneyProvider

Provides the SDK config and theme context.

import { MintMoneyProvider } from '@mintmoney/react/context';

<MintMoneyProvider config={config}>
  <App />
</MintMoneyProvider>;

You should place this high enough in your tree that all checkout triggers can access it.

Checkout

Renders a Mint checkout trigger and opens the checkout modal when invoked.

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

<Checkout createPayment={createPayment} />;

Props

Prop	Type	Required	Description
createPayment	() => Promise<Payment>	Yes	Creates a Mint payment, usually via your backend
onSuccess	(paymentId: string) => Promise<void>	No	Called after a successful payment
onError	(error: Error) => Promise<void>	No	Called if payment creation or checkout fails
asChild	boolean	No	Uses your child element as the trigger
children	ReactNode	No	Custom trigger element when asChild is true

getPaymentById(paymentId)

Fetches a Mint payment by ID using the configured public key and API URL.

import { getPaymentById } from '@mintmoney/react';

const payment = await getPaymentById(paymentId);

This is useful when:

• you want to poll payment status
• you are building a hosted-payment wrapper
• you need to refresh payment state after checkout

PaymentStatus

The SDK uses the same main statuses as the Mint API:

• pending
• confirming_payment
• paid
• failed

Styling

Import the default stylesheet once:

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

For customisation guidance, see Customisation.