MONEI JS Reference

This reference documents every object and method available in MONEI’s browser-side JavaScript library, monei.js.

You can use monei.js’ APIs to tokenize customer information, collect sensitive card data using customizable MONEI UI Components

Including monei.js

Include the monei.js script on the checkout page of your site — it should always be loaded directly from https://js.monei.net, rather than included in a bundle or hosted yourself.

<script src="https://js.monei.net/v1/monei.js"></script>

Using monei.js as a module

We also provide an npm package, that makes it easier to load and use monei.js as a module.

npm i @monei-js/components

monei object

The monei object is your entrypoint to the rest of the monei.js SDK.

monei.CardInput component

CardInput is a customizable UI component used to collect sensitive information in your payment forms.

Create an instance of the CardInput component.

var cardInput = monei.CardInput({
paymentId: 'af6029f80f5fc73a8ad2753eea0b1be0',
...otherOptions
});

CardInput options

  • paymentId string - A payment ID provided by MONEI in create payment request. Generated payment token will be bound to this payment.
  • accountId string - Your MONEI account ID. Required if you're initializing card input with account ID and order ID. Instead of passing paymentId you can initialize a card input with the accountId and orderId. Generate a payment token and use it to create a payment on the server-side.
  • orderId string - Unique order ID in your system. Generated payment token will be bound to this order id and can be only used for the payment with the same orderId
  • style object - Customize the appearance of this component using CSS properties passed in a Style object.
  • placeholders object - Customize input placeholders
    • cardNumber string - Card number placeholder. Default: "Card number"
    • expiryDate string- Expiry date placeholder. Default: "MM/YY"
    • cvc string - CVC placeholder. Default: "CVC"
  • errorMessages object - Customize error messages
    • emptyCardNumber string - Default: "Enter a card number"
    • invalidCardNumber string - Default: "Card number is invalid"
    • emptyExpiryDate string - Default: "Enter an expiry date"
    • monthOutOfRange string - Default: "Expiry month must be between 01 and 12"
    • yearOutOfRange string - Default: "Expiry year cannot be in the past"
    • dateOutOfRange string - Default: "Expiry date cannot be in the past"
    • invalidExpiryDate string - Default: "Expiry date is invalid"
    • emptyCVC string - Default: "Enter a CVC"
    • invalidCVC string - Default: "CVC is invalid"
  • onFocus:() => void function - Callback function that is called when card input is focused
  • onBlur:() => void function - Callback function that is called when card input is blurred
  • onLoad:() => void function - Callback function that is called when card input is fully loaded
  • onEnter:() => void function - Callback function that is called when user presses Enter key on the keyboard inside card input.
  • onChange:(event: CardInputOnChangeEvent) => void function - Callback function that is called on every user input. Used for real-time validation.
    • event.isTouched boolean - indicates if card input was touched
    • event.focused string - indicates what input is focused. Possible values: cardNumber, expiryDate, cvc
    • cardType string - detected card type
    • error string - Card input error. Use this attribute to show an error to a user.

CardInput Style object

UI components are styled using a Style object, which consists of CSS properties nested under objects for any of the following variants:

  • base object - base component style
  • loading object - base component style when component is loading
  • invalid object - applied when the component has invalid input
  • input object - applied to individual inputs
  • cardNumber object - applied to card number input
  • expiryDate object - applied to expiry date input
  • cvc object - applied to cvc input
  • icon object - applied to icon

The following pseudo-classes and pseudo-elements can also be styled using a nested object inside of a variant:

  • :focus
  • :hover
  • ::placeholder
  • ::selection
  • :-webkit-autofill
var style = {
base: {
height: '44px',
padding: '8px 12px'
},
loading: {
backgroundColor: '#F4F4F4'
},
input: {
color: '#8961a5',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#848589'
},
'-webkit-autofill': {
backgroundColor: '#FAFFBD'
}
},
invalid: {
color: '#fa755a'
}
};
var cardInput = monei.CardInput({
accountId: 'fe6432a7-8a24-4288-a3a3-545c3205b549',
orderId: '123456789',
style: style,
...otherOptions
});

monei.createToken function

Use this function to generate payment token.

note

Payment tokens generated by monei.js UI Components are bound to a specific orderId and expire as soon as they are used or in 5 days after creation.

Pass an instance of CardInput component.

declare const createToken: (
component: MoneiComponent
) => Promise<{
token?: string; // payment token
error?: string; // validation error
}>;

Example:

monei
.createToken(cardInput) // pass a reference to an instance of your CardInput component
.then(function (result) {
console.log(result);
if (result.error) {
// Inform the user if there was an error.
} else {
// Send the token to your server.
moneiTokenHandler(result.token);
}
})
.catch(function (error) {
// Something went wrong while generating token
console.log(error);
});