👁 Image
Soenneker.Blazor.CreditCards 4.0.474

👁 alternate text is missing from this package README image
👁 alternate text is missing from this package README image
👁 alternate text is missing from this package README image
👁 alternate text is missing from this package README image
👁 alternate text is missing from this package README image

👁 alternate text is missing from this package README image
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)

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 programmatically
• false: 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();