Soenneker.Blazor.CreditCards
3.0.144
Prefix Reserved
There is a newer version of this package available.
See the version list below for details.
See the version list below for details.
dotnet add package Soenneker.Blazor.CreditCards --version 3.0.144
NuGet\Install-Package Soenneker.Blazor.CreditCards -Version 3.0.144
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.144" />
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.144" />
<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.144
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#r "nuget: Soenneker.Blazor.CreditCards, 3.0.144"
#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.144
#: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.144
#tool nuget:?package=Soenneker.Blazor.CreditCards&version=3.0.144
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
- Soenneker.Blazor.Utils.ResourceLoader (>= 3.0.1503)
- Soenneker.Extensions.CancellationTokens (>= 3.0.3)
- Soenneker.Extensions.String (>= 3.0.557)
- Soenneker.Quark.Components.Cancellable (>= 3.0.30)
- Soenneker.Quark.Components.Core.Cancellable (>= 3.0.3)
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.145 | 50 | 9/26/2025 |
| 3.0.144 | 112 | 9/24/2025 |
| 3.0.143 | 162 | 9/22/2025 |
| 3.0.142 | 136 | 9/21/2025 |
| 3.0.141 | 154 | 9/21/2025 |
| 3.0.140 | 156 | 9/20/2025 |
| 3.0.139 | 165 | 9/20/2025 |
| 3.0.138 | 171 | 9/20/2025 |
| 3.0.137 | 222 | 9/19/2025 |
| 3.0.136 | 275 | 9/18/2025 |
| 3.0.135 | 272 | 9/18/2025 |
| 3.0.134 | 278 | 9/18/2025 |
| 3.0.133 | 277 | 9/17/2025 |
| 3.0.132 | 273 | 9/17/2025 |
| 3.0.131 | 289 | 9/17/2025 |
| 3.0.130 | 275 | 9/17/2025 |
| 3.0.129 | 282 | 9/17/2025 |
| 3.0.128 | 279 | 9/17/2025 |
| 3.0.127 | 275 | 9/16/2025 |
| 3.0.126 | 276 | 9/16/2025 |
| 3.0.125 | 268 | 9/16/2025 |
| 3.0.124 | 225 | 9/15/2025 |
| 3.0.123 | 143 | 9/9/2025 |
| 3.0.122 | 138 | 9/9/2025 |
| 3.0.121 | 127 | 9/9/2025 |
| 3.0.120 | 137 | 9/9/2025 |
| 3.0.119 | 136 | 9/9/2025 |
| 3.0.118 | 130 | 9/9/2025 |
| 3.0.117 | 115 | 9/6/2025 |
| 3.0.116 | 113 | 9/6/2025 |
| 3.0.115 | 112 | 9/6/2025 |
| 3.0.114 | 110 | 9/6/2025 |
| 3.0.113 | 157 | 9/4/2025 |
| 3.0.112 | 150 | 9/3/2025 |
| 3.0.111 | 152 | 9/3/2025 |
| 3.0.110 | 148 | 9/3/2025 |
| 3.0.109 | 153 | 9/3/2025 |
| 3.0.108 | 139 | 9/3/2025 |
| 3.0.107 | 148 | 9/3/2025 |
| 3.0.106 | 156 | 9/3/2025 |
| 3.0.105 | 151 | 9/3/2025 |
| 3.0.104 | 138 | 9/3/2025 |
| 3.0.103 | 88 | 8/22/2025 |
| 3.0.102 | 138 | 8/21/2025 |
| 3.0.101 | 117 | 8/16/2025 |
| 3.0.100 | 133 | 8/15/2025 |
| 3.0.99 | 145 | 8/12/2025 |
| 3.0.98 | 145 | 8/12/2025 |
| 3.0.97 | 133 | 8/12/2025 |
| 3.0.96 | 140 | 8/12/2025 |
| 3.0.95 | 130 | 8/11/2025 |
| 3.0.94 | 129 | 8/11/2025 |
| 3.0.93 | 129 | 8/11/2025 |
| 3.0.92 | 137 | 8/11/2025 |
| 3.0.91 | 141 | 8/11/2025 |
| 3.0.90 | 135 | 8/11/2025 |
| 3.0.89 | 142 | 8/11/2025 |
| 3.0.88 | 134 | 8/11/2025 |
| 3.0.87 | 135 | 8/11/2025 |
| 3.0.86 | 129 | 8/11/2025 |
| 3.0.85 | 137 | 8/11/2025 |
| 3.0.84 | 128 | 8/11/2025 |
| 3.0.83 | 222 | 8/6/2025 |
| 3.0.82 | 234 | 8/5/2025 |
| 3.0.81 | 222 | 8/5/2025 |
| 3.0.80 | 216 | 8/5/2025 |
| 3.0.79 | 210 | 8/5/2025 |
| 3.0.78 | 103 | 7/29/2025 |
| 3.0.77 | 476 | 7/24/2025 |
| 3.0.76 | 167 | 7/18/2025 |
| 3.0.75 | 173 | 7/9/2025 |
| 3.0.74 | 137 | 7/9/2025 |
| 3.0.73 | 159 | 7/8/2025 |
| 3.0.72 | 148 | 7/8/2025 |
| 3.0.71 | 208 | 7/3/2025 |
| 3.0.70 | 148 | 7/3/2025 |
| 3.0.69 | 156 | 7/2/2025 |
| 3.0.68 | 147 | 6/28/2025 |
| 3.0.67 | 103 | 6/28/2025 |
| 3.0.66 | 88 | 6/28/2025 |
| 3.0.65 | 81 | 6/28/2025 |
| 3.0.64 | 80 | 6/28/2025 |
| 3.0.63 | 70 | 6/27/2025 |
| 3.0.62 | 92 | 6/27/2025 |
| 3.0.61 | 93 | 6/27/2025 |
| 3.0.60 | 162 | 6/24/2025 |
| 3.0.59 | 411 | 6/11/2025 |
| 3.0.58 | 294 | 6/11/2025 |
| 3.0.57 | 293 | 6/10/2025 |
| 3.0.56 | 294 | 6/10/2025 |
| 3.0.55 | 292 | 6/10/2025 |
| 3.0.54 | 167 | 6/3/2025 |
| 3.0.53 | 164 | 6/2/2025 |
| 3.0.52 | 187 | 5/28/2025 |
| 3.0.51 | 158 | 5/28/2025 |
| 3.0.50 | 159 | 5/27/2025 |
| 3.0.49 | 156 | 5/27/2025 |
| 3.0.48 | 157 | 5/27/2025 |
| 3.0.47 | 157 | 5/27/2025 |
| 3.0.46 | 161 | 5/27/2025 |
| 3.0.45 | 112 | 5/25/2025 |
| 3.0.44 | 123 | 5/23/2025 |
| 3.0.43 | 128 | 5/23/2025 |
| 3.0.42 | 137 | 5/23/2025 |
| 3.0.41 | 145 | 5/23/2025 |
| 3.0.40 | 140 | 5/23/2025 |
| 3.0.39 | 168 | 5/22/2025 |
| 3.0.38 | 159 | 5/22/2025 |
| 3.0.37 | 187 | 5/19/2025 |
| 3.0.36 | 158 | 5/18/2025 |
| 3.0.35 | 119 | 5/18/2025 |
| 3.0.34 | 247 | 5/14/2025 |
| 3.0.33 | 246 | 5/14/2025 |
| 3.0.32 | 230 | 5/14/2025 |
| 3.0.31 | 233 | 5/13/2025 |
| 3.0.30 | 188 | 5/8/2025 |
| 3.0.29 | 157 | 5/8/2025 |
| 3.0.28 | 159 | 5/8/2025 |
| 3.0.27 | 155 | 5/8/2025 |
| 3.0.26 | 153 | 5/8/2025 |
| 3.0.25 | 167 | 5/8/2025 |
| 3.0.24 | 160 | 5/8/2025 |
| 3.0.23 | 160 | 5/8/2025 |
| 3.0.22 | 152 | 5/8/2025 |
| 3.0.21 | 161 | 5/7/2025 |
| 3.0.20 | 157 | 5/7/2025 |
| 3.0.19 | 154 | 5/6/2025 |
| 3.0.18 | 159 | 5/6/2025 |
| 3.0.17 | 143 | 5/5/2025 |
| 3.0.16 | 163 | 5/5/2025 |
| 3.0.15 | 145 | 5/5/2025 |
| 3.0.14 | 160 | 5/5/2025 |
| 3.0.13 | 154 | 5/5/2025 |
| 3.0.12 | 156 | 5/5/2025 |
| 3.0.11 | 155 | 5/5/2025 |
| 3.0.10 | 155 | 5/5/2025 |
| 3.0.9 | 163 | 5/5/2025 |
| 3.0.8 | 154 | 5/5/2025 |
| 3.0.6 | 159 | 5/5/2025 |
| 3.0.5 | 157 | 5/5/2025 |
| 3.0.4 | 158 | 4/30/2025 |
| 3.0.3 | 158 | 4/30/2025 |
| 3.0.2 | 158 | 4/30/2025 |
| 3.0.1 | 165 | 4/30/2025 |