# 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`](https://www.npmjs.com/package/@monei-js/components)                 | Vanilla JS  | Esta página                                                          |
| [`@monei-js/react-components`](https://www.npmjs.com/package/@monei-js/react-components)     | React 17+   | [Guía de React](https://docs.monei.com/es/es/monei-js/react/.md)     |
| [`@monei-js/vue-components`](https://www.npmjs.com/package/@monei-js/vue-components)         | Vue 3.3+    | [Guía de Vue](https://docs.monei.com/es/es/monei-js/vue/.md)         |
| [`@monei-js/angular-components`](https://www.npmjs.com/package/@monei-js/angular-components) | Angular 14+ | [Guía de Angular](https://docs.monei.com/es/es/monei-js/angular/.md) |
| [`@monei-js/svelte-components`](https://www.npmjs.com/package/@monei-js/svelte-components)   | Svelte 5+   | [Guía de Svelte](https://docs.monei.com/es/es/monei-js/svelte/.md)   |

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[​](#configurar-moneijs "Enlace directo al 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
* npm
* yarn
* pnpm

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

```
npm install @monei-js/components
```

```
yarn add @monei-js/components
```

```
pnpm add @monei-js/components
```

## Componente Card Input[​](#componente-card-input "Enlace directo al 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
* CSS
* JavaScript

```
<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>
```

```
#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` <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;

  }

});
```

Abrir en CodeSandbox

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[​](#otros-componentes "Enlace directo al Otros componentes")

### Bizum[​](#bizum "Enlace directo al Bizum")

El componente [Bizum](https://docs.monei.com/es/es/payment-methods/bizum/.md) 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');
```

Abrir en CodeSandbox

### PayPal[​](#paypal "Enlace directo al PayPal")

El componente [PayPal](https://docs.monei.com/es/es/payment-methods/paypal/.md) 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');
```

Abrir en CodeSandbox

### PaymentRequest (Apple Pay / Google Pay)[​](#paymentrequest-apple-pay--google-pay "Enlace directo al PaymentRequest (Apple Pay / Google Pay)")

El componente [PaymentRequest](https://docs.monei.com/es/es/payment-methods/apple-pay/.md) 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](https://docs.monei.com/es/es/payment-methods/apple-pay/.md#register-your-domain-with-apple-pay) 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');
```

Abrir en CodeSandbox

## Modal de pago[​](#modal-de-pago "Enlace directo al 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](#paymentrequest-apple-pay--google-pay) en su lugar.

Consulta [Usar el Modal de pago](https://docs.monei.com/es/es/integrations/use-payment-modal/.md) para la guía de integración completa.

## Próximos pasos[​](#próximos-pasos "Enlace directo al Próximos pasos")

* Consulta la [Referencia de la API](https://docs.monei.com/es/es/monei-js/reference/.md) para ver todas las opciones y métodos de los componentes
* Consulta la [Guía de migración](https://docs.monei.com/es/es/monei-js/migration/.md) si estás actualizando desde MONEI Components v2