M
monterrey

React Components

The monterrey.app React SDK provides pre-built components for accepting crypto payments in your React application.

Installation

npm install @monterrey/react

Provider Setup

Wrap your application with the MonterreyProvider:

// app/providers.tsx
"use client";

import { MonterreyProvider } from "@monterrey/react";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <MonterreyProvider
      apiKey={process.env.NEXT_PUBLIC_MONTERREY_PUBLIC_KEY!}
    >
      {children}
    </MonterreyProvider>
  );
}

// app/layout.tsx
import { Providers } from "./providers";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

Payment Button

The simplest way to accept payments. Shows a button that opens a payment modal.

import { PaymentButton } from "@monterrey/react";

function CheckoutPage() {
  return (
    <PaymentButton
      amount="25.00"
      currency="USD"
      merchantRef="order_12345"
      onSuccess={(payment) => {
        console.log("Payment confirmed:", payment.txHash);
        // Redirect to success page
      }}
      onError={(error) => {
        console.error("Payment failed:", error);
      }}
    >
      Pay $25.00 with Crypto
    </PaymentButton>
  );
}

Props

PropTypeDescription
amountstringPayment amount
currencystringCurrency code (USD, USDC, ETH, etc.)
merchantRefstringYour order reference
onSuccessfunctionCalled when payment confirms
onErrorfunctionCalled on payment error
onCancelfunctionCalled when user closes modal

Payment Modal

For more control, use the PaymentModal component directly:

import { PaymentModal, usePayment } from "@monterrey/react";
import { useState } from "react";

function CheckoutPage() {
  const [isOpen, setIsOpen] = useState(false);
  const { createPayment } = usePayment();

  const handleCheckout = async () => {
    await createPayment({
      merchantRef: "order_12345",
      amount: "2500000", // $25 USDC
      currency: "USDC",
      chain: "polygon",
    });
    setIsOpen(true);
  };

  return (
    <>
      <button onClick={handleCheckout}>
        Checkout
      </button>

      <PaymentModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        onSuccess={(payment) => {
          setIsOpen(false);
          // Handle success
        }}
      />
    </>
  );
}

Payment Status

Display the current payment status:

import { PaymentStatus } from "@monterrey/react";

function PaymentStatusPage({ paymentId }: { paymentId: string }) {
  return (
    <PaymentStatus
      paymentId={paymentId}
      onConfirmed={(payment) => {
        console.log("Payment confirmed!");
      }}
    />
  );
}

QR Code

Display a QR code for the payment address:

import { PaymentQRCode } from "@monterrey/react";

function PaymentPage({ address }: { address: string }) {
  return (
    <PaymentQRCode
      address={address}
      size={256}
      includeAmount={true}
    />
  );
}

Styling

Components use CSS variables for styling. Override them in your CSS:

:root {
  --monterrey-primary: #f59e0b;
  --monterrey-background: #0a0a0f;
  --monterrey-text: #ffffff;
  --monterrey-border: rgba(255, 255, 255, 0.1);
  --monterrey-radius: 12px;
}

Or use the theme prop:

<MonterreyProvider
  apiKey={apiKey}
  theme={{
    primaryColor: "#f59e0b",
    backgroundColor: "#0a0a0f",
    borderRadius: "12px",
  }}
>
  {children}
</MonterreyProvider>

Next Steps

    Documentation | Monterrey