Soenneker.Blazor.CreditCards
3.0.77
Prefix Reserved
dotnet add package Soenneker.Blazor.CreditCards --version 3.0.77
NuGet\Install-Package Soenneker.Blazor.CreditCards -Version 3.0.77
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="Soenneker.Blazor.CreditCards" Version="3.0.77" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
<PackageVersion Include="Soenneker.Blazor.CreditCards" Version="3.0.77" />
<PackageReference Include="Soenneker.Blazor.CreditCards" />
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.
paket add Soenneker.Blazor.CreditCards --version 3.0.77
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#r "nuget: Soenneker.Blazor.CreditCards, 3.0.77"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
#:package Soenneker.Blazor.CreditCards@3.0.77
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package.
#addin nuget:?package=Soenneker.Blazor.CreditCards&version=3.0.77
#tool nuget:?package=Soenneker.Blazor.CreditCards&version=3.0.77
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
Soenneker.Blazor.CreditCards
A beautiful, animated credit card component with real-time updates and brand detection
Installation
dotnet add package Soenneker.Blazor.CreditCards
✨ Features
- 💳 Live-updating, animated card rendering
- 🧠 Automatic card type detection (Visa, Mastercard, Amex, etc.)
- 🖼️ Built-in front/back flip animation
- 🖱️ Click event support for interactive behaviors
- 🧼 Placeholder logic for empty cards
- 🧪 Perfect for forms, payment demos, and simulations
📦 Installation
dotnet add package Soenneker.Blazor.CreditCards
🛠️ Usage
1. Register the interop service
builder.Services.AddCreditCardsInteropAsScoped();
2. Add the component
<CreditCard CardNumber="@CardNumber"
CardholderName="@CardholderName"
ExpiryDate="@ExpiryDate"
Cvc="@Cvc"
FlipEnabled="true"
OnClick="HandleCardClick"
@ref="_creditCard" />
### 3. Handle click events (optional)
```csharp
private async Task HandleCardClick(MouseEventArgs args)
{
// Example: Flip the card when clicked
_creditCard?.Flip();
// Or perform any other action
Console.WriteLine($"Card clicked at: {args.ClientX}, {args.ClientY}");
}
4. Control flip functionality
<CreditCard FlipEnabled="false" ... />
<CreditCard FlipEnabled="true" ... />
FlipEnabled Parameter:
true(default): Card can be flipped by clicking or programmaticallyfalse: Disables flip functionality, cursor changes to default, and Flip() method does nothing
5. Programmatic card control
// Flip the card programmatically
_creditCard?.Flip();
// Set last 4 digits only (for saved cards)
await _creditCard?.SetLast4("1234", "visa");
// Reset to full input mode
_creditCard?.ResetCardDetection();
| Product | Versions Compatible and additional computed target framework versions. |
|---|---|
| .NET | net9.0 is compatible. net9.0-android was computed. net9.0-browser was computed. net9.0-ios was computed. net9.0-maccatalyst was computed. net9.0-macos was computed. net9.0-tvos was computed. net9.0-windows was computed. net10.0 was computed. net10.0-android was computed. net10.0-browser was computed. net10.0-ios was computed. net10.0-maccatalyst was computed. net10.0-macos was computed. net10.0-tvos was computed. net10.0-windows was computed. |
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.
-
net9.0
- Microsoft.AspNetCore.Components.Web (>= 9.0.7)
- Soenneker.Blazor.Utils.ResourceLoader (>= 3.0.1482)
- Soenneker.Extensions.String (>= 3.0.539)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.
| Version | Downloads | Last Updated |
|---|---|---|
| 3.0.77 | 366 | 7/24/2025 |
| 3.0.76 | 102 | 7/18/2025 |
| 3.0.75 | 154 | 7/9/2025 |
| 3.0.74 | 129 | 7/9/2025 |
| 3.0.73 | 139 | 7/8/2025 |
| 3.0.72 | 129 | 7/8/2025 |
| 3.0.71 | 190 | 7/3/2025 |
| 3.0.70 | 129 | 7/3/2025 |
| 3.0.69 | 132 | 7/2/2025 |
| 3.0.68 | 124 | 6/28/2025 |
| 3.0.67 | 85 | 6/28/2025 |
| 3.0.66 | 65 | 6/28/2025 |
| 3.0.65 | 62 | 6/28/2025 |
| 3.0.64 | 61 | 6/28/2025 |
| 3.0.63 | 61 | 6/27/2025 |
| 3.0.62 | 72 | 6/27/2025 |
| 3.0.61 | 74 | 6/27/2025 |
| 3.0.60 | 137 | 6/24/2025 |
| 3.0.59 | 384 | 6/11/2025 |
| 3.0.58 | 277 | 6/11/2025 |
| 3.0.57 | 276 | 6/10/2025 |
| 3.0.56 | 277 | 6/10/2025 |
| 3.0.55 | 275 | 6/10/2025 |
| 3.0.54 | 149 | 6/3/2025 |
| 3.0.53 | 144 | 6/2/2025 |
| 3.0.52 | 169 | 5/28/2025 |
| 3.0.51 | 142 | 5/28/2025 |
| 3.0.50 | 139 | 5/27/2025 |
| 3.0.49 | 137 | 5/27/2025 |
| 3.0.48 | 138 | 5/27/2025 |
| 3.0.47 | 140 | 5/27/2025 |
| 3.0.46 | 140 | 5/27/2025 |
| 3.0.45 | 95 | 5/25/2025 |
| 3.0.44 | 106 | 5/23/2025 |
| 3.0.43 | 120 | 5/23/2025 |
| 3.0.42 | 119 | 5/23/2025 |
| 3.0.41 | 128 | 5/23/2025 |
| 3.0.40 | 133 | 5/23/2025 |
| 3.0.39 | 147 | 5/22/2025 |
| 3.0.38 | 142 | 5/22/2025 |
| 3.0.37 | 170 | 5/19/2025 |
| 3.0.36 | 141 | 5/18/2025 |
| 3.0.35 | 101 | 5/18/2025 |
| 3.0.34 | 231 | 5/14/2025 |
| 3.0.33 | 229 | 5/14/2025 |
| 3.0.32 | 224 | 5/14/2025 |
| 3.0.31 | 217 | 5/13/2025 |
| 3.0.30 | 181 | 5/8/2025 |
| 3.0.29 | 141 | 5/8/2025 |
| 3.0.28 | 142 | 5/8/2025 |
| 3.0.27 | 138 | 5/8/2025 |
| 3.0.26 | 137 | 5/8/2025 |
| 3.0.25 | 143 | 5/8/2025 |
| 3.0.24 | 141 | 5/8/2025 |
| 3.0.23 | 142 | 5/8/2025 |
| 3.0.22 | 144 | 5/8/2025 |
| 3.0.21 | 139 | 5/7/2025 |
| 3.0.20 | 140 | 5/7/2025 |
| 3.0.19 | 148 | 5/6/2025 |
| 3.0.18 | 143 | 5/6/2025 |
| 3.0.17 | 136 | 5/5/2025 |
| 3.0.16 | 146 | 5/5/2025 |
| 3.0.15 | 138 | 5/5/2025 |
| 3.0.14 | 142 | 5/5/2025 |
| 3.0.13 | 137 | 5/5/2025 |
| 3.0.12 | 139 | 5/5/2025 |
| 3.0.11 | 139 | 5/5/2025 |
| 3.0.10 | 139 | 5/5/2025 |
| 3.0.9 | 147 | 5/5/2025 |
| 3.0.8 | 137 | 5/5/2025 |
| 3.0.6 | 143 | 5/5/2025 |
| 3.0.5 | 141 | 5/5/2025 |
| 3.0.4 | 143 | 4/30/2025 |
| 3.0.3 | 143 | 4/30/2025 |
| 3.0.2 | 141 | 4/30/2025 |
| 3.0.1 | 142 | 4/30/2025 |