svelte-stripe

Everything you need to add Stripe Elements to your Svelte project. 100% SvelteKit compatible.

Stripe is now sponsoring this project

Documentation

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