MONEI Components

MONEI Components es un conjunto de componentes de interfaz de usuario enriquecidos y prediseñados que te ayudan a crear tus propios flujos de checkout en escritorio y móvil.

Los componentes están disponibles para JavaScript vanilla y todos los frameworks principales:

Paquete	Framework
@monei-js/components	Vanilla JS	Esta página
@monei-js/react-components	React 17+	Guía de React
@monei-js/vue-components	Vue 3.3+	Guía de Vue
@monei-js/angular-components	Angular 14+	Guía de Angular
@monei-js/svelte-components	Svelte 5+	Guía de Svelte

Los componentes incluyen:

• CardInput — entrada segura de número de tarjeta, fecha de caducidad y CVC
• Bizum — botón de pago Bizum con verificación por teléfono
• PayPal — botón de checkout de PayPal
• PaymentRequest — botón de Apple Pay / Google Pay
• Modal de pago — modal de checkout completo en la página

Configurar monei.js

Incluye monei.js en tu página de checkout añadiendo la etiqueta script al head de tu archivo HTML, o instalándolo desde 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

Componente Card Input

El componente Card Input te permite recopilar la información de la tarjeta en un único componente. Incluye un icono de marca de tarjeta que se actualiza dinámicamente, así como campos para el número, la fecha de caducidad y el CVC.

Resultado

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;
  }
});

El componente Card Input es completamente personalizable. Puedes darle estilo para que coincida con el aspecto de tu sitio, ofreciendo una experiencia de checkout fluida a tus clientes. También es posible aplicar estilos a distintos estados del campo, por ejemplo cuando el campo tiene el foco.

Otros componentes

Bizum

El componente Bizum muestra un botón de pago Bizum. Cuando el cliente hace clic, se abre un modal de verificación por teléfono para completar el pago.

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

El componente PayPal muestra un botón de checkout de PayPal. Cuando el cliente aprueba, recibes un token para confirmar el pago.

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)

El componente PaymentRequest muestra un botón de Apple Pay o Google Pay según el navegador y el dispositivo del cliente.

nota

Apple Pay requiere verificación de dominio tanto en desarrollo como en producción.

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');

Modal de pago

Llamar a monei.confirmPayment() sin un paymentToken abre el Modal de pago de MONEI — un checkout completo en la página donde el cliente puede seleccionar un método de pago y completar el pago.

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

important

Apple Pay no está disponible en el Modal de pago. Usa el componente PaymentRequest en su lugar.

Consulta Usar el Modal de pago para la guía de integración completa.

Próximos pasos

• Consulta la Referencia de la API para ver todas las opciones y métodos de los componentes
• Consulta la Guía de migración si estás actualizando desde MONEI Components v2