# svelte-stripe

> Everything you need to add Stripe Elements to your Svelte project. 100% [SvelteKit](https://kit.svelte.dev/) compatible.

Latest version **2.0.0** (published 2026-01-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install svelte-stripe
pnpm add svelte-stripe
yarn add svelte-stripe
bun add svelte-stripe
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2026-01-22 |
| First published | 2022-03-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 39.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 493 |
| Maintainers | joshnuss |

## Links

- npm: https://www.npmjs.com/package/svelte-stripe
- Repository: https://github.com/joshnuss/svelte-stripe
- Homepage: https://sveltestripe.com
- Issues: https://github.com/joshnuss/svelte-stripe/issues
- npm.io page: https://npm.io/package/svelte-stripe

## Recent versions

- 2.0.0 (latest) — 2026-01-22
- 1.4.0 — 2025-06-09
- 1.3.0 — 2024-10-31
- 1.2.1 — 2024-09-22
- 1.2.0 — 2024-05-05
- 1.1.7 — 2024-04-03
- 1.1.6 — 2024-04-03
- 1.1.5 — 2024-04-03
- 1.1.4 — 2024-01-27
- 1.1.3 — 2023-11-26
- 1.1.2 — 2023-11-19
- 1.1.1 — 2023-11-16
- 1.1.0 — 2023-11-16
- 1.0.0 — 2023-11-16
- 0.0.25 — 2023-11-15
- … 12 more at https://npm.io/package/svelte-stripe/versions

## README

# [svelte-stripe](https://sveltestripe.com)

Everything you need to add Stripe Elements to your Svelte project. 100% [SvelteKit](https://kit.svelte.dev/) compatible.

> Stripe is now [sponsoring this project](#sponsors)

[Documentation](https://sveltestripe.com)

## Used by

<a href="https://github.com/joshnuss/svelte-stripe/network/dependents">
  <img src="https://dependents.info/joshnuss/svelte-stripe/image.svg" />
</a>


## Components

The following components are provided:

- `<Elements/>`: A wrapper component to set context.
- `<CardNumber/>`: Input field for the card's number.
- `<CardExpiry/>`: Input field for the card's expiration date.
- `<CardCvc/>`: Input field for Card Verification Value.
- `<Card/>`: All-in-one component that has inputs for card number, expiry, cvc, and zip code.
- `<Iban/>`: Input field for IBAN (International bank account number).
- `<Ideal/>`: Input field for iDEAL (payment system used in the Netherlands).
- `<PaymentElement/>`: All-in-one component that allows the user to choose the type of payment.
- `<ExpressCheckout/>`: Pay with a wallet without leaving the page using GooglePay, ApplePay, or Link.
- `<LinkAuthenticationElement/>`: Ability to use saved payment methods stored in [Link](https://link.co).
- `<Address/>`: Component for collecting billing and shipping addresses.

## Examples

There is example code for:

- [Payment Element](src/routes/examples/payment-element)
- [Express Checkout](src/routes/examples/express-checkout)
- [Embedded Checkout](src/routes/examples/embedded-checkout)
- [Link](src/routes/examples/payment-element)
- [Credit card](src/routes/examples/credit-card)
- [GooglePay](src/routes/examples/express-checkout)
- [ApplePay](src/routes/examples/express-checkout)
- [MicrosoftPay](src/routes/examples/express-checkout)
- [SEPA direct deposit](src/routes/examples/sepa)
- [iDEAL](src/routes/examples/ideal)
- [Alipay](src/routes/examples/alipay)
- [WeChat Pay](src/routes/examples/wechat-pay)
- [Konbini](src/routes/examples/konbini)
- [Klarna](src/routes/examples/klarna)
- [Afterpay/Clearpay](src/routes/examples/afterpay-clearpay)
- [PaymentMethodMessaging](src/routes/examples/payment-method-messaging)

Please open a PR or issue, if you'd like to add more.

## Usage

See [documentation](https://sveltestripe.com) for setup instructions and examples.

## Sponsors

<a href="https://stripe.com">
  <img src="https://raw.githubusercontent.com/joshnuss/svelte-stripe/main/static/logos/stripe.svg" width="150px" alt="Stripe's logo"/>
</a>

## Code contributors

![GitHub Contributors Image](https://contrib.rocks/image?repo=joshnuss/svelte-stripe)

## Development mode

Run `pnpm dev` and visit `https://localhost:5173`:

```bash
pnpm dev
```

## License

MIT

---
_Source: https://npm.io/package/svelte-stripe · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._