Soenneker.Blazor.Stripe.Elements 4.0.744

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

<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">

    <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

?? Official Stripe Docs

• ?? Stripe Elements Overview
• ?? Elements JavaScript API Reference
• ?? Payment Element
• ?? Address Element
• ?? Link Authentication Element
• ?? Appearance API (Theme & Styling)