Siticone Card Number Box

The SiticoneCardNumberBox is a specialized input control designed to streamline credit card data entry. It features automatic card type detection (displaying logos for Visa, Mastercard, etc.), intelligent formatting (grouping digits), and built-in Luhn algorithm validation to ensure data integrity before submission.

Card Type Detection

The control automatically identifies the card issuer based on the initial digits entered. This provides immediate visual feedback to the user.

Property	Type	Description
`DetectedCardType`	CardType	ReadOnly Returns the currently identified card type (e.g., Visa, MasterCard, Amex). Returns `CardType.Unknown` if the number doesn't match any known pattern.
`LimitToKnownCardLength`	bool	cardBox.LimitToKnownCardLength = true; If true, prevents the user from entering more digits than valid for the detected card type (e.g., limits Amex to 15 digits).

Input Modes

A single control can handle multiple aspects of credit card data entry by switching the InputMode. This allows you to create a seamless, multi-step input flow within a compact UI.

InputMode	Description	Validation Logic
`Number`	The primary card number input.	Luhn Algorithm, Length Check, Prefix Check.
`ExpiryDate`	Expiration date (MM/YY).	Checks valid month/year and that the date is in the future.
`CVV`	Security code input.	Limits length to 3 or 4 digits based on card type.
`CardHolderName`	Name on card.	Basic text validation.

Validation & Formatting

Configure how the control validates inputs and displays status colors.

Property	Type	Description
`ValidCardNumberColor`	Color	Text color when the input passes Luhn validation.
`UnknownCardNumberColor`	Color	Text color when the card type cannot be determined.
`ErrorCardNumberColor`	Color	Text color when input is invalid (wrong length or bad format).
`DateFormat`	string	Sets the expected format for expiry dates. Supported values: `"MM/YY"` or `"MM/YYYY"`.
`CVVLength`	int	Manually sets the expected CVV length (3 or 4). Note: This is often auto-set based on DetectedCardType.

Visual Customization

The control supports extensive theming, including built-in presets and fine-grained control over colors and shadows.

Property	Type	Description
`Theme`	CardBoxTheme	Quickly apply a preset style. Options: `Modern`, `Light`, `Dark`, `Colorful`, `Minimal`, `Flat`.
`EnableDropShadow`	bool	Adds a soft shadow behind the control for depth.
`ShadowColor`	Color	Color of the drop shadow.
`ShadowBlur`	int	Radius of the shadow blur effect.
`DesignStyle`	Enum	`Default`: Standard bordered box. `Material`: Underline style with animated focus indicator.

Events

Hook into key moments of the user interaction flow.

CardInputCompleted Event

// Fired when all required fields are valid and complete.
cardBox.CardInputCompleted += (s, e) => 
{
                Console.WriteLine($"Card: {e.CardNumber} ({e.CardType})");
                Console.WriteLine($"Expiry: {e.ExpiryDate}, CVV: {e.CVV}");
    
                // Enable the 'Pay Now' button
    btnPay.Enabled = e.IsValid;
};

CardTypeChanged Event

// Fired when the detected card type changes (e.g., user starts typing "4" -> Visa).
cardBox.CardTypeChanged += (s, e) => 
{
                if (e.NewType == CardType.AmericanExpress)
    {
                // Auto-adjust CVV expectation for Amex
        cardBox.CVVLength = 4;
        lblCvvHint.Text = "4 digits on front";
    }
                else
    {
        cardBox.CVVLength = 3;
        lblCvvHint.Text = "3 digits on back";
    }
};

Designer Support

The SiticoneCardNumberBox includes a comprehensive Smart Tag menu in Visual Studio for rapid configuration.

Category	Features
`Theme Presets`	One-click styling (Modern, Dark, Material, etc.).
`Quick Actions`	Switch Input Modes: Number, Expiry, CVV, Name. Configure Card Settings: Set Amex CVV, Toggle MM/YY formats.
`Appearance`	Toggle Shadow, Rounded Corners, and Border Styles.

Usage Examples

Example 1: Basic Card Number Input

Standard setup for collecting the card number.

C# - Card Number Setup

private void SetupCardInput()
{
    cardBox.InputMode = CreditCardInputMode.Number;
    cardBox.Theme = CardBoxTheme.Modern;
    cardBox.LimitToKnownCardLength = true;
    
                // Provide immediate visual feedback
    cardBox.ValidCardNumberColor = Color.SeaGreen;
    cardBox.ErrorCardNumberColor = Color.Crimson;
}

Example 2: Sequential Input Flow

Using a single control to step through data entry (Number -> Expiry -> CVV).

C# - Sequential Flow

// Handle the Enter key to move to the next field automatically
private void CardBox_KeyDown(object sender, KeyEventArgs e)
{
                if (e.KeyCode == Keys.Enter)
    {
                switch (cardBox.InputMode)
        {
                case CreditCardInputMode.Number:
                if (cardBox.IsValid) cardBox.InputMode = CreditCardInputMode.ExpiryDate;
                break;
                
                case CreditCardInputMode.ExpiryDate:
                cardBox.InputMode = CreditCardInputMode.CVV;
                break;
                
                case CreditCardInputMode.CVV:
                // Done!
                ProcessPayment();
                break;
        }
    }
}

Example 3: Comprehensive Event Handling

Using the CardInputCompleted event to capture all data at once and submit the form.

C# - Complete Submission

private void SetupCardEvents()
{
                // Handle the final completion of all fields
    cardBox.CardInputCompleted += (s, e) =>
    {
                Console.WriteLine($"Full Card Details Captured:");
                Console.WriteLine($"Number: {e.CardNumber} ({e.CardType})");
                Console.WriteLine($"Exp: {e.ExpiryDate}, CVV: {e.CVV}");
                Console.WriteLine($"Holder: {e.CardHolderName}");

                // Ready to submit
        btnSubmit.Enabled = true;
    };

                // React to card type detection instantly
    cardBox.CardTypeChanged += (s, e) =>
    {
        lblCardType.Text = $"Detected: {e.NewType}";
    };
}

Example 4: Visual Customization

Manually configuring shadows, borders, and animations to create a unique Material Design style.

C# - Custom Styling

private void CustomizeAppearance()
{
                // Modern "Material" look
    cardBox.DesignStyle = ControlDesignStyle.Material;
    cardBox.BorderWidth = 0; // Bottom border is handled by material style
    
                // Add depth
    cardBox.EnableDropShadow = true;
    cardBox.ShadowColor = Color.FromArgb(50, 0, 0, 0);
    cardBox.ShadowBlur = 15;
    
                // Custom colors
    cardBox.SolidBorderFocusColor = Color.Magenta;
    cardBox.IndicatorColor = Color.Purple;
}

Example 5: Read-Only Display

Using the control to display saved card information securely. The control handles masking via standard properties.

C# - Read-Only View

private void DisplaySavedCard(string lastFourDigits)
{
    cardBox.IsReadOnly = true;
    cardBox.Text = "**** **** **** " + lastFourDigits;
    
                // Set read-only visual cues
    cardBox.ReadOnlyFillColor1 = Color.WhiteSmoke;
    cardBox.ReadOnlyBorderColor1 = Color.Transparent;
    
                // Disable shadows for flat look
    cardBox.EnableDropShadow = false;
}