Svelte Stripe

https://www.sveltestripe.com/
Admin
Svelte Stripe provides everything needed to integrate Stripe Elements into Svelte and SvelteKit...
Tokens:2,152
Snippets:15
Trust Score:5.7
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install svelte-stripe Dependencies

Source: https://www.sveltestripe.com/index

Installs the necessary Stripe and svelte-stripe packages as development dependencies using pnpm. These packages are essential for integrating Stripe's payment processing capabilities into a Svelte project.

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

--------------------------------

### Initialize Stripe in Svelte Component

Source: https://www.sveltestripe.com/index

Initializes the Stripe instance using the public key loaded from environment variables within a Svelte component's `onMount` lifecycle function. It then renders the `<Elements>` component to provide Stripe context to nested payment components.

```svelte
<script>
  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}>
  <!-- this is where your Stripe components go -->
</Elements>
```

--------------------------------

### Stripe CLI: Forward Webhooks to Localhost

Source: https://www.sveltestripe.com/index

Use the Stripe CLI to forward incoming webhooks to your local development environment. This command is useful during development to test webhook functionality without deploying your application.

```bash
stripe listen --forward-to localhost:5173/stripe/webhooks
```

--------------------------------

### Svelte: Process iDEAL Payments

Source: https://www.sveltestripe.com/index

Integrate iDEAL payments using the `<Ideal>` component. This requires Stripe integration and a form to collect the user's name and email. The payment is completed using `stripe.confirmIdealPayment()`, which necessitates a `return_url` for redirection after payment.

```svelte
<Elements {stripe}>
  <form on:submit|preventDefault="{submit}">
    <input name="name" bind:value="{name}" placeholder="Name" />
    <input name="email" bind:value="{email}" placeholder="E-mail" type="email" />
    <Ideal bind:element="{idealElement}" />
    <button>Pay</button>
  </form>
</Elements>
```

```javascript
const result = await stripe.confirmIdealPayment(clientSecret, {
  payment_method: {
    ideal: idealElement,
    billing_details: {
      name,
      email
    }
  },
  return_url: `${window.location.origin}/return`
})
```

--------------------------------

### Use PaymentElement for Payments

Source: https://www.sveltestripe.com/index

Integrates the `PaymentElement` for an all-in-one payment experience supporting various payment methods. It's used within the `<Elements>` provider and requires a `clientSecret` for confirming payments.

```svelte
<form on:submit|preventDefault="{submit}">
  <Elements {stripe} {clientSecret} bind:elements>
    <PaymentElement options="{...}" />
  </Elements>

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

--------------------------------

### SvelteKit: Handle Stripe Webhooks

Source: https://www.sveltestripe.com/index

Set up a POST endpoint in SvelteKit to receive and verify Stripe webhooks. This involves constructing the event using the request body, signature, and a webhook secret. The handler can then process events like `charge.succeeded` to fulfill orders.

```javascript
// in src/routes/stripe/webhooks/+server.js
import Stripe from 'stripe'
import { error, json } from '@sveltejs/kit'
import { env } from '$env/dynamic/private'

const stripe = new Stripe(env.SECRET_STRIPE_KEY)

export async function POST({ request }) {
  const body = await request.text()
  const signature = request.headers.get('stripe-signature')
  let event

  try {
    event = stripe.webhooks.constructEvent(body, signature, env.STRIPE_WEBHOOK_SECRET)
  } catch (err) {
    console.warn('⚠️  Webhook signature verification failed.', err.message)
    throw error(400, 'Invalid request')
  }

  if (event.type == 'charge.succeeded') {
    const charge = event.data.object
    console.log(`✅ Charge succeeded ${charge.id}`)
  }

  return json()
}
```

--------------------------------

### Svelte: Process SEPA Direct Debit Payments

Source: https://www.sveltestripe.com/index

Use the `<Iban>` component for SEPA direct debit payments. It requires Stripe integration and a form for user input, including name and IBAN. The `submit` handler uses `stripe.confirmSepaDebitPayment()` to process the payment with the provided IBAN and billing details.

```svelte
<Elements {stripe}>
  <form on:submit|preventDefault="{submit}">
    <input name="name" bind:value="{name}" placeholder="Name" />
    <Iban supportedCountries={['SEPA']} bind:element="{ibanElement}"/>
    <button>Pay</button>
  </form>
</Elements>
```

```javascript
const result = await stripe.confirmSepaDebitPayment(clientSecret, {
  payment_method: {
    sepa_debit: ibanElement,
    billing_details: {
      name,
      email
    }
  }
})
```

--------------------------------

### Create Payment Intent (Server-side)

Source: https://www.sveltestripe.com/index

Creates a payment intent on the server using Stripe's secret key. This endpoint handles the server-side logic for initiating a payment, specifying the amount, currency, and allowed payment methods, and returns the client secret to the client.

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

// initialize Stripe
const stripe = new Stripe(SECRET_STRIPE_KEY)

// handle POST /create-payment-intent
export async function POST() {
  // create the payment intent
  const paymentIntent = await stripe.paymentIntents.create({
    amount: 2000,
    // note, for some EU-only payment methods it must be EUR
    currency: 'usd',
    // specify what payment methods are allowed
    // can be card, sepa_debit, ideal, etc...
    payment_method_types: ['card']
  })

  // return the clientSecret to the client
  return {
    body: {
      clientSecret: paymentIntent.client_secret
    }
  }
}
```

--------------------------------

### Use Link Authentication Element

Source: https://www.sveltestripe.com/index

Adds the `LinkAuthenticationElement` to the form, allowing customers to authenticate using their email and a verification code. This works in conjunction with the `PaymentElement` for a streamlined checkout process.

```svelte
<form on:submit|preventDefault="{submit}">
  <Elements {stripe} {clientSecret} bind:elements>
    <LinkAuthenticationElement />
    <PaymentElement />
  </Elements>

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

--------------------------------

### Svelte: Display Google Pay & Apple Pay Button

Source: https://www.sveltestripe.com/index

Use the `<PaymentRequestButton/>` component to display Google Pay or Apple Pay buttons. It requires Stripe integration and a `paymentRequest` object containing country, currency, and total amount details. An `on:paymentmethod` handler is needed to confirm the payment.

```svelte
<Elements {stripe}>
  <PaymentRequestButton {paymentRequest} on:paymentmethod="{pay}" />
</Elements>
```

```javascript
const paymentRequest = {
  country: 'US',
  currency: 'usd',
  total: { label: 'Demo total', amount: 1099 },
  requestPayerName: true,
  requestPayerEmail: true
}
```

```javascript
async function pay(e) {
  const paymentMethod = e.detail.paymentMethod

  let result = await stripe.confirmCardPayment(clientSecret, {
    payment_method: paymentMethod.id
  })

  if (result.error) {
    e.detail.complete('fail')
    error = result.error
  } else {
    e.detail.complete('success')
    goto('/thanks')
  }
}
```

--------------------------------

### Enable Automatic Payment Methods

Source: https://www.sveltestripe.com/index

Enables automatic payment methods for a payment intent creation. This simplifies the process by allowing Stripe to determine the most relevant payment methods based on the customer's region and currency.

```javascript
const paymentIntent = await stripe.paymentIntents.create({
  amount: 2000,
  currency: 'eur',
  automatic_payment_methods: {
    enabled: true
  }
})
```

--------------------------------

### Svelte: Styling Stripe Elements

Source: https://www.sveltestripe.com/index

Customize the appearance of Stripe payment components by applying attributes to the `<Elements/>` container. Options include themes, label positioning, custom variables, and CSS rules.

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

--------------------------------

### Use Individual Card Components

Source: https://www.sveltestripe.com/index

Utilizes individual Stripe card components (`CardNumber`, `CardExpiry`, `CardCvc`) for a customizable credit card input form. These components are bound to elements for later use in payment confirmation.

```svelte
<Elements {stripe}>
  <form on:submit|preventDefault="{submit}">
    <CardNumber bind:element="{cardElement}" />
    <CardExpiry />
    <CardCvc />

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

--------------------------------

### Confirm Payment with PaymentElement

Source: https://www.sveltestripe.com/index

Confirms a payment using the `PaymentElement` after the form submission. It utilizes the Stripe `elements` instance and can optionally handle redirection if required.

```javascript
const result = await stripe.confirmPayment({
  elements,
  // specify redirect: 'if_required' or a `return_url`
  redirect: 'if_required'
})
```

--------------------------------

### Confirm Card Payment

Source: https://www.sveltestripe.com/index

Confirms a card payment using the `confirmCardPayment` method, passing the client secret and the card element. It also allows for the inclusion of billing details for the transaction.

```javascript
const result = await stripe
  .confirmCardPayment(clientSecret, {
    payment_method: {
      card: cardElement,
      billing_details: {
        ...
      }
    }
  })
```
Tokens:
Raw