svelte-stripe
Everything you need to add Stripe Elements to your Svelte project. 100% SvelteKit compatible.
Stripe is now sponsoring this project
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. -
<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. -
<LinkAuthenticationElement/>
: Ability to use saved payment methods stored in Link. -
<Address/>
: Component for collecting billing and shipping addresses.
Examples
There is example code for:
- Payment Element
- Link
- Credit card
- GooglePay
- ApplePay
- MicrosoftPay
- SEPA direct deposit
- iDEAL
- Alipay
- WeChat Pay
- Konbini
- Klarna
- Sofort
- Afterpay/Clearpay
Please open a PR or issue, if you'd like to add more.
Usage
See documentation for setup instructions and examples.
Sponsors
Code contributors
Development mode
Run pnpm dev
with environment loaded, and visit https://localhost:3000
:
npx dotenv -c development pnpm dev
License
MIT