iOS UI controls and formatters for entering money, credit card number and expiry date.
iOS UI controls and formatters for entering money, credit card number and expiry date.
Card logo images by http://www.shopify.com/blog/6335014-32-free-credit-card-icons
Class | Description |
---|---|
BKCardNumberField |
Subclass of UITextField that supports formatting card number. You can show card logo image by setting showsCardLogo to YES . |
BKCardNumberLabel |
Subclass of UILabel that displays formatted card number and card brand logo. You can mask card number by configuring cardNumberFormatter . |
BKCardNumberFormatter |
Subclass of NSFormatter. This class has card number pattern information inside and formats according to patterns. You can customize masking behavior, masking character and group separater character. |
BKCardExpiryField |
Subclass of UITextField that supports formatting card number expiry date. |
BKCurrencyTextField |
Subclass of UITextField that supports formatting money amount. You can change currency by changing the currencyCode property of numberFormatter . |
// create (you can also use interface builder)
BKCardNumberField *cardNumberField = [[BKCardNumberField alloc] initWithFrame:CGRectMake(0, 0, 300, 40)];
cardNumberField.showsCardLogo = YES;
[self.view addSubview:cardNumberField];
// get card number
NSString *cardNumber = cardNumberField.cardNumber;
// get card company name
NSString *companyName = cardNumberField.cardCompanyName;
BKCardNumberLabel *cardNumberLabel = [[BKCardNumberLabel alloc] initWithFrame:CGRectMake(0, 0, 300, 40)];
// set masking character. BLACK CIRCLE (0x25CF)
cardNumberLabel.cardNumberFormatter.maskingCharacter = @"●";
// masking second and third group.
cardNumberLabel.cardNumberFormatter.maskingGroupIndexSet = [NSIndexSet indexSetWithIndexesInRange:NSMakeRange(1, 2)];
BKCardExpiryField *field = [[BKCardExpiryField alloc] init];
// get month
NSInteger month = field.dateComponents.month;
// get year
NSInteger year = field.dateComponents.year;
BKCurrencyTextField *field = [[BKCurrencyTextField alloc] init];
// change currency
field.numberFormatter.currencyCode = @"KRW";
// get number value
NSDecimalNumber *number = field.numberValue;
Just add to your image assets the card logo with the shortName eg. "visa", "amex", "mastercard" etc..