Skip to main content

MONEI Components

MONEI Components is a set of rich, prebuilt Components that help you create your own checkout flows across desktop and mobile.

Components include features like:

  • Format Card information automatically as it’s entered
  • Translate placeholders to your customer’s preferred language
  • Use responsive design to fit the width of your customer’s screen or mobile device
  • Customize the styling to match the look and feel of your checkout flow
  • Apple Pay, Google Pay, PayPal, Bizum Сomponents for easy integration into your checkout flow
  • All MONEI Components are available in JavaScript, ReactJS, Vue and Angular

Setup monei.js

You need to include monei.js in your checkout page by either adding the script tag to the head of your HTML file, or by importing it from the monei-js module:

<script src="https://js.monei.com/v2/monei.js"></script>

Card Input Component

The Card Input Component lets you collect card information all within one Component. It includes a dynamically-updating card brand icon as well as inputs for number, expiry and CVC.

Edit monei-card-input-js

Card Input Component is completely customizable. You can style it to match the look and feel of your site, providing a seamless checkout experience for your customers. It’s also possible to style various input states, for example when the input has focus.

To see all available MONEI Components check the API docummentation or our integration guides for individual payment methods.

React 19 Compatibility

Temporary Fix for React 19

If you're using React 19 and experiencing issues with MONEI Components, you can use the following temporary fix:

// Import findDOMNode from external library
import { findDOMNode } from "find-dom-node-polyfill";

// Set Find DOM Node before driver
ReactDOM.findDOMNode = findDOMNode;

const CardInputComponent: React.FC<CardInputProps> = CardInput.driver("react", {
React: React,
ReactDOM: ReactDOM,
});

This workaround addresses the removal of ReactDOM.findDOMNode in React 19 by using the external library. We're working on a permanent solution that will be available in the next major version of MONEI Components.

Edit monei-card-input-react-19