# Componentes Vue

Usa `@monei-js/vue-components` para añadir componentes de pago de MONEI a tu aplicación Vue 3. Cada componente es un componente Vue nativo con props tipadas y `submit()` mediante template ref.

<!-- -->

## Instalación[​](#instalación "Enlace directo al Instalación")

* npm
* yarn
* pnpm

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

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

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

Requiere Vue 3.3 o posterior.

## Componentes[​](#componentes "Enlace directo al Componentes")

| Componente       | Descripción                                         |
| ---------------- | --------------------------------------------------- |
| `CardInput`      | Entrada de tarjeta segura (iframe) con `submit()`   |
| `Bizum`          | Botón de Bizum + modal de verificación por teléfono |
| `PayPal`         | Botón de checkout de PayPal                         |
| `PaymentRequest` | Botón de Apple Pay / Google Pay                     |

## Card Input[​](#card-input "Enlace directo al Card Input")

El componente Card Input recopila el número de tarjeta, la fecha de caducidad y el CVC en un único iframe seguro. Usa un template ref para llamar a `submit()` y obtener un token de pago.

```
<template>

  <div>

    <CardInput ref="cardInput" :payment-id="paymentId" :on-change="handleChange" />

    <button @click="handleSubmit">Pay</button>

    <p v-if="error">{{ error }}</p>

  </div>

</template>



<script setup lang="ts">

  import {ref} from 'vue';

  import {CardInput, confirmPayment} from '@monei-js/vue-components';



  const props = defineProps<{paymentId: string}>();

  const cardInput = ref<InstanceType<typeof CardInput>>();

  const error = ref('');



  function handleChange(event: {error?: string}) {

    error.value = event.error ?? '';

  }



  async function handleSubmit() {

    const result = await cardInput.value!.submit();

    if (result.error) {

      error.value = result.error;

      return;

    }

    await confirmPayment({paymentId: props.paymentId, paymentToken: result.token});

  }

</script>
```

Abrir en CodeSandbox

Consulta la [Referencia de la API](https://docs.monei.com/es/es/monei-js/reference/.md#componente-cardinput) para ver todas las props de CardInput (estilo, placeholders, mensajes de error, callbacks de eventos).

## 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.

```
<template>

  <Bizum :payment-id="paymentId" :on-submit="handleSubmit" :on-error="handleError" />

</template>



<script setup lang="ts">

  import {Bizum, confirmPayment} from '@monei-js/vue-components';



  const props = defineProps<{paymentId: string}>();



  async function handleSubmit(result: {token?: string}) {

    if (result.token) {

      await confirmPayment({paymentId: props.paymentId, paymentToken: result.token});

    }

  }



  function handleError(error: string) {

    console.error(error);

  }

</script>
```

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.

```
<template>

  <PayPal :payment-id="paymentId" :on-submit="handleSubmit" :on-error="handleError" />

</template>



<script setup lang="ts">

  import {PayPal, confirmPayment} from '@monei-js/vue-components';



  const props = defineProps<{paymentId: string}>();



  async function handleSubmit(result: {token?: string}) {

    if (result.token) {

      await confirmPayment({paymentId: props.paymentId, paymentToken: result.token});

    }

  }



  function handleError(error: string) {

    console.error(error);

  }

</script>
```

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#registra-tu-dominio-con-apple-pay) tanto en desarrollo como en producción.

```
<template>

  <PaymentRequest :payment-id="paymentId" :on-submit="handleSubmit" :on-error="handleError" />

</template>



<script setup lang="ts">

  import {PaymentRequest, confirmPayment} from '@monei-js/vue-components';



  const props = defineProps<{paymentId: string}>();



  async function handleSubmit(result: {token?: string}) {

    if (result.token) {

      await confirmPayment({paymentId: props.paymentId, paymentToken: result.token});

    }

  }



  function handleError(error: string) {

    console.error(error);

  }

</script>
```

Abrir en CodeSandbox

## Modal de pago[​](#modal-de-pago "Enlace directo al Modal de pago")

Llamar a `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.

```
<template>

  <button @click="handleClick">Pay</button>

</template>



<script setup lang="ts">

  import {confirmPayment} from '@monei-js/vue-components';



  const props = defineProps<{paymentId: string}>();



  async function handleClick() {

    const result = await confirmPayment({paymentId: props.paymentId});

    // Payment completed — check result.status

    console.log(result);

  }

</script>
```

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 la API `.driver('vue3')`