svelte-stripe

SEPA

Use the <Iban> component. You can restrict supported countries using the supportedCountries prop (e.g., ['SEPA']). Complete the payment using stripe.confirmSepaDebitPayment().

iDEAL

Use the <Ideal> component. Complete the payment using stripe.confirmIdealPayment(), ensuring you provide a return_url.

<!-- SEPA Example -->
<Iban supportedCountries={['SEPA']} bind:element={ibanElement} />

<!-- iDEAL Example -->
<Ideal bind:element={idealElement} />

Configure your Stripe credentials by adding your public and secret keys to your environment variables. Use the public key for client-side operations and the secret key for server-side operations (like creating Payment Intents or handling webhooks).

PUBLIC_STRIPE_KEY=pk_test_...
SECRET_STRIPE_KEY=sk_test_...

The <PaymentElement> is an all-in-one component that supports various payment methods like credit cards, SEPA, Google Pay, and Apple Pay.

To use it:

1. Enable automatic_payment_methods: { enabled: true } when creating the Payment Intent on the server.
2. Include <PaymentElement /> inside the <Elements> provider.
3. Bind the elements instance to your form to call stripe.confirmPayment() upon submission.

<form onsubmit={submit}>
  <Elements {stripe} {clientSecret} bind:elements>
    <PaymentElement options="{...}" />
  </Elements>

  <button>Pay</button>
</form>

<script>
  // ... inside submit function
  const result = await stripe.confirmPayment({
    elements,
    redirect: 'if_required'
  })
</script>

To use svelte-stripe in your Svelte or SvelteKit project, you need to install the library itself along with Stripe's official server-side and client-side libraries. Use pnpm to add these three packages:

• stripe: Official Stripe server-side library.
• @stripe/stripe-js: Official Stripe client-side library.
• svelte-stripe: The community-supported Svelte wrapper for Stripe Elements.

pnpm install -D stripe @stripe/stripe-js svelte-stripe

To use Stripe components, you must first initialize Stripe using loadStripe from @stripe/stripe-js and then wrap your components in the <Elements> component provided by svelte-stripe. This is typically done inside an onMount block to ensure the code runs in the browser.

<script lang="ts">
  import { loadStripe } from '@stripe/stripe-js'
  import { Elements } from 'svelte-stripe'
  import { onMount } from 'svelte'
  import { PUBLIC_STRIPE_KEY } from '$env/static/public'

  let stripe = null

  onMount(async () => {
    stripe = await loadStripe(PUBLIC_STRIPE_KEY)
  })
</script>

<Elements {stripe}>
  <!-- your Stripe components go here -->
</Elements>

Before charging a customer, you must create a Payment Intent on your server to securely define the amount and currency. This prevents clients from tampering with the price. The server should return the client_secret to the client to complete the payment process.

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

const stripe = new Stripe(SECRET_STRIPE_KEY)

export async function POST() {
  const paymentIntent = await stripe.paymentIntents.create({
    amount: 2000,
    currency: 'usd',
    payment_method_types: ['card']
  })

  return {
    body: {
      clientSecret: paymentIntent.client_secret
    }
  }
}

For granular control over credit card inputs, use the <CardNumber>, <CardExpiry>, and <CardCvc> components. You must bind the cardElement from <CardNumber> to pass it to stripe.confirmCardPayment().

<Elements {stripe}>
  <form onsubmit={submit}>
    <CardNumber bind:element={cardElement} />
    <CardExpiry />
    <CardCvc />

    <button>Pay</button>
  </form>
</Elements>

<script>
  // ... inside submit function
  const result = await stripe.confirmCardPayment(clientSecret, {
    payment_method: {
      card: cardElement,
      billing_details: { ... }
    }
  })
</script>

You can customize the look of your Stripe components by passing an appearance object to the <Elements> component. This allows you to set themes, label styles, and custom CSS variables like colorPrimary.

<Elements
  appearance={{
    theme: "flat",
    labels: "floating",
    variables: { colorPrimary: 'pink' },
    rules: {...}
  }}
/>

To enable Link authentication (which allows customers to use saved details via email/SMS), add the <LinkAuthenticationElement /> alongside the <PaymentElement /> inside your <Elements> container.

<form onsubmit={submit}>
  <Elements {stripe} {clientSecret} bind:elements>
    <LinkAuthenticationElement />
    <PaymentElement />
  </Elements>

  <button>Pay</button>
</form>