For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
DashboardMint Website
  • Getting Started
    • Overview
    • Choose an Integration Path
    • React SDK Quickstart
    • Backend Payment Creation
    • Hosted Payments
  • Reference
    • React SDK Reference
  • API Reference
LogoLogo
DashboardMint Website
On this page
  • Before you start
  • Install the SDK
  • Configure the provider
  • Create payments on your backend
  • Render checkout
Getting Started

React SDK Quickstart

Was this page helpful?
Previous

Backend Payment Creation

Next
Built with

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

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

Install the SDK

$npm install @mintmoney/react

Configure the provider

1import { createConfig } from '@mintmoney/react/config';
2import { MintMoneyProvider } from '@mintmoney/react/context';
3import '@mintmoney/react/css/styles.css';
4
5const config = createConfig('pk_live_or_test_xxx', {
6  checkoutId: 'checkout_uuid',
7  apiUrl: 'https://api.getmint.money',
8});

Create payments on your backend

Your backend should call Mint using your secret key and return the Mint payment object to the frontend.

Render checkout

Use the Checkout component inside the provider and hand it a createPayment callback that calls your backend.