Hosted Payments

Hosted payments are the fastest way to launch with Mint.

Instead of embedding the React SDK, you create a payment on your backend and send the buyer to the payment_url returned by Mint.

When to use hosted payments

Hosted payments are a good fit when:

• you want the simplest frontend integration
• you do not need checkout embedded directly in your app
• you want Mint to own the payment page experience

How it works

1. Your backend creates a payment with Mint.
2. Mint returns a payment object.
3. If hosted payments are configured, that payment object includes payment_url.
4. Your app redirects the buyer to payment_url.

Example

Backend:

app.post('/api/mint/payment-link', 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,
      currency: 'USD',
      amount: 49,
      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({
    paymentId: payload.data.id,
    paymentUrl: payload.data.payment_url,
  });
});

Frontend:

const response = await fetch('/api/mint/payment-link', { method: 'POST' });
const { paymentUrl } = await response.json();

window.location.href = paymentUrl;

Hosted payments vs React SDK

Need	Better choice
Fastest launch	Hosted payments
Payment UI embedded inside your app	React SDK
Minimal frontend code	Hosted payments
More control over the user journey	React SDK

Guidance

• Use hosted payments when you want to launch quickly.
• Use React SDK when checkout should feel native to your app.
• In both cases, your backend should still create the payment.