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()
CardNumber / CardExpiry / CardCvcIndividually mountable card fields, coordinated by useCardGroup()
BizumBizum button + phone verification modal
PayPalPayPal checkout button
PaymentRequestApple Pay / Google Pay button

Card input​

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

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).

Split card fields​

Mount the number, expiry and CVC as separate components anywhere in your own layout. Create the coordinating group with useCardGroup() — payment identifiers live on the group, the parts take presentation props only.

import {useState} from 'react';
import {
  CardNumber,
  CardExpiry,
  CardCvc,
  useCardGroup,
  confirmPayment
} from '@monei-js/react-components';

function SplitPaymentForm({paymentId}: {paymentId: string}) {
  const group = useCardGroup({paymentId});
  const [complete, setComplete] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async () => {
    const {token, error} = await group.submit();
    if (error) return setError(error); // the offending field is already highlighted
    await confirmPayment({paymentId, paymentToken: token});
  };

  return (
    <div>
      <label>Card number</label>
      <CardNumber
        group={group}
        className="card-box"
        onChange={({complete}) => setComplete(complete)}
      />
      <div className="row">
        <div>
          <label>Expiry</label>
          <CardExpiry group={group} className="card-box" />
        </div>
        <div>
          <label>CVC</label>
          <CardCvc group={group} className="card-box" />
        </div>
      </div>
      <button onClick={handleSubmit}>Pay</button>
      {error && <p>{error}</p>}
    </div>
  );
}

Style that box in your own CSS — the className you pass is set on the very element each part toggles monei-component--focus, --invalid, --empty and --complete on, so .card-box.monei-component--invalid {} matches. A ref on a part exposes focus(), blur() and clear() (use focus() where you would use <label for> — labels cannot reach inside the iframe).

See the API Reference for all options and behavior details.

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>;
}
info

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​