# Svelte Components

Use `@monei-js/svelte-components` to add MONEI payment components to your Svelte 5 app. Each component uses runes-based props and `bind:this` for `submit()`.

<!-- -->

## Install[​](#install "Direct link to Install")

* npm
* yarn
* pnpm

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

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

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

Requires Svelte 5 or later. All components use Svelte 5 runes (`$props()`, `$state`, `$effect`) — Svelte 4 is not supported.

## Components[​](#components "Direct link to Components")

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

## Card Input[​](#card-input "Direct link to Card Input")

The Card Input component collects card number, expiry, and CVC in a single secure iframe. Use `bind:this` to call `submit()` and get a payment token.

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

See the [API Reference](https://docs.monei.com/monei-js/reference/.md#cardinput-component) for all CardInput props (style, placeholders, error messages, event callbacks).

## Bizum[​](#bizum "Direct link to Bizum")

The [Bizum](https://docs.monei.com/payment-methods/bizum/.md) component renders a Bizum payment button. When the customer clicks it, a phone verification modal opens to complete the payment.

```
<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[​](#paypal "Direct link to PayPal")

The [PayPal](https://docs.monei.com/payment-methods/paypal/.md) component renders a PayPal checkout button. When the customer approves, you receive a token to confirm the payment.

```
<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)[​](#paymentrequest-apple-pay--google-pay "Direct link to PaymentRequest (Apple Pay / Google Pay)")

The [PaymentRequest](https://docs.monei.com/payment-methods/apple-pay/.md) component renders an Apple Pay or Google Pay button depending on the customer's browser and device.

note

Apple Pay requires [domain verification](https://docs.monei.com/payment-methods/apple-pay/.md#register-your-domain-with-apple-pay) in both development and production.

```
<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}" />
```

## Payment Modal[​](#payment-modal "Direct link to Payment Modal")

Calling `confirmPayment()` **without** a `paymentToken` opens the MONEI Payment Modal — a full in-page checkout where the customer can select a payment method and complete the payment.

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

important

Apple Pay is not available in the Payment Modal. Use the [PaymentRequest](#paymentrequest-apple-pay--google-pay) component instead.

See [Use Payment Modal](https://docs.monei.com/integrations/use-payment-modal/.md) for the full integration guide.

## Next steps[​](#next-steps "Direct link to Next steps")

* Check the [API Reference](https://docs.monei.com/monei-js/reference/.md) for all component options and methods
* This is a new package — there was no previous Svelte driver. See the [Migration Guide](https://docs.monei.com/monei-js/migration/.md) for general v2 → v3 changes