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}");
}