https://github.com/soenneker/soenneker.blazor.creditcards

A beautiful, animated credit card component with real-time updates and brand detection
https://github.com/soenneker/soenneker.blazor.creditcards

blazor blazorlibrary card cards credit creditcards creditcardsinterop csharp debit dotnet method methods payment processing

Last synced: about 2 months ago
JSON representation

A beautiful, animated credit card component with real-time updates and brand detection

• Host: GitHub
• URL: https://github.com/soenneker/soenneker.blazor.creditcards
• Owner: soenneker
• License: mit
• Created: 2025-04-30T12:56:56.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2026-04-14T03:58:36.000Z (2 months ago)
• Last Synced: 2026-04-14T05:31:01.333Z (2 months ago)
• Topics: blazor, blazorlibrary, card, cards, credit, creditcards, creditcardsinterop, csharp, debit, dotnet, method, methods, payment, processing
• Language: CSS
• Homepage: https://soenneker.com
• Size: 1.3 MB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Contributing: .github/CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: .github/CODE_OF_CONDUCT.md
  • Security: .github/SECURITY.md

Awesome Lists containing this project

README

          
[![](https://img.shields.io/nuget/v/soenneker.blazor.creditcards.svg?style=for-the-badge)](https://www.nuget.org/packages/soenneker.blazor.creditcards/)

[![](https://img.shields.io/github/actions/workflow/status/soenneker/soenneker.blazor.creditcards/publish-package.yml?style=for-the-badge)](https://github.com/soenneker/soenneker.blazor.creditcards/actions/workflows/publish-package.yml)

[![](https://img.shields.io/nuget/dt/soenneker.blazor.creditcards.svg?style=for-the-badge)](https://www.nuget.org/packages/soenneker.blazor.creditcards/)

[![](https://img.shields.io/badge/Demo-Live-blueviolet?style=for-the-badge&logo=github)](https://soenneker.github.io/soenneker.blazor.creditcards/)

[![](https://img.shields.io/github/actions/workflow/status/soenneker/soenneker.blazor.creditcards/codeql.yml?label=CodeQL&style=for-the-badge)](https://github.com/soenneker/soenneker.blazor.creditcards/actions/workflows/codeql.yml)

# ![](https://user-images.githubusercontent.com/4441470/224455560-91ed3ee7-f510-4041-a8d2-3fc093025112.png) Soenneker.Blazor.CreditCards

### A beautiful, animated credit card component with real-time updates and brand detection

![image](https://github.com/user-attachments/assets/b0b21f74-0ef0-4a46-9b87-cf68a5110d32)

## 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

```bash

dotnet add package Soenneker.Blazor.CreditCards

```

---

## ??? Usage

### 1. Register the interop service

```csharp

builder.Services.AddCreditCardsInteropAsScoped();

```

### 2. Add the component

```razor

### 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

```razor

```

**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

```csharp

// 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();

```

```