# 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`](https://www.npmjs.com/package/@monei-js/components) | Vanilla JS | This page | | [`@monei-js/react-components`](https://www.npmjs.com/package/@monei-js/react-components) | React 17+ | [React guide](https://docs.monei.com/monei-js/react/.md) | | [`@monei-js/vue-components`](https://www.npmjs.com/package/@monei-js/vue-components) | Vue 3.3+ | [Vue guide](https://docs.monei.com/monei-js/vue/.md) | | [`@monei-js/angular-components`](https://www.npmjs.com/package/@monei-js/angular-components) | Angular 14+ | [Angular guide](https://docs.monei.com/monei-js/angular/.md) | | [`@monei-js/svelte-components`](https://www.npmjs.com/package/@monei-js/svelte-components) | Svelte 5+ | [Svelte guide](https://docs.monei.com/monei-js/svelte/.md) | 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[​](#setup-moneijs "Direct link to 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 * npm * yarn * pnpm ``` ``` ``` npm install @monei-js/components ``` ``` yarn add @monei-js/components ``` ``` pnpm add @monei-js/components ``` ## Card Input Component[​](#card-input-component "Direct link to 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 * CSS * JavaScript ```
``` ``` #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; } ``` ``` 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`
. 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; } }); ``` Open in CodeSandbox 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[​](#other-components "Direct link to Other Components") ### Bizum[​](#bizum "Direct link to Bizum") The [Bizum](https://docs.monei.com/payment-methods/bizum/.md) 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'); ``` Open in CodeSandbox ### PayPal[​](#paypal "Direct link to PayPal") The [PayPal](https://docs.monei.com/payment-methods/paypal/.md) 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'); ``` Open in CodeSandbox ### PaymentRequest (Apple Pay / Google Pay)[​](#paymentrequest-apple-pay--google-pay "Direct link to PaymentRequest (Apple Pay / Google Pay)") The [PaymentRequest](https://docs.monei.com/payment-methods/apple-pay/.md) component renders an Apple Pay or Google Pay button depending on the customer's browser and device. note Apple Pay requires [domain verification](https://docs.monei.com/payment-methods/apple-pay/.md#register-your-domain-with-apple-pay) 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'); ``` Open in CodeSandbox ## Payment Modal[​](#payment-modal "Direct link to 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](#paymentrequest-apple-pay--google-pay) component instead. See [Use Payment Modal](https://docs.monei.com/integrations/use-payment-modal/.md) for the full integration guide. ## Next steps[​](#next-steps "Direct link to Next steps") * Check the [API Reference](https://docs.monei.com/monei-js/reference/.md) for all component options and methods * See the [Migration Guide](https://docs.monei.com/monei-js/migration/.md) if you're upgrading from MONEI Components v2