Skip to main content

React Components

Use @monei-js/react-components to add MONEI payment components to your React app. Each component is a native React component with typed props and ref-based submit().

Install​

npm install @monei-js/react-components @monei-js/components

Requires React 17 or later.

Components​

ComponentDescription
CardInputSecure card input (iframe) with submit()
BizumBizum button + phone verification modal
PayPalPayPal checkout button
PaymentRequestApple Pay / Google Pay button

Card Input​

The Card Input component collects card number, expiry, and CVC in a single secure iframe. Use a ref to call submit() and get a payment token.

import {useRef, useState} from 'react';
import {CardInput, confirmPayment, type CardInputHandle} from '@monei-js/react-components';

function PaymentForm({paymentId}: {paymentId: string}) {
  const cardRef = useRef<CardInputHandle>(null);
  const [error, setError] = useState('');

  const handleSubmit = async () => {
    const {token, error} = await cardRef.current!.submit();
    if (error) return setError(error);
    await confirmPayment({paymentId, paymentToken: token});
  };

  return (
    <div>
      <CardInput
        ref={cardRef}
        paymentId={paymentId}
        onChange={({error}) => setError(error ?? '')}
      />
      <button onClick={handleSubmit}>Pay</button>
      {error && <p>{error}</p>}
    </div>
  );
}

See the API Reference for all CardInput props (style, placeholders, error messages, event callbacks).

Bizum​

The Bizum component renders a Bizum payment button. When the customer clicks it, a phone verification modal opens to complete the payment.

import {Bizum, confirmPayment} from '@monei-js/react-components';

function BizumPayment({paymentId}: {paymentId: string}) {
  return (
    <Bizum
      paymentId={paymentId}
      onSubmit={async (result) => {
        if (result.token) {
          await confirmPayment({paymentId, paymentToken: result.token});
        }
      }}
      onError={(error) => console.error(error)}
    />
  );
}

PayPal​

The PayPal component renders a PayPal checkout button. When the customer approves, you receive a token to confirm the payment.

import {PayPal, confirmPayment} from '@monei-js/react-components';

function PayPalPayment({paymentId}: {paymentId: string}) {
  return (
    <PayPal
      paymentId={paymentId}
      onSubmit={async (result) => {
        if (result.token) {
          await confirmPayment({paymentId, paymentToken: result.token});
        }
      }}
      onError={(error) => console.error(error)}
    />
  );
}

PaymentRequest (Apple Pay / Google Pay)​

The PaymentRequest component renders an Apple Pay or Google Pay button depending on the customer's browser and device.

note

Apple Pay requires domain verification in both development and production.

import {PaymentRequest, confirmPayment} from '@monei-js/react-components';

function PaymentRequestButton({paymentId}: {paymentId: string}) {
  return (
    <PaymentRequest
      paymentId={paymentId}
      onSubmit={async (result) => {
        if (result.token) {
          await confirmPayment({paymentId, paymentToken: result.token});
        }
      }}
      onError={(error) => console.error(error)}
    />
  );
}

Payment Modal​

Calling confirmPayment() without a paymentToken opens the MONEI Payment Modal — a full in-page checkout where the customer can select a payment method and complete the payment.

import {confirmPayment} from '@monei-js/react-components';

function PayWithModal({paymentId}: {paymentId: string}) {
  const handleClick = async () => {
    const result = await confirmPayment({paymentId});
    // Payment completed — check result.status
    console.log(result);
  };

  return <button onClick={handleClick}>Pay</button>;
}
important

Apple Pay is not available in the Payment Modal. Use the PaymentRequest component instead.

See Use Payment Modal for the full integration guide.

Next steps​