Soenneker.Blazor.Stripe.Elements 3.0.192

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
• 💬 Built-in callback support for validation and error responses
• 🔄 Seamless async interop with Stripe.js lifecycle

<img src="https://github.com/user-attachments/assets/a2f8777a-02e0-40de-afd6-fe4d1211427b" width="80%"></img>

📦 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"
                OnSubmitPayment="HandleStripeSubmit"
                OnValidatePayment="HandleStripeValidate">

    <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

🔄 Event Callbacks

public async Task HandleStripeValidate(StripeErrorDto? error) { ... }
public async Task HandleStripeSubmit(StripeErrorDto? error) { ... }

🔗 Official Stripe Docs

• 🌐 Stripe Elements Overview
• ⚙️ Elements JavaScript API Reference
• 💳 Payment Element
• 📬 Address Element
• 🔐 Link Authentication Element
• 🎨 Appearance API (Theme & Styling)