Skip to main content

MONEI JS Overview

MONEI UI Components enable you to collect sensitive payment information using customizable UI components.

UI components include features like:

  • Format Credit 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

Setup monei.js components#

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/v1/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

The Components are completely customizable. You can style MONEI Components 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 Component has focus.