Customisation

Mint gives you two main customisation levers in the React SDK:

• a theme object passed into createConfig(...)
• CSS overrides for the SDK class namespace and CSS variables

Theme overrides

createConfig(...) accepts a partial theme object. The SDK merges that with the default theme.

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

const config = createConfig('pk_live_or_test_xxx', {
  checkoutId: 'checkout_uuid',
  theme: {
    font: {
      color: {
        primary: '#101828',
        secondary: '#344054',
        tertiary: '#667085',
      },
    },
    btn: {
      primary: {
        default: {
          backgroundColor: '#18c8a0',
          borderColor: '#18c8a0',
          textColor: '#041a15',
        },
        hover: {
          backgroundColor: '#0cab88',
          borderColor: '#0cab88',
          textColor: '#041a15',
        },
        disabled: {
          backgroundColor: '#a7f3e1',
          borderColor: '#a7f3e1',
          textColor: '#4b635d',
        },
      },
    },
  },
});

Use theme overrides when you want to keep the default structure but align the SDK to your brand.

Custom trigger UI

If you want full control over the trigger button, use asChild and pass your own element.

<Checkout createPayment={createPayment} asChild>
  <button type="button" className="your-button">
    Pay now
  </button>
</Checkout>

This changes the trigger only. The checkout experience itself is still rendered by the SDK.

CSS namespace

The SDK uses an mm- CSS namespace for its own DOM structure. That helps avoid collisions with the rest of your application.

Examples you may see:

• .mm-root
• .mm-modal-overlay
• .mm-modal-container

Font overrides

The SDK styles define --mm-font-family, so you can swap the default font without rewriting component styles.

:root {
  --mm-font-family: 'Inter', sans-serif;
}

Guidance

• Prefer theme overrides for color changes.
• Prefer asChild for trigger-button changes.
• Prefer CSS variables for global typography tweaks.
• Avoid targeting deep internal class names unless you own the maintenance cost.