@monei-js/svelte-components

Svelte 5 components for MONEI payments. Runes-based props, bind:this for submit(), and idiomatic Svelte API.

Install

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

Components

| Component | Description | | ---------------- | ------------------------------------------ | | CardInput | Secure card input (iframe) with submit() | | Bizum | Bizum button + phone verification modal | | PayPal | PayPal checkout button | | PaymentRequest | Apple Pay / browser Payment Request button |

Quick Start

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

  let cardInput: CardInput;
  const paymentId = 'pay_...';

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

<CardInput bind:this={cardInput} {paymentId} />
<button onclick={handleSubmit}>Pay</button>

API Re-exports

confirmPayment and api are re-exported from this package for convenience:

import {CardInput, Bizum, confirmPayment, api} from '@monei-js/svelte-components';

Migrating from vanilla JS

This is a new package — there was no previous Svelte driver.

submit() usage

Use bind:this to get a component reference, then call submit():

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

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

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

<CardInput bind:this={cardInput} {paymentId} onChange={handleChange} />
<button onclick={handleSubmit}>Pay</button>

Full example

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

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

  function handleChange(e: {isValid: boolean}) {
    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>

Svelte 5 runes

All components use Svelte 5 runes ($props(), $effect, $state). Svelte 4 is not supported.

Documentation

Full API reference: docs.monei.com/monei-js/reference

License

MIT