Skip to main content
All docs
V24.1

Payment Card Editor

  • 3 minutes to read

The Payment Card Editor (PaymentCardBox) is a masked field used for credit card/payment information.

Payment Card Editor - WinForms UI Templates | DevExpress

Card Details (Edit Value)

Use the Card property to obtain the card details entered by the user, or specify the details in code.

using DevExpress.UITemplates.Collection.Utilities;

// Gets the card details.
PaymentCard card = paymentCardBox1.Card;

The Card property returns a PaymentCard object. Its settings include:

Property Name Type Description
CardType PaymentCard.Type Gets the card type.
ExpirationDate DateTime Gets the card’s expiry date.
Number string Gets the card number.
CVC string Gets the security code.

Card Type

The editor automatically detects card type from the starting first number during input and displays the corresponding logo. The PaymentCard.Type enumeration contains values that specify type of a payment card (PaymentCard.CardType).

Member Description
Visa VISA
VisaElectron Visa Electron
MasterCard MasterCard
Maestro Maestro
AmericanExpress American Express (AMEX)
DinersClubInternational Diners Club - International
DinersClubCarteBlanche Diners Club - Carte Blanche
DinersClubNorthAmerica Diners Club - North America
JCB JCB
Discover Discover
Invalid The card type validation fails.
Undefined Undefined card type.

Important

This EAP does not support American Express (AMEX) and Diners Club - Carte Blanche card types.

Card Number Validation & Error Indication

The Payment Card Editor uses the Luhn‘s algorithm to validate the card number. This algorithm only ensures that the card number is a valid number. It does not ensure that it exists in any bank database.

Note

YOUR_PROJECT\Utilities\Luhn.css implements the Luhn’s algorithm.

The editor displays a warning hint if the user has entered incorrect card details. If the editor displays the footer label, the label also displays the warning message.

Payment Card Number Validation - WinForms UI Templates | DevExpress

Use the InvalidCardWarningTitle property to specify a custom tooltip title.

Turn off the ShowInvalidCardWarningToolTip option if you do not want to show the warning hint.

Note

YOUR_PROJECT\Utilities\PaymentCardType.css implements the validation of card details. The PaymentCardType.Guess method checks the card number and type. The Validate method validates the card data and warns if the card verification fails.

You can override these methods if the default implementation does not meet your business requirements.

Field Labels

Use the HeaderLabel and FooterLabel properties to specify text labels.

Payment Card Editor Labels - WinForms UI Templates | DevExpress

paymentCardBox1.HeaderLabel = "Payment Details";
paymentCardBox1.FooterLabel = "Card number, expiration date, security code";

HTML & CSS Template Customization

The Payment Card Editor is created with HTML & CSS templates. This allows you to create fully custom text input controls. Template customizations are handled with our HTML Template Editor that is integrated into the Visual Studio IDE. This tool uses an embedded Syntax Editor with autocomplete, tag navigation, and preview.