Easy to use iOS library with components for input of Credit Card data.

Overview

AnimatedCardInput

GitHub license CocoaPods Swift 5.0

This library allows you to drop into your project two easily customisable, animated components that will make input of Credit Card information for users much better experience.

Example

To run the example project, clone the repo, and run pod install from the Example directory first.

Requirements

AnimatedCardInput is written in Swift 5.0 and supports iOS 11.0+.

Installation

AnimatedCardInput is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'AnimatedCardInput'

Usage

Both components available in this Pod can be used either individually or in pair on one screen.

Card View

cardViewBothsides To use Card View on our screen we simply initialise the view and place it in our hierarchy. This will create default credit card view, with 16-digit card number separated into blocks of 4 and CVV number limited to 3 digits.

/// cardNumberDigitsLimit: Indicates maximum length of card number. Defaults to 16.
/// cardNumberChunkLengths: Indicates format of card number,
///                         e.g. [4, 3] means that number of length 7 will be split
///                         into two parts of length 4 and 3 respectively (XXXX XXX).
/// CVVNumberDigitsLimit: Indicates maximum length of CVV number.
let cardView = CardView(
    cardNumberDigitsLimit: 16,
    cardNumberChunkLengths: [4, 4, 4, 4],
    CVVNumberDigitsLimit: 3
)
view.addSubview(cardView)
NSLayoutConstraint.activate([...])

We can customise our card view in almost every way. Starting with the design, both fonts and color can be adjusted. Here's a list of all available properties that can be changed.

  • isSecureInput - Enables masking of CVV number (defaults to false).
  • validatesDateInput - Enables validation on Validity Date Field (defaults to true).
  • frontSideCardColor - Background color of the card's front side (defaults to #373737).
  • frontSideTextColor - Text color of the card's front side (defaults to #FFFFFF).
  • backSideCardColor - Background color of the card's back side (defaults to #373737).
  • CVVBackgroundColor - Background color of the card's CVV Field (defaults to #FFFFFF).
  • backSideTextColor - Text color of the card's back side (defaults to #000000).
  • selectionIndicatorColor - Border color of a selected field indicator (defaults to #ff8000).
  • numberInputFont - Font of the Card Number Field (defaults to System SemiBold 24).
  • nameLabelFont - Font of the Cardholder Name Label (defaults to System Light 14. Recommended font size is 0.6 of Card Number size).
  • nameInputFont - Font of the Cardholder Name Field (defaults to System Regular 14. Recommended font size is 0.6 of Card Number size).
  • validityLabelFont - Font of the Validity Date Label (defaults to System Light 14. Recommended font size is 0.6 of Card Number size).
  • validityInputFont - Font of the Validity Date Field (defaults to System Regular 14. Recommended font size is 0.6 of Card Number size).
  • CVVInputFont - Font of the CVV Number Field (defaults to System SemiBold 20. Recommended font size is 0.85 of Card Number size).
  • cardNumberSeparator - Character used as the Card Number Separator (defaults to " ").
  • cardNumberEmptyCharacter - Character used as the Card Number Empty Character (defaults to "X").
  • validityDateSeparator - Character used as the Validity Date Separator (defaults to "/").
  • validityDateCustomPlaceHolder - Text used as the Validity Date Placeholder (defaults to "MM/YY").
  • CVVNumberEmptyCharacter - Character used as CVV Number Empty Character (defaults to "X").
  • cardholderNameTitle - Custom string to use for title label of Cardholder Name input.
  • cardholderNamePlaceholder - Custom string to use for placeholder of Cardholder Name input.
  • validityDateTitle - Custom string to use for title label of Validity Date input.

Card Inputs View

CardInputsViewCardholderName To use Card Inputs View on our screen we simply initialise the view and place it in our hierarchy. This will create default default scroll view with four text fields and card number limited to 16 digits.

let cardInputsView = CardInputsView(cardNumberDigitLimit: 16)
view.addSubview(cardInputsView)
NSLayoutConstraint.activate([...])

Input views can be customised all at once with following properties.

  • isSecureInput - Enables masking ov CVV number (defaults to false).
  • validatesDateInput - Enables validation on Validity Date Field (defaults to true).
  • inputTintColor - Color of tint for text fields (defaults to #000000).
  • inputborderColor - Color of border for text fields (defaults to #808080).
  • titleColor - Color of text in title label (defaults to #000000).
  • titleFont - Font of text in title label (defaults to System Light 12).
  • inputColor - Color of text in text field (defaults to #000000).
  • inputFont - Font of text in text field (defaults to System Regular 24).
  • cardNumberTitle - Custom string to use for title label of Card Number input.
  • cardholderNameTitle - Custom string to use for title label of Cardholder Name input.
  • validityDateTitle - Custom string to use for title label of Validity Date input.
  • cvvNumberTitle - Custom string to use for title label of CVV Code input.

Connecting both components

If we want users to input data either directly onto card or by selecting textfields we need to pair both components with creditCardDataDelegate property.

cardView.creditCardDataDelegate = inputsView
cardInputsView.creditCardDataDelegate = cardView

From now on both inputs will update to the same data and step in the filling flow.

Adding new Card Providers

If default card brands provided with this library are not enough for your needs, you can add your own Card Provider with custom name, icon and recognition pattern that will be used in regex ("^\(pattern)\\d*"), eg. a fake _Cardinio_ provider that have card numbers starting with 92or95`:

let newCardProvider = CardProvider(name: "Cardinio", image: #imageLiteral(resourceName: "cardinio_icon"), pattern: "9[2,5]")
CardProvider.addCardProviders(newCardProvider)

Roadmap

  • Labels localisation.
  • Adding new, custom credit card providers with icons.
  • Validation errors displayed on the inputs.
  • Even more...

About

This project is made with ❤️ by Netguru and maintained by Kamil Szczepański.

License

AnimatedCardInput is available under the MIT license. See the LICENSE file for more info.

You might also like...
Accept credit cards and PayPal in your iOS app
Accept credit cards and PayPal in your iOS app

Important: PayPal Mobile SDKs are Deprecated. The APIs powering them will remain operational long enough for merchants to migrate, but the SDKs themse

A Payment Card UI & Validator for iOS
A Payment Card UI & Validator for iOS

Description Caishen provides an easy-to-use text field to ask users for payment card information and to validate the input. It serves a similar purpos

SwiftUI BusinessCard - Created iOS Business card app to practice SwiftUI
SwiftUI BusinessCard - Created iOS Business card app to practice SwiftUI

SwiftUI_BusinessCard Created iOS Business card app to practice SwiftUI

Bank Card Generator with Swift using SnapKit DSL 💳
Bank Card Generator with Swift using SnapKit DSL 💳

iCard BankCard & CreditCard generator with Swift 3 using SnapKit DSL iCard is a simple tool for generate Credit & Bank Card , it represent cards as UI

Welcome Busines Card Built With Swift
Welcome Busines Card Built With Swift

BusinessCard Welcome Busines Card Main screen Contacts screen More info screen

A card viewer demo for Idolmaster Millionlive Theater Days written in Swift UI
A card viewer demo for Idolmaster Millionlive Theater Days written in Swift UI

Misaki Gallery A Millionlive's cards gallery to demostrate Swift UI. All api and

A study card application built with SwiftUI and Combine
A study card application built with SwiftUI and Combine

StudyCards Description A study card application. I built this application to get

Code1System Card Moudle

Code1CardLib Example To run the example project, clone the repo, and run pod install from the Example directory first. Requirements Installation Code1

Wizards-pal - Life counter for card games,built with swift
Wizards-pal - Life counter for card games,built with swift

Life counter for card games Made this app in the weekend to help ma boys with ht

Releases(0.3.0)
  • 0.3.0(Jul 4, 2020)

    This version includes:

    • Ability to change caption on title labels, which allows for localisation of the components.
    • Refactored logic of credit card provider recognition, which now allows adding new credit card providers with their own name, icon and recognition pattern.
    Source code(tar.gz)
    Source code(zip)
Owner
Netguru
Building software for world changers
Netguru
Easily integrate Credit Card payments module in iOS App. Swift 4.0

MFCard Buy me a coffee MFCard is an awesome looking Credit Card input & validation control. Written in Swift 3. YOoo, Now MFCard is on Swift 5. Swift

MobileFirst 359 Jul 6, 2022
A credit card reader and parser for iOS Using Native Vision/VisionKit

card-reader-ios A credit card reader and parser for iOS Using Native Vision/VisionKit May-14-2021.00-43-17.mp4 Instructions Hold camera up to a card a

Khalid Asad 100 Jul 24, 2022
CreditCardForm is iOS framework that allows developers to create the UI which replicates an actual Credit Card.

CreditCardForm CreditCardForm is iOS framework that allows developers to create the UI which replicates an actual Credit Card. Fixed typo use CreditCa

Orazz 1.4k Sep 24, 2022
A credit card scanner for iOS written in Swift

DGCardScanner A credit card scanner Requirements iOS 13.0+ Swift 5.5+ Xcode 10.0+ Installation SPM File > Add Packages > https://github.com/donggyushi

donggyu 9 Jun 24, 2022
Debit/Credit card validation port of the Luhn Algorithm in Swift

SwiftLuhn Warning! This repository is no longer maintained. This is a port of the Luhn Algorithm, generally used for validating debit/credit card deta

Max Kramer 135 Sep 9, 2022
Luhn Credit Card Validation Algorithm

Luhn Algorithm This is a port of the Luhn Algorithm, generally used for validating Credit Card details, to Objective-C (iOS). Swift port can be found

Max Kramer 126 Sep 7, 2022
TextFieldFormatter - Simple Text Formatter (Credit Card Number, Phone Number, Serial Number etc.)

TextFieldFormatter Simple Text Formatter (Credit Card Number, Phone Number, Seri

Anıl ORUÇ 4 Apr 4, 2022
Luhn Credit Card Validation Algorithm

Luhn Algorithm This is a port of the Luhn Algorithm, generally used for validating Credit Card details, to Objective-C (iOS). Swift port can be found

Max Kramer 126 Sep 7, 2022
Ios-card-transition - iOS CocoaPod to create beautiful card transitions

CSCardTransition CSCardTransition is a small library allowing you to create wond

Creastel 11 Sep 28, 2022
Card Decks is a small utility application for your iPhone, iPod touch and iPad which brings you simple, configurable, colored, multi-line text cards that are grouped into card decks

Card Decks is a small utility application for your iPhone, iPod touch and iPad which brings you simple, configurable, colored, multi-line text cards that are grouped into card decks.

Arne Harren 39 Jul 1, 2022