MONEI Components

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

Components are available for vanilla JavaScript and all major frameworks:

Package	Framework
@monei-js/components	Vanilla JS	This page
@monei-js/react-components	React 17+	React guide
@monei-js/vue-components	Vue 3.3+	Vue guide
@monei-js/angular-components	Angular 14+	Angular guide
@monei-js/svelte-components	Svelte 5+	Svelte guide

Components include:

• CardInput — secure card number, expiry and CVC input
• Bizum — Bizum payment button with phone verification
• PayPal — PayPal checkout button
• PaymentRequest — Apple Pay / Google Pay button
• Payment Modal — full in-page checkout modal

Setup monei.js

Include monei.js on your checkout page by adding the script tag to the head of your HTML file, or by installing it from npm:

CDN

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

npm

npm install @monei-js/components

yarn

yarn add @monei-js/components

pnpm

pnpm add @monei-js/components

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.

Result

HTML

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

<form id="payment-form">
  <div class="card-field">
    <div id="card-input">
      <!-- A MONEI Card Input Component will be inserted here. -->
    </div>
    <!-- Used to display card errors. -->
    <div id="card-error"></div>
  </div>
  <button type="submit" id="payment-button">Submit payment</button>
</form>

CSS

#card-input {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  box-shadow:
    0 2px 4px 0 rgba(0, 0, 0, 0.07),
    0 1px 1.5px 0 rgba(0, 0, 0, 0.05);
  transition:
    box-shadow 0.08s ease-in,
    border-color 0.08s ease-in;
}
#card-input.is-focused {
  border-color: rgba(50, 151, 211, 0.3);
  box-shadow:
    0 1px 1px 0 rgba(0, 0, 0, 0.07),
    0 0 0 4px rgba(50, 151, 211, 0.3);
}
#card-input.is-invalid {
  border-color: #ef9896;
}
#card-input.is-invalid.is-focused {
  box-shadow:
    0 1px 1px 0 rgba(0, 0, 0, 0.07),
    0 0 0 4px rgba(220, 39, 39, 0.3);
}
#card-error {
  color: #dc2727;
  font-size: 13px;
  margin-top: 6px;
}
button {
  margin-top: 16px;
  width: 100%;
  height: 45px;
  border: none;
  border-radius: 6px;
  background: #3d424e;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

JavaScript

const container = document.getElementById('card-input');
const errorText = document.getElementById('card-error');

// Custom styling can be passed to options when creating a Card Input Component.
const style = {
  base: {
    height: '45px',
    lineHeight: '45px',
    padding: '8px 12px',
    fontSize: '16px'
  },
  invalid: {
    color: '#dc2727'
  }
};

// Create an instance of the Card Input.
const cardInput = monei.CardInput({
  paymentId: '{{payment_id}}',
  style: style,
  onFocus() {
    container.classList.add('is-focused');
  },
  onBlur() {
    container.classList.remove('is-focused');
  },
  onChange(event) {
    // Handle real-time validation errors.
    if (event.isTouched && event.error) {
      container.classList.add('is-invalid');
      errorText.innerText = event.error;
    } else {
      container.classList.remove('is-invalid');
      errorText.innerText = '';
    }
  }
});

// Render an instance of the Card Input into the `card-input` <div>.
cardInput.render(container);

// Handle form submission.
const paymentForm = document.getElementById('payment-form');
const paymentButton = document.getElementById('payment-button');
paymentForm.addEventListener('submit', async function (event) {
  event.preventDefault();
  paymentButton.disabled = true;
  try {
    // Tokenize the card information.
    const {token, error} = await cardInput.submit();
    if (error) {
      // Inform the user if there was an error.
      container.classList.add('is-invalid');
      errorText.innerText = error;
      return;
    }
    // Confirm the payment on the client side.
    const result = await monei.confirmPayment({
      paymentId: '{{payment_id}}',
      paymentToken: token
    });
    // Payment confirmed — check result.status or redirect.
    console.log(result);
  } catch (error) {
    console.error(error);
  } finally {
    paymentButton.disabled = false;
  }
});

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.

Other Components

Bizum

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

const bizum = monei.Bizum({
  paymentId: '{{payment_id}}',
  async onSubmit(result) {
    if (result.token) {
      await monei.confirmPayment({
        paymentId: '{{payment_id}}',
        paymentToken: result.token
      });
    }
  },
  onError(error) {
    console.error(error);
  }
});

bizum.render('#bizum-container');

PayPal

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

const paypal = monei.PayPal({
  paymentId: '{{payment_id}}',
  async onSubmit(result) {
    if (result.token) {
      await monei.confirmPayment({
        paymentId: '{{payment_id}}',
        paymentToken: result.token
      });
    }
  },
  onError(error) {
    console.error(error);
  }
});

paypal.render('#paypal-container');

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.

const paymentRequest = monei.PaymentRequest({
  paymentId: '{{payment_id}}',
  async onSubmit(result) {
    if (result.token) {
      await monei.confirmPayment({
        paymentId: '{{payment_id}}',
        paymentToken: result.token
      });
    }
  },
  onError(error) {
    console.error(error);
  }
});

paymentRequest.render('#payment-request-container');

Payment Modal

Calling monei.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.

const result = await monei.confirmPayment({
  paymentId: '{{payment_id}}'
});
// Payment completed — check result.status
console.log(result);

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

• Check the API Reference for all component options and methods
• See the Migration Guide if you're upgrading from MONEI Components v2