You can use monei.js’ APIs to tokenize customer information, collect sensitive card data using customizable MONEI UI Components
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.
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.
The monei object is your entrypoint to the rest of the monei.js SDK.
CardInput is a customizable UI component used to collect sensitive information in your payment forms.
Create an instance of the CardInput component.
string- A payment ID provided by MONEI in create payment request. Generated payment token will be bound to this payment.
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.
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
object- Customize the appearance of this component using CSS properties passed in a Style object.
object- Customize input placeholders
string- Card number placeholder. Default: "Card number"
string- Expiry date placeholder. Default: "MM/YY"
string- CVC placeholder. Default: "CVC"
object- Customize error messages
string- Default: "Enter a card number"
string- Default: "Card number is invalid"
string- Default: "Enter an expiry date"
string- Default: "Expiry month must be between 01 and 12"
string- Default: "Expiry year cannot be in the past"
string- Default: "Expiry date cannot be in the past"
string- Default: "Expiry date is invalid"
string- Default: "Enter a CVC"
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.
boolean- indicates if card input was touched
string- indicates what input is focused. Possible values:
string- detected card type
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:
object- base component style
object- base component style when component is loading
object- applied when the component has invalid input
object- applied to individual inputs
object- applied to card number input
object- applied to expiry date input
object- applied to cvc input
object- applied to icon
The following pseudo-classes and pseudo-elements can also be styled using a nested object inside of a variant:
Use this function to generate payment token.
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.