Home

Awesome

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.

<p align="center"> <img src="https://user-images.githubusercontent.com/6009785/82156049-4ab40d00-9879-11ea-9c1e-ef5ab53f94bd.gif" width="300"> </p>

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.

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.

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

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.