MONEI JS Overview

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

UI components includes features like:

  • Formatting card information automatically as it’s entered
  • Translating placeholders into your customer’s preferred language
  • Using responsive design to fit the width of your customer’s screen or mobile device
  • Customizing the styling to match the look and feel of your checkout flow

Setup monei.js components

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

<script src="https://js.monei.net/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

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.