8000 GitHub - orazz/CreditCardForm-iOS: CreditCardForm is iOS framework that allows developers to create the UI which replicates an actual Credit Card.
[go: up one dir, main page]
Skip to content
/ CreditCardForm-iOS Public

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

License

MIT license
1.5k stars 166 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

orazz/CreditCardForm-iOS

BranchesTags

Repository files navigation

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.cardGradientColors[Brands.Visa.rawValue] = [UIColor.blue, UIColor.red]

// Set font
creditCardForm.cardNumberFont = UIFont(name: "FontName", size: 20)!
creditCardForm.cardPlaceholdersFont = UIFont(name: "FontName", size: 10)!
creditCardForm.cardTextFont = UIFont(name: "FontName", size: 12)!

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.

About

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

Topics

stripe credit-card ios-swift creditcardform

Resources

Readme

License

MIT license
Activity

Stars

1.5k stars

Watchers

39 watching

Forks

166 forks
Report repository

Releases

20 tags

Packages

No packages published

Contributors 5

Languages

0