Componentes Svelte

Usa @monei-js/svelte-components para añadir componentes de pago de MONEI a tu aplicación Svelte 5. Cada componente usa props basadas en runes y bind:this para submit().

Instalación

npm

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

yarn

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

pnpm

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

Requiere Svelte 5 o posterior. Todos los componentes usan runes de Svelte 5 ($props(), $state, $effect) — Svelte 4 no está soportado.

Componentes

Componente	Descripción
CardInput	Entrada de tarjeta segura (iframe) con submit()
CardNumber / CardExpiry / CardCvc	Campos de tarjeta montables individualmente, coordinados por useCardGroup()
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

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

<script lang="ts">
  import {CardInput, confirmPayment} from '@monei-js/svelte-components';

  let {paymentId}: {paymentId: string} = $props();
  let cardInput: CardInput;
  let error = $state('');

  function handleChange(event: {error?: string}) {
    error = event.error ?? '';
  }

  async function handleSubmit() {
    const result = await cardInput.submit();
    if (result.error) {
      error = result.error;
      return;
    }
    await confirmPayment({paymentId, paymentToken: result.token});
  }
</script>

<div>
  <CardInput bind:this="{cardInput}" {paymentId} onChange="{handleChange}" />
  <button onclick="{handleSubmit}">Pay</button>
  {#if error}
  <p>{error}</p>
  {/if}
</div>

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() durante la inicialización del componente. Pasa un thunk para opciones reactivas — los cambios se sincronizan con el grupo automáticamente:

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

  let {paymentId} = $props();
  const group = useCardGroup(() => ({paymentId}));
  let complete = $state(false);
  let error = $state('');

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

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

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. bind:this 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.

<script lang="ts">
  import {Bizum, confirmPayment} from '@monei-js/svelte-components';

  let {paymentId}: {paymentId: string} = $props();

  async function handleSubmit(result: {token?: string}) {
    if (result.token) {
      await confirmPayment({paymentId, paymentToken: result.token});
    }
  }

  function handleError(error: string) {
    console.error(error);
  }
</script>

<Bizum {paymentId} onSubmit="{handleSubmit}" onError="{handleError}" />

PayPal

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

<script lang="ts">
  import {PayPal, confirmPayment} from '@monei-js/svelte-components';

  let {paymentId}: {paymentId: string} = $props();

  async function handleSubmit(result: {token?: string}) {
    if (result.token) {
      await confirmPayment({paymentId, paymentToken: result.token});
    }
  }

  function handleError(error: string) {
    console.error(error);
  }
</script>

<PayPal {paymentId} onSubmit="{handleSubmit}" onError="{handleError}" />

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.

<script lang="ts">
  import {PaymentRequest, confirmPayment} from '@monei-js/svelte-components';

  let {paymentId}: {paymentId: string} = $props();

  async function handleSubmit(result: {token?: string}) {
    if (result.token) {
      await confirmPayment({paymentId, paymentToken: result.token});
    }
  }

  function handleError(error: string) {
    console.error(error);
  }
</script>

<PaymentRequest {paymentId} onSubmit="{handleSubmit}" onError="{handleError}" />

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.

<script lang="ts">
  import {confirmPayment} from '@monei-js/svelte-components';

  let {paymentId}: {paymentId: string} = $props();

  async function handleClick() {
    const result = await confirmPayment({paymentId});
    // Payment completed — check result.status
    console.log(result);
  }
</script>

<button onclick="{handleClick}">Pay</button>

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

• Consulta la Referencia de la API para ver todas las opciones y métodos de los componentes
• Este es un paquete nuevo — no existía un driver de Svelte anteriormente. Consulta la Guía de migración para los cambios generales de v2 a v3