https://github.com/soenneker/soenneker.blazor.stripe.elements
A Blazor interop library for Stripe Elements
https://github.com/soenneker/soenneker.blazor.stripe.elements
blazor blazorlibrary blazorstripeelementsinteroputil csharp dotnet elements javascript js payment processing stripe wasm webassembly
Last synced: about 1 month ago
JSON representation
A Blazor interop library for Stripe Elements
- Host: GitHub
- URL: https://github.com/soenneker/soenneker.blazor.stripe.elements
- Owner: soenneker
- License: mit
- Created: 2025-03-24T18:40:28.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2026-05-01T13:57:32.000Z (about 1 month ago)
- Last Synced: 2026-05-01T15:32:20.911Z (about 1 month ago)
- Topics: blazor, blazorlibrary, blazorstripeelementsinteroputil, csharp, dotnet, elements, javascript, js, payment, processing, stripe, wasm, webassembly
- Language: CSS
- Homepage: https://soenneker.com
- Size: 1.77 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
[](https://www.nuget.org/packages/soenneker.blazor.stripe.elements/)
[](https://github.com/soenneker/soenneker.blazor.stripe.elements/actions/workflows/publish-package.yml)
[](https://www.nuget.org/packages/soenneker.blazor.stripe.elements/)
[](https://github.com/soenneker/soenneker.blazor.stripe.elements/actions/workflows/codeql.yml)
#  Soenneker.Blazor.Stripe.Elements
**A modular, strongly-typed Blazor library for Stripe Elements** � designed to provide first-class C# configuration and deep interop with Stripe.js. Built for modern Blazor projects using Stripe's Payment, Link Authentication, and Address Elements.
## ? Features
* ?? **Blazor-native components** for ``, ``, ``, and ``
* ?? **Fully configurable via C#** � with strong typing for all supported options, including appearance, locale, currency, developer tools, and more
* ?? **Appearance API support** with extensible theming and rule control
* ?? **Supports SetupIntents**, on-submit hooks, and validation workflows
* ?? Compatible with Stripe test environments and developer tooling
* ?? Seamless async interop with Stripe.js lifecycle
## ?? Installation
```bash
dotnet add package Soenneker.Blazor.Stripe.Elements
```
---
## ??? Usage
### 1. Register Stripe in your Blazor project
```csharp
builder.Services.AddStripeElementsInteropAsScoped();
```
### 2. Add the components to your Razor page
```razor
Submit
```
### 3. Configure Stripe using C\#
```csharp
_config = new StripeElementsConfiguration
{
PublishableKey = "pk_test_...",
ElementsOptions = new StripeElementsOptions
{
Locale = "auto",
Currency = CurrencyCode.Usd,
Mode = StripeElementsMode.Setup,
Appearance = new StripeAppearance
{
Theme = StripeElementsTheme.Flat,
Variables = new StripeAppearanceVariablesExtended
{
ColorPrimary = "#0570de",
BorderRadius = "4px"
}
}
},
AddressOptions = new StripeAddressOptions
{
Mode = StripeAddressMode.Billing,
AllowedCountries = ["US", "CA"],
Fields = new StripeAddressFields
{
Phone = StripeAddressFieldsPhoneOption.Auto
}
}
};
```
---
## ? Components
| Component | Purpose |
| --------------------------------- | ------------------------------------------ |
| `StripeElements` | Wrapper and manager for all child elements |
| `StripePaymentElement` | Handles card and express payments |
| `StripeLinkAuthenticationElement` | Collects email and links with Stripe Link |
| `StripeAddressElement` | Collects billing or shipping address |
| `StripeElementsConfiguration` | Full C# model to control everything |
---
## ?? Official Stripe Docs
* ?? [Stripe Elements Overview](https://docs.stripe.com/elements)
* ?? [Elements JavaScript API Reference](https://docs.stripe.com/js/element)
* ?? [Payment Element](https://docs.stripe.com/js/element/payment_element)
* ?? [Address Element](https://docs.stripe.com/js/element/address_element)
* ?? [Link Authentication Element](https://docs.stripe.com/js/element/link_authentication_element)
* ?? [Appearance API (Theme & Styling)](https://docs.stripe.com/elements/appearance-api)