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

joshnuss

svelte-stripe

  "homepage": "https://sveltestripe.com",

    "dev": "dotenv -c development -- vite dev",

    "build": "dotenv -c development vite build",

    "publish": "npm run package && cd package && npm publish",

    "preview": "dotenv -c development vite preview",

    "lint": "prettier --ignore-path .prettierignore --check --plugin-search-dir=. . && eslint --ignore-path .prettierignore .",

    "format": "prettier --ignore-path .prettierignore --write --plugin-search-dir=. .",

    "semantic-release": "semantic-release"

    "@sveltejs/adapter-vercel": "^1.0.6",

    "@vitejs/plugin-basic-ssl": "^0.1.2",

    "rehype-autolink-headings": "^6.1.1",

    "url": "https://github.com/joshnuss/svelte-stripe.git"

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

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

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

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

- `<PaymentRequestButton/>`: A GooglePay, ApplePay, or Link checkout button, depending on browser and user preferences.

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

- `<LinkAuthenticationElement/>`: Ability to use saved payment methods stored in [Link](https://link.co).

- `<Address/>`: Component for collecting billing and shipping addresses.

- [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/payment-request)

- [ApplePay](src/routes/examples/payment-request)

- [MicrosoftPay](src/routes/examples/payment-request)

- [SEPA direct deposit](src/routes/examples/sepa)

- [WeChat Pay](src/routes/examples/wechat-pay)

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

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

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

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

export { default as Card } from './Card.svelte'

export { default as CardNumber } from './CardNumber.svelte'

export { default as CardExpiry } from './CardExpiry.svelte'

export { default as CardCvc } from './CardCvc.svelte'

export { default as PaymentRequestButton } from './PaymentRequestButton.svelte'

export { default as Iban } from './Iban.svelte'

export { default as Ideal } from './Ideal.svelte'

export { default as PaymentElement } from './PaymentElement.svelte'

export { default as LinkAuthenticationElement } from './LinkAuthenticationElement.svelte'

export { default as Address } from './Address.svelte'

export { default as PaymentMethodMessaging } from './PaymentMethodMessaging.svelte'

export { default as ExpressCheckout } from './ExpressCheckout.svelte'

export { default as EmbeddedCheckout } from './EmbeddedCheckout.svelte'

export { default as Elements } from './Elements.svelte'

export { default as Container } from './Container.svelte'

Everything you need to add [Stripe Elements](https://stripe.com/en-gb-us/payments/elements) to your [Svelte](https://svelte.dev) & [SvelteKit](https://kit.svelte.dev) projects.

[npm](https://npmjs.org/package/svelte-stripe)

[github](https://github.com/joshnuss/svelte-stripe)

[changelog](https://github.com/joshnuss/svelte-stripe/blob/main/CHANGELOG.md)

[license](https://github.com/joshnuss/svelte-stripe/blob/main/LICENSE)

To configure your project, add these 2 packages:

- [stripe](https://npmjs.org/package/stripe) is the official server-side version of Stripe.

- [svelte-stripe](https://npmjs.org/package/svelte-stripe) is the community-supported wrapper for Stripe Elements.

Add your private and public keys to your environment:

In your payment page, initialize Stripe and add a `<Elements>` component:

  import { loadStripe } from '@stripe/stripe-js'

  import { Elements } from 'svelte-stripe'

  import { PUBLIC_STRIPE_KEY } from '$env/static/public'

    stripe = await loadStripe(PUBLIC_STRIPE_KEY)

Before making a charge, Stripe should be notified by creating a [payment intent](https://stripe.com/docs/api/payment_intents). It's a way to tell Stripe what amount to capture and to attach any relavent metadata, for example, the products they are buying. This must happen server-side to avoid anyone tampering with the amount.

Let's add an endpoint `src/routes/create-payment-intent/+server.js` to create the "payment intent":

import { SECRET_STRIPE_KEY } from '$env/static/private'

const stripe = new Stripe(SECRET_STRIPE_KEY)

  const paymentIntent = await stripe.paymentIntents.create({

    // note, for some EU-only payment methods it must be EUR

    // specify what payment methods are allowed

    // can be card, sepa_debit, ideal, etc...

  // return the clientSecret to the client

      clientSecret: paymentIntent.client_secret

There are several types of payment you can accept:

- [PaymentElement](/examples/payment-element)

- [Payment Element](/examples/payment-element)

- [Express Checkout](/examples/express-checkout)

- [Embedded Checkout](/examples/embedded-checkout)

- [Google Pay](/examples/payment-request)

- [Microsoft Pay](/examples/payment-request)

- [Afterpay/Clearpay](/examples/afterpay-clearpay)

- [PaymentMethodMessaging](/examples/payment-method-messaging)

		{
		"name": "svelte-stripe",
		"version": "1.0.0",
		"version": "1.1.0",
		"homepage": "https://sveltestripe.com",
		@@ -5,0 +5,0 @@ "license": "MIT",

Fixed alerts

Improved metrics

		@@ -32,2 +32,3 @@ # [svelte-stripe](https://sveltestripe.com)
		- [Express Checkout](src/routes/examples/express-checkout)
		- [Embedded Checkout](src/routes/examples/embedded-checkout)
		- [Link](src/routes/examples/payment-element)
		@@ -34,0 +35,0 @@ - [Credit card](src/routes/examples/credit-card)

		@@ -13,4 +13,5 @@ export { default as Card } from './Card.svelte'
		export { default as ExpressCheckout } from './ExpressCheckout.svelte'
		export { default as EmbeddedCheckout } from './EmbeddedCheckout.svelte'
		export { default as Elements } from './Elements.svelte'
		export { default as Container } from './Container.svelte'
		export { isServer } from './util'

		@@ -398,4 +398,5 @@ <svelte:head>

		- [PaymentElement](/examples/payment-element)
		- [Payment Element](/examples/payment-element)
		- [Express Checkout](/examples/express-checkout)
		- [Embedded Checkout](/examples/embedded-checkout)
		- [Credit Card](/examples/credit-card)
		@@ -402,0 +403,0 @@ - [Apple Pay](/examples/payment-request)