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 <StripeElements>, <StripePaymentElement>, <StripeLinkAuthenticationElement>, and <StripeAddressElement>
• 🧠 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

dotnet add package Soenneker.Blazor.Stripe.Elements

---

🛠️ Usage

1. Register Stripe in your Blazor project

builder.Services.AddStripeElementsInteropAsScoped();

2. Add the components to your Razor page

<StripeElements @ref="_stripeElements" StripeElementsConfiguration="_config">

    <StripeAddressElement />
    <StripeLinkAuthenticationElement />
    <StripePaymentElement />

    <Button Clicked="Submit">Submit</Button>
</StripeElements>

3. Configure Stripe using C#

_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
• ⚙️ Elements JavaScript API Reference
• 💳 Payment Element
• 📬 Address Element
• 🔐 Link Authentication Element
• 🎨 Appearance API (Theme & Styling)