Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs CreditCardUI

Siticone Credit Card UI

The SiticoneCreditCardUI is a visually stunning, high-fidelity control designed to simulate a real physical credit card. It features 3D flip animations (front/back), glassmorphism effects, embedded EMV chips, magnetic stripes, and a comprehensive validation state system (Error, Warning, Danger) to provide immediate visual feedback during data entry.

Core Data & Input

Properties for binding the card's textual data. Updates to these properties are rendered in real-time.

Property Type Description & Usage Example
CardNumber string card.CardNumber = "4532 1234 5678 9010"; The main 16-digit card number displayed prominently on the front.
CardholderName string card.CardholderName = "JANE DOE"; The name of the card owner. Typically displayed in uppercase.
ExpirationDate string card.ExpirationDate = "12/28"; The expiry date (MM/YY) shown on the front.
CVV string card.CVV = "123"; The 3 or 4 digit security code displayed on the back of the card within the signature strip.
Type CreditCardType card.Type = SiticoneCreditCardType.Visa; Determines the logo displayed (Visa, MasterCard, Amex, etc.). Set to Generic if unknown.

Visual Styling

Customize the aesthetic feel of the card, including gradients, glass effects, and logos.

Property Type Description
CardStartColor Color The starting color for the background gradient.
CardEndColor Color The ending color for the background gradient.
GradientMode LinearGradientMode The direction of the background gradient (e.g., ForwardDiagonal).
ShowGlassEffect bool Overlays a semi-transparent glossy highlight to simulate plastic/glass material.
ShowReflection bool Adds a subtle horizon reflection line for added depth.
ShowCardChip bool Toggles the rendering of the gold EMV chip on the front.
CornerRadius int Controls the roundness of the card corners (default: 14).
UltraHighPerformance bool Disables complex effects (gradients, glass, shadows) for maximum rendering speed.

State & Validation

The card includes built-in states for validating user input visually.

State Method Visual Effect
Error TriggerError(msg) Flashes a red overlay and displays the error message. Used for critical validation failures (e.g., invalid checksum).
Warning TriggerWarning(ms, msg) Fades in an orange overlay. Useful for non-critical alerts (e.g., card expiring soon).
Danger TriggerDanger(ms, msg) Fades in a solid red overlay. Useful for serious alerts (e.g., stolen card reported).
Inactive IsActive = false Darkens the entire card and overlays customizable "INACTIVE" text.

Animation & Interaction

Dynamic behaviors that bring the card to life.

Feature Property/Method Description
Flip 3D FlipCard() Triggers a 3D rotation animation to reveal the back (CVV/Signature) or front. Controlled via the View property (Front/Back).
Color Cycle CycleColors Automatically transitions the card background through a list of colors defined in ColorCollection. Adjust speed with ColorCycleSpeed.
Shake CanShake If enabled, the card shakes horizontally when a user attempts to interact with it while IsReadOnly is true.

Layout & Positioning

Granular control over where elements appear on the card face using percentage-based positioning.

Property Description
CardNumberPositionY Vertical position of the card number (0.0 to 1.0). Default ~0.5 (Center).
CardInfoPositionY Vertical position of the Name/Exp/Labels row. Default ~0.72.
NamePositionPercent Horizontal start position of the Name field. Default 0.0 (Left).
ExpDatePositionPercent Horizontal start position of the Expiration Date. Default ~0.6.
CVVPositionPercent Horizontal start position of the CVV label (on front, if applicable). Default ~0.85.

Public Methods

FlipCard(bool animated)
// Flips the card from Front to Back or vice-versa.
// Useful when the user focuses the CVV input field.
creditCard1.FlipCard(true);
TriggerError(string message)
// Triggers a flashing red error state with a message overlay.
// Used when validation fails (e.g., Luhn algorithm check).
creditCard1.TriggerError("Invalid Card Number");
Color Cycling Methods
// Manually add colors to the animation cycle
creditCard1.ClearCycleColors();
creditCard1.AddCycleColor(Color.Blue);
creditCard1.AddCycleColor(Color.Purple);
creditCard1.AddCycleColor(Color.Red);
creditCard1.CycleColors = true;

Events

Comprehensive event system for tracking changes.

  • CardNumberChanged - Fired when the number updates.
  • CardTypeChanged - Fired when the detected card type (Visa/MC) changes.
  • ErrorStateChanged - Fired when the error state begins or ends.
  • CardInfoChanged - Fired when generic info (Name, Date, CVV) changes.

Enumerations

SiticoneCreditCardType
public enum SiticoneCreditCardType
{
    Generic, Visa, VisaElectron, MasterCard, AmericanExpress, Discover, JCB, Maestro,
    DinersClub, UnionPay, BankCard, Dankort, Elo, Mir, RuPay, Verve, Troy,
    InterPayment, InstaPayment, Switch, Solo, Laser, UATP
}

Usage Examples

Example 1: Input Binding & Flipping

Connects text boxes to the card and flips it when the CVV field is focused.

C# - Form Binding
public CheckoutForm()
{
                InitializeComponent();
    
                // Bind TextChanged events
    txtCardNumber.TextChanged += (s, e) => cardUI.CardNumber = txtCardNumber.Text;
    txtName.TextChanged += (s, e) => cardUI.CardholderName = txtName.Text;
    txtExp.TextChanged += (s, e) => cardUI.ExpirationDate = txtExp.Text;
    txtCVV.TextChanged += (s, e) => cardUI.CVV = txtCVV.Text;
    
                // Auto-Flip logic
    txtCVV.GotFocus += (s, e) => 
    {
                if (cardUI.View == CardSide.Front) cardUI.FlipCard();
    };
    
    txtCVV.LostFocus += (s, e) => 
    {
                if (cardUI.View == CardSide.Back) cardUI.FlipCard();
    };
}

Example 2: Validation Feedback

Validates the card number length and triggers visual feedback on the card itself.

C# - Validation
private void BtnPay_Click(object sender, EventArgs e)
{
                string number = cardUI.CardNumber.Replace(" ", "");
    
                // Basic validation check
                if (number.Length < 16)
    {
                // Visually shake the card (if ReadOnly/Blocked logic applies)
                // Or trigger the error state directly
        cardUI.TriggerError("Incomplete Number");
                return;
    }
    
                // Check expiry
                if (IsExpired(cardUI.ExpirationDate))
    {
        cardUI.TriggerWarning(3000, "Card Expired");
                return;
    }
    
                ProcessPayment();
}

Example 3: Customizing Appearance (Gold Card)

Sets up a premium "Gold" theme using custom colors and gradients.

C# - Styling
private void ApplyGoldTheme()
{
    cardUI.CardStartColor = Color.Goldenrod;
    cardUI.CardEndColor = Color.DarkGoldenrod;
    cardUI.TextColor = Color.Black;
    cardUI.LabelColor = Color.FromArgb(60, 60, 60);
    cardUI.ShowGlassEffect = true;
    cardUI.GlassOpacity = 0.4f;
    cardUI.ShowReflection = true;
    cardUI.CornerRadius = 18;
}