Soenneker.Blazor.CreditCards
3.0.148
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.148
NuGet\Install-Package Soenneker.Blazor.CreditCards -Version 3.0.148
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.148" />
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.148" />
<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.148
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#r "nuget: Soenneker.Blazor.CreditCards, 3.0.148"
#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.148
#: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.148
#tool nuget:?package=Soenneker.Blazor.CreditCards&version=3.0.148
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.1506)
- Soenneker.Extensions.CancellationTokens (>= 3.0.3)
- Soenneker.Extensions.String (>= 3.0.557)
- Soenneker.Quark.Components.Core.Cancellable (>= 3.0.8)
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 |
|---|---|---|
| 4.0.191 | 303 | 11/21/2025 |
| 4.0.190 | 321 | 11/21/2025 |
| 4.0.189 | 347 | 11/21/2025 |
| 4.0.188 | 353 | 11/21/2025 |
| 4.0.187 | 353 | 11/21/2025 |
| 4.0.186 | 368 | 11/21/2025 |
| 4.0.185 | 366 | 11/21/2025 |
| 4.0.184 | 385 | 11/21/2025 |
| 4.0.183 | 379 | 11/20/2025 |
| 4.0.181 | 382 | 11/20/2025 |
| 4.0.180 | 377 | 11/20/2025 |
| 4.0.179 | 266 | 11/11/2025 |
| 4.0.178 | 262 | 11/11/2025 |
| 4.0.177 | 264 | 11/11/2025 |
| 4.0.176 | 263 | 11/11/2025 |
| 4.0.175 | 218 | 11/10/2025 |
| 4.0.174 | 167 | 11/7/2025 |
| 4.0.173 | 175 | 11/6/2025 |
| 4.0.172 | 176 | 11/6/2025 |
| 4.0.171 | 183 | 11/6/2025 |
| 4.0.170 | 172 | 11/6/2025 |
| 4.0.169 | 175 | 11/6/2025 |
| 4.0.168 | 188 | 11/4/2025 |
| 4.0.167 | 183 | 11/4/2025 |
| 4.0.166 | 180 | 11/4/2025 |
| 4.0.165 | 180 | 10/31/2025 |
| 4.0.164 | 183 | 10/30/2025 |
| 4.0.163 | 179 | 10/30/2025 |
| 4.0.162 | 170 | 10/30/2025 |
| 4.0.161 | 176 | 10/30/2025 |
| 4.0.160 | 178 | 10/30/2025 |
| 4.0.159 | 170 | 10/30/2025 |
| 4.0.158 | 175 | 10/30/2025 |
| 4.0.157 | 175 | 10/30/2025 |
| 4.0.156 | 183 | 10/30/2025 |
| 4.0.155 | 177 | 10/30/2025 |
| 4.0.154 | 174 | 10/29/2025 |
| 4.0.153 | 182 | 10/29/2025 |
| 3.0.152 | 176 | 10/21/2025 |
| 3.0.151 | 169 | 10/16/2025 |
| 3.0.150 | 162 | 10/16/2025 |
| 3.0.149 | 163 | 10/16/2025 |
| 3.0.148 | 162 | 10/15/2025 |
| 3.0.147 | 168 | 10/15/2025 |
| 3.0.146 | 182 | 9/30/2025 |
| 3.0.145 | 116 | 9/26/2025 |
| 3.0.144 | 172 | 9/24/2025 |
| 3.0.143 | 200 | 9/22/2025 |
| 3.0.142 | 163 | 9/21/2025 |
| 3.0.141 | 182 | 9/21/2025 |
| 3.0.140 | 177 | 9/20/2025 |
| 3.0.139 | 191 | 9/20/2025 |
| 3.0.138 | 194 | 9/20/2025 |
| 3.0.137 | 246 | 9/19/2025 |
| 3.0.136 | 297 | 9/18/2025 |
| 3.0.135 | 297 | 9/18/2025 |
| 3.0.134 | 302 | 9/18/2025 |
| 3.0.133 | 299 | 9/17/2025 |
| 3.0.132 | 296 | 9/17/2025 |
| 3.0.131 | 310 | 9/17/2025 |
| 3.0.130 | 299 | 9/17/2025 |
| 3.0.129 | 304 | 9/17/2025 |
| 3.0.128 | 307 | 9/17/2025 |
| 3.0.127 | 308 | 9/16/2025 |
| 3.0.126 | 312 | 9/16/2025 |
| 3.0.125 | 304 | 9/16/2025 |
| 3.0.124 | 255 | 9/15/2025 |
| 3.0.123 | 173 | 9/9/2025 |
| 3.0.122 | 169 | 9/9/2025 |
| 3.0.121 | 158 | 9/9/2025 |
| 3.0.120 | 170 | 9/9/2025 |
| 3.0.119 | 166 | 9/9/2025 |
| 3.0.118 | 161 | 9/9/2025 |
| 3.0.117 | 147 | 9/6/2025 |
| 3.0.116 | 144 | 9/6/2025 |
| 3.0.115 | 142 | 9/6/2025 |
| 3.0.114 | 141 | 9/6/2025 |
| 3.0.113 | 188 | 9/4/2025 |
| 3.0.112 | 181 | 9/3/2025 |
| 3.0.111 | 181 | 9/3/2025 |
| 3.0.110 | 180 | 9/3/2025 |
| 3.0.109 | 182 | 9/3/2025 |
| 3.0.108 | 167 | 9/3/2025 |
| 3.0.107 | 178 | 9/3/2025 |
| 3.0.106 | 195 | 9/3/2025 |
| 3.0.105 | 185 | 9/3/2025 |
| 3.0.104 | 169 | 9/3/2025 |
| 3.0.103 | 121 | 8/22/2025 |
| 3.0.102 | 169 | 8/21/2025 |
| 3.0.101 | 149 | 8/16/2025 |
| 3.0.100 | 171 | 8/15/2025 |
| 3.0.99 | 175 | 8/12/2025 |
| 3.0.98 | 179 | 8/12/2025 |
| 3.0.97 | 167 | 8/12/2025 |
| 3.0.96 | 171 | 8/12/2025 |
| 3.0.95 | 156 | 8/11/2025 |
| 3.0.94 | 158 | 8/11/2025 |
| 3.0.93 | 160 | 8/11/2025 |
| 3.0.92 | 167 | 8/11/2025 |
| 3.0.91 | 170 | 8/11/2025 |
| 3.0.90 | 162 | 8/11/2025 |
| 3.0.89 | 173 | 8/11/2025 |
| 3.0.88 | 165 | 8/11/2025 |
| 3.0.87 | 161 | 8/11/2025 |
| 3.0.86 | 157 | 8/11/2025 |
| 3.0.85 | 164 | 8/11/2025 |
| 3.0.84 | 156 | 8/11/2025 |
| 3.0.83 | 251 | 8/6/2025 |
| 3.0.82 | 242 | 8/5/2025 |
| 3.0.81 | 241 | 8/5/2025 |
| 3.0.80 | 236 | 8/5/2025 |
| 3.0.79 | 219 | 8/5/2025 |
| 3.0.78 | 124 | 7/29/2025 |
| 3.0.77 | 496 | 7/24/2025 |
| 3.0.76 | 187 | 7/18/2025 |
| 3.0.75 | 196 | 7/9/2025 |
| 3.0.74 | 159 | 7/9/2025 |
| 3.0.73 | 178 | 7/8/2025 |
| 3.0.72 | 157 | 7/8/2025 |
| 3.0.71 | 227 | 7/3/2025 |
| 3.0.70 | 170 | 7/3/2025 |
| 3.0.69 | 178 | 7/2/2025 |
| 3.0.68 | 185 | 6/28/2025 |
| 3.0.67 | 125 | 6/28/2025 |
| 3.0.66 | 106 | 6/28/2025 |
| 3.0.65 | 98 | 6/28/2025 |
| 3.0.64 | 99 | 6/28/2025 |
| 3.0.63 | 88 | 6/27/2025 |
| 3.0.62 | 111 | 6/27/2025 |
| 3.0.61 | 114 | 6/27/2025 |
| 3.0.60 | 193 | 6/24/2025 |
| 3.0.59 | 444 | 6/11/2025 |
| 3.0.58 | 314 | 6/11/2025 |
| 3.0.57 | 313 | 6/10/2025 |
| 3.0.56 | 318 | 6/10/2025 |
| 3.0.55 | 302 | 6/10/2025 |
| 3.0.54 | 173 | 6/3/2025 |
| 3.0.53 | 170 | 6/2/2025 |
| 3.0.52 | 212 | 5/28/2025 |
| 3.0.51 | 178 | 5/28/2025 |
| 3.0.50 | 179 | 5/27/2025 |
| 3.0.49 | 177 | 5/27/2025 |
| 3.0.48 | 178 | 5/27/2025 |
| 3.0.47 | 174 | 5/27/2025 |
| 3.0.46 | 181 | 5/27/2025 |
| 3.0.45 | 134 | 5/25/2025 |
| 3.0.44 | 144 | 5/23/2025 |
| 3.0.43 | 150 | 5/23/2025 |
| 3.0.42 | 156 | 5/23/2025 |
| 3.0.41 | 163 | 5/23/2025 |
| 3.0.40 | 160 | 5/23/2025 |
| 3.0.39 | 197 | 5/22/2025 |
| 3.0.38 | 176 | 5/22/2025 |
| 3.0.37 | 206 | 5/19/2025 |
| 3.0.36 | 176 | 5/18/2025 |
| 3.0.35 | 126 | 5/18/2025 |
| 3.0.34 | 268 | 5/14/2025 |
| 3.0.33 | 270 | 5/14/2025 |
| 3.0.32 | 246 | 5/14/2025 |
| 3.0.31 | 254 | 5/13/2025 |
| 3.0.30 | 206 | 5/8/2025 |
| 3.0.29 | 176 | 5/8/2025 |
| 3.0.28 | 177 | 5/8/2025 |
| 3.0.27 | 172 | 5/8/2025 |
| 3.0.26 | 170 | 5/8/2025 |
| 3.0.25 | 201 | 5/8/2025 |
| 3.0.24 | 181 | 5/8/2025 |
| 3.0.23 | 176 | 5/8/2025 |
| 3.0.22 | 170 | 5/8/2025 |
| 3.0.21 | 183 | 5/7/2025 |
| 3.0.20 | 174 | 5/7/2025 |
| 3.0.19 | 171 | 5/6/2025 |
| 3.0.18 | 178 | 5/6/2025 |
| 3.0.17 | 161 | 5/5/2025 |
| 3.0.16 | 193 | 5/5/2025 |
| 3.0.15 | 162 | 5/5/2025 |
| 3.0.14 | 182 | 5/5/2025 |
| 3.0.13 | 176 | 5/5/2025 |
| 3.0.12 | 175 | 5/5/2025 |
| 3.0.11 | 171 | 5/5/2025 |
| 3.0.10 | 178 | 5/5/2025 |
| 3.0.9 | 179 | 5/5/2025 |
| 3.0.8 | 172 | 5/5/2025 |
| 3.0.6 | 179 | 5/5/2025 |
| 3.0.5 | 179 | 5/5/2025 |
| 3.0.4 | 174 | 4/30/2025 |
| 3.0.3 | 177 | 4/30/2025 |
| 3.0.2 | 181 | 4/30/2025 |
| 3.0.1 | 191 | 4/30/2025 |