CreditCardForm is iOS framework that allows developers to create the UI which replicates an actual Credit Card.
Clone or download
Latest commit e22ed43 Dec 5, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
CreditCardForm.xcodeproj Swift 4.2 Nov 29, 2018
CreditCardForm Swift 4.2 Nov 29, 2018
CreditCardFormTests Release 0.0.8 Dec 23, 2016
Example bug fixes Nov 29, 2018
.gitignore gitignore new file Sep 19, 2017
.swift-version Swift 4.2 Nov 29, 2018
.travis.yml bug fixes Nov 29, 2018
CreditCardForm.h created CreditCardForm framework Nov 30, 2016
CreditCardForm.podspec Swift 4.2 Nov 29, 2018
Info.plist Release 0.0.8 Dec 23, 2016
LICENSE Bug fixed Mar 17, 2017
README.md Update README.md Dec 4, 2018

README.md

CreditCardForm

CI Status CocoaPods compatible Carthage compatible Swift 4.2 compatible Platform iOS License: MIT Donate

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

Fixed typo use CreditCardForm instead CreditCardForum

Screenshots

Example

To run the example project, clone the repo, and run pod install from the Demo-* directory first.

Supported Cards

  • MasterCard
  • Visa
  • JCB
  • Diners
  • Discover
  • Amex
  • UnionPay

Requirements

  • Xcode 8
  • iOS 8.1+

Installation

Using CocoaPods

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

pod "CreditCardForm"

Using Carthage

CreditCardForm is available through Carthage. To install it, simply add the following line to your Cartfile:

github "orazz/CreditCardForm-iOS"

Manually

If you prefer not to use either of the aforementioned dependency managers, you can integrate CreditCardForm into your project manually.

  1. Download and drop CreditCardForm in your project.
  2. Done!

Usage example

First step: this framework integrated with Stripe, you must install Stripe

Storyboard

Create a view set a class CreditCardFormView (preferred frame size: 300x200).
Following this you will have to go through a few simple steps outlined below in order to get everything up and running.

import Stripe
import CreditCardForm

Swift

@IBOutlet weak var creditCardForm: CreditCardFormView!

// Stripe textField
let paymentTextField = STPPaymentCardTextField()

Add the following code in the viewDidLoad function in your view controller

// Set up stripe textfield
paymentTextField.frame = CGRect(x: 15, y: 199, width: self.view.frame.size.width - 30, height: 44)
paymentTextField.translatesAutoresizingMaskIntoConstraints = false
paymentTextField.borderWidth = 0

let border = CALayer()
let width = CGFloat(1.0)
border.borderColor = UIColor.darkGray.cgColor
border.frame = CGRect(x: 0, y: paymentTextField.frame.size.height - width, width:  paymentTextField.frame.size.width, height: paymentTextField.frame.size.height)
border.borderWidth = width
paymentTextField.layer.addSublayer(border)
paymentTextField.layer.masksToBounds = true

view.addSubview(paymentTextField)

NSLayoutConstraint.activate([
paymentTextField.topAnchor.constraint(equalTo: creditCardForm.bottomAnchor, constant: 20),
paymentTextField.centerXAnchor.constraint(equalTo: view.centerXAnchor),
paymentTextField.widthAnchor.constraint(equalToConstant: self.view.frame.size.width-20),
paymentTextField.heightAnchor.constraint(equalToConstant: 44)
])

Delegate Methods

In order to use the delegate methods first set the delegate of Stripe to the parent view controller when setting it up

paymentTextField.delegate = self

After that you will be able to set up the following delegate methods inside of your parent view controller

func paymentCardTextFieldDidChange(_ textField: STPPaymentCardTextField) {
creditCardForm.paymentCardTextFieldDidChange(cardNumber: textField.cardNumber, expirationYear: textField.expirationYear, expirationMonth: textField.expirationMonth, cvc: textField.cvc)
}

func paymentCardTextFieldDidEndEditingExpiration(_ textField: STPPaymentCardTextField) {
creditCardForm.paymentCardTextFieldDidEndEditingExpiration(expirationYear: textField.expirationYear)
}

func paymentCardTextFieldDidBeginEditingCVC(_ textField: STPPaymentCardTextField) {
creditCardForm.paymentCardTextFieldDidBeginEditingCVC()
}

func paymentCardTextFieldDidEndEditingCVC(_ textField: STPPaymentCardTextField) {
creditCardForm.paymentCardTextFieldDidEndEditingCVC()
}

You should now be ready to use CreditCardForm!!

Customization

1) Colors

creditCardForm.backgroundColor (UIColor)
creditCardForm.cardHolderExpireDateColor (UIColor)
creditCardForm.cardHolderExpireDateTextColor (UIColor)
creditCardForm.backLineColor (UIColor)

// Brands Color brand name, front color, back color
[String: [UIColor]]
creditCardForm.colors[Brands.Visa.rawValue] = [UIColor.black, UIColor.black]
...
creditCardForm.colors[Brands.MasterCard.rawValue] = [UIColor.black, UIColor.black]

2) Images

creditCardForm.chipImage (UIImage)

3) Placeholders

creditCardForm.cardHolderString (String)
creditCardForm.expireDatePlaceholderText (String)

Card number: Configuring the Mask Field

creditCardForm.cardNumberMaskExpression (String)
creditCardForm.cardNumberMaskTemplate (String)

creditCardForm.cardNumberFontSize (CGFloat)

Contribute

We would love for you to contribute to CreditCardForm, check the LICENSE file for more info.

Meta

Oraz Atakishiyev, orazz.com

3rd party libraries

CreditCardValidator
AKMaskField

License

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