@meru.app/checkout-react

@meru.app/checkout-react

React components to embed Meru Checkout (crypto exchanges + QR Bolivia) into any React app.

Security: your secret key (sk_live_…) stays on your backend. Create the checkout session server-side, then pass the returned session id/url to these client components. The key never touches the browser.

Install

npm install @meru.app/checkout-react
# react >= 17 is a peer dependency

1. Create a session on your backend

// your server
const res = await fetch('https://checkout-api.meru.com/v1/checkouts', {
  method: 'POST',
  headers: {
    Authorization: `Bearer ${process.env.MERU_SECRET_KEY}`, // sk_live_…
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ amountFiat: 50, reference: 'order_123' }),
});
const session = await res.json(); // { id, url, ... }
// send session.id (or session.url) to your frontend

2a. Embed it (modal)

import { useState } from 'react';
import { MeruCheckout } from '@meru.app/checkout-react';

export function PayButton({ checkoutId }: { checkoutId: string }) {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button onClick={() => setOpen(true)}>Pay with crypto</button>
      {open && (
        <MeruCheckout
          checkoutId={checkoutId}
          display="modal"
          onSuccess={(m) => console.log('paid', m.reference, m.txHash)}
          onCancel={() => console.log('canceled')}
          onClose={() => setOpen(false)}
        />
      )}
    </>
  );
}

Or render it inline:

<MeruCheckout checkoutId={checkoutId} display="inline" height={680} />

2b. Or redirect to the hosted page

import { redirectToCheckout } from '@meru.app/checkout-react';

<button onClick={() => redirectToCheckout({ checkoutId })}>Checkout</button>;

3. (optional) Reconcile status on the client

import { useCheckoutStatus } from '@meru.app/checkout-react';

const { status, isSettled } = useCheckoutStatus(checkoutId);
// 'created' | 'pending' | 'processing' | 'succeeded' | 'failed' | 'expired'

Always confirm succeeded server-side (GET /checkouts/:id) before fulfilling anything of value — the client signals are for UX.

<MeruCheckout> props

CheckoutMessage

{
  source: 'meru-checkout';
  type: 'ready' | 'processing' | 'success' | 'failed' | 'cancel';
  checkoutId?: string;
  status?: string;
  reference?: string | null;
  amount?: string;
  currency?: string;
  txHash?: string | null;
}

Self-hosted / sandbox

Point at a different deployment with baseUrl (component / redirect) and apiUrl (status hook):

<MeruCheckout checkoutId={id} baseUrl="https://checkout.sandbox.meru.com" />
useCheckoutStatus(id, { apiUrl: 'https://checkout-api.sandbox.meru.com' });