Saltar al contenido principal

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​

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

Requiere Vue 3.3 o posterior.

Componentes​

ComponenteDescripción
CardInputEntrada de tarjeta segura (iframe) con submit()
CardNumber / CardExpiry / CardCvcCampos de tarjeta montables individualmente, coordinados por useCardGroup()
BizumBotón de Bizum + modal de verificación por teléfono
PayPalBotón de checkout de PayPal
PaymentRequestBotón de Apple Pay / Google Pay

Card Input​

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

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

Consulta la Referencia de la API para ver todas las props de CardInput (estilo, placeholders, mensajes de error, callbacks de eventos).

Campos de tarjeta separados​

Monta el número, la caducidad y el CVC como componentes separados en tu propio diseño. Crea el grupo con useCardGroup() dentro de setup() — los identificadores de pago viven en el grupo, los campos solo aceptan props de presentación.

<script setup>
import {ref} from 'vue';
import {
  CardNumber,
  CardExpiry,
  CardCvc,
  useCardGroup,
  confirmPayment
} from '@monei-js/vue-components';

const props = defineProps({paymentId: String});
const group = useCardGroup({paymentId: props.paymentId});
const complete = ref(false);
const error = ref('');

async function handleSubmit() {
  const result = await group.submit();
  if (result.error) {
    error.value = result.error; // el campo con error ya está resaltado
    return;
  }
  await confirmPayment({paymentId: props.paymentId, paymentToken: result.token});
}
</script>

<template>
  <label>Número de tarjeta</label>
  <CardNumber :group="group" class="card-box" :onChange="(e) => (complete = e.complete)" />
  <div class="row">
    <div>
      <label>Caducidad</label>
      <CardExpiry :group="group" class="card-box" />
    </div>
    <div>
      <label>CVC</label>
      <CardCvc :group="group" class="card-box" />
    </div>
  </div>
  <button :disabled="!complete" @click="handleSubmit">Pagar</button>
  <p v-if="error">{{ error }}</p>
</template>

Estiliza esa caja con tu propio CSS — el class que pasas se aplica al mismo elemento en el que cada campo alterna monei-component--focus, --invalid, --empty y --complete, de modo que .card-box.monei-component--invalid {} coincide. Una ref de plantilla en un campo expone focus(), blur() y clear().

Consulta la referencia de la API para todas las opciones y detalles de comportamiento.

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.

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

PayPal​

El componente PayPal 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>

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.

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

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

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​