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:

HTML

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

ES Module

npm i @monei-js/components

Card Input Component

HTML + JS

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/v2/monei.js"></script>

<form
  action="https://secure.monei.com/payments/{{payment_id}}/confirm"
  method="post"
  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 transparent;
  border-radius: 4px;
  background-color: white;
  box-shadow: 0 1px 3px 0 #e6ebf1;
  height: 38px;
  box-sizing: border-box;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}
#card-input.is-focused {
  box-shadow: 0 1px 3px 0 #cfd7df;
}
#card-input.is-invalid {
  border-color: #fa755a;
}
#card-error {
  color: #fa755a;
  padding: 4px 0;
  font-size: 14px;
}

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 = {
  input: {
    color: '#8961a5',
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: 'antialiased',
    fontSize: '16px',
    '::placeholder': {
      color: '#848589'
    },
    '-webkit-autofill': {
      backgroundColor: '#FAFFBD'
    }
  },
  invalid: {
    color: '#fa755a'
  }
};

// Create an instance of the Card Input.
const cardInput = monei.CardInput({
  paymentId: 'af6029f80f5fc73a8ad2753eea0b1be0',
  style: style,
  onFocus: function () {
    container.classList.add('is-focused');
  },
  onBlur: function () {
    container.classList.remove('is-focused');
  },
  onChange: function (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', function (event) {
  event.preventDefault();
  paymentButton.disabled = true;
  monei
    .createToken(cardInput)
    .then(function (result) {
      console.log(result);
      if (result.error) {
        // Inform the user if there was an error.
        container.classList.add('is-invalid');
        errorText.innerText = result.error;
      } else {
        // Send the token to your server.
        moneiTokenHandler(result.token);
      }
      paymentButton.disabled = false;
    })
    .catch(function (error) {
      paymentButton.disabled = false;
      console.log(error);
    });
});

// Submit the form with the token ID.
function moneiTokenHandler(token) {
  // Insert the token ID into the form so it gets submitted to the server
  const hiddenInput = document.createElement('input');
  hiddenInput.setAttribute('type', 'hidden');
  hiddenInput.setAttribute('name', 'paymentToken');
  hiddenInput.setAttribute('value', token);
  paymentForm.appendChild(hiddenInput);

  // Submit the form
  paymentForm.submit();
}

React JS

The Card Input Component lets you collect Credit Card information all within one single Component. It includes a dynamically-updating card brand icon as well as inputs for Credit Card number (PAN), Expiry Date and CVC.

TypeScript TSX

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import cn from 'classnames';
import {CardInput, CardInputProps, createToken} from '@monei-js/components';

// Set React driver for Card Input Component
const CardInputComponent: React.FC<CardInputProps> = CardInput.driver('react', {
  React: React,
  ReactDOM: ReactDOM
});

// Custom styling can be passed to options when creating a Card Input Component.
const style = {
  input: {
    color: '#8961a5',
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: 'antialiased',
    fontSize: '16px',
    '::placeholder': {
      color: '#848589'
    },
    '-webkit-autofill': {
      backgroundColor: '#FAFFBD'
    }
  },
  invalid: {
    color: '#fa755a'
  }
};

const App = () => {
  // Create ref for CardInputComponent
  const ref = React.useRef();
  const [isFocused, setFocused] = React.useState(false);
  const [isLoading, setLoading] = React.useState(false);
  const [error, setError] = React.useState<string | null>(null);

  // POST the token ID to your backend.
  const moneiTokenHandler = async (paymentToken) => {
    const response = await fetch('/payment', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({paymentToken})
    });

    return response.json();
  };

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    setLoading(true);
    event.preventDefault();
    // Pass current CardInputComponent ref to create token
    const result = await createToken(ref.current);
    setLoading(false);
    if (result.error) {
      // Inform the user if there was an error.
      setError(result.error);
    } else {
      setError(null);
      // Send the token to your server.
      return moneiTokenHandler(result.token);
    }
  };

  return (
    <form id="payment-form" onSubmit={handleSubmit}>
      <div className="card-field">
        <div
          id="card-input"
          className={cn({'is-focused': isFocused, 'is-invalid': error !== null})}>
          <CardInputComponent
            ref={ref}
            accountId="fe6432a7-8a24-4288-a3a3-545c3205b549"
            style={style}
            onFocus={() => setFocused(true)}
            onBlur={() => setFocused(false)}
            onChange={(event) => {
              // Handle real-time validation errors.
              if (event.isTouched && event.error) {
                setError(event.error);
              } else {
                setError(null);
              }
            }}
          />
        </div>
        <div id="card-error">{error}</div>
      </div>
      <button type="submit" disabled={isLoading}>
        Submit payment
      </button>
    </form>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

CSS

#card-input {
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: white;
  box-shadow: 0 1px 3px 0 #e6ebf1;
  height: 38px;
  box-sizing: border-box;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}
#card-input.is-focused {
  box-shadow: 0 1px 3px 0 #cfd7df;
}
#card-input.is-invalid {
  border-color: #fa755a;
}
#card-error {
  color: #fa755a;
  padding: 4px 0;
  font-size: 14px;
}

Vue JS

The Card Input Component lets you collect Credit Card information all within one single Component. It includes a dynamically-updating card brand icon as well as inputs for Credit Card number (PAN), Expiry Date and CVC.

Vue JS

<template>
  <form action="/payment" method="post" id="payment-form" @submit="onSubmit">
    <div class="card-field">
      <div id="card-input" :class="{'is-focused': isFocused, 'is-invalid': error !== null}">
        <CardInput
          ref="cardInput"
          :accountId="accountId"
          :innerStyle="innerStyle"
          :onFocus="onFocus"
          :onBlur="onBlur"
          :onChange="onChange"
        />
      </div>
      <!-- Used to display card errors. -->
      <div id="card-error">{{ error }}</div>
    </div>
    <button type="submit" id="payment-button" :disabled="isLoading">Submit payment</button>
  </form>
</template>

<script>
  import Vue from 'vue';
  import {CardInput, createToken} from '@monei-js/components';

  // POST the token ID to your backend.
  const moneiTokenHandler = async (paymentToken) => {
    const response = await fetch('/payment', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({paymentToken})
    });

    return response.json();
  };

  export default {
    name: 'App',
    components: {
      // Set Vue driver for Card Input Component
      // If you have Vue 2.x or lower use CardInput.driver('vue', Vue)
      CardInput: CardInput.driver('vue3', Vue)
    },
    data() {
      return {
        accountId: 'fe6432a7-8a24-4288-a3a3-545c3205b549',
        isFocused: false,
        isLoading: false,
        error: null,
        onChange: (event) => {
          // Handle real-time validation errors.
          if (event.isTouched && event.error) {
            this.error = event.error;
          } else {
            this.error = null;
          }
        },
        onFocus: (event) => {
          this.isFocused = true;
        },
        onBlur: () => {
          this.isFocused = false;
        },
        // Custom styling can be passed to options when creating a Card Input Component
        innerStyle: {
          input: {
            color: '#8961a5',
            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
            fontSmoothing: 'antialiased',
            fontSize: '16px',
            '::placeholder': {
              color: '#848589'
            },
            '-webkit-autofill': {
              backgroundColor: '#FAFFBD'
            }
          },
          invalid: {
            color: '#fa755a'
          }
        }
      };
    },
    methods: {
      async onSubmit(event) {
        this.isLoading = true;
        event.preventDefault();
        // Pass current CardInputComponent ref to create token
        const result = await createToken(this.$refs.cardInput);
        this.isLoading = false;
        if (result.error) {
          // Inform the user if there was an error.
          this.error = result.error;
        } else {
          this.error = null;
          // Send the token to your server.
          return moneiTokenHandler(result.token);
        }
      }
    }
  };
</script>

CSS

#card-input {
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: white;
  box-shadow: 0 1px 3px 0 #e6ebf1;
  height: 38px;
  box-sizing: border-box;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}
#card-input.is-focused {
  box-shadow: 0 1px 3px 0 #cfd7df;
}
#card-input.is-invalid {
  border-color: #fa755a;
}
#card-error {
  color: #fa755a;
  padding: 4px 0;
  font-size: 14px;
}

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.