Payment Card Editor
- 3 minutes to read
The Payment Card Editor (PaymentCardBox) is a masked field used for credit card/payment information.
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.
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.
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.