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

Orazz

Last update: Dec 15, 2022

Overview

CreditCardForm

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

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.

Download and drop CreditCardForm in your project.
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.

License

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

Comments

Credit Card Brand Image not showing

@orazz I just implemented this following the demo example.

The brand colors change accordingly however the chip and brand images dont show.

Secondary question: How can I display an existing card with the branded card image and not the default black view?

opened by otymartin 13
Erro on publish app to AppStore

When i try upload app to AppStore display this error. Refer to module CreditCardForm.

ERROR ITMS-90035: "Invalid Signature. Code object is not signed at all. Make sure you have signed your application with a distribution certificate, not an ad hoc certificate or a development certificate. Verify that the code signing settings in Xcode are correct at the target level (which override any values at the project level). Additionally, make sure the bundle you are uploading was built using a Release target in Xcode, not a Simulator target. If you are certain your code signing settings are correct, choose "Clean All" in Xcode, delete the "build" directory in the Finder, and rebuild your release target. For more information, please consult https://developer.apple.com/library/ios/documentation/Security/Conceptual/CodeSigningGuide/Introduction/Introduction.html"

ERROR ITMS-90035: "Invalid Signature. Code object is not signed at all. Make sure you have signed your application with a distribution certificate, not an ad hoc certificate or a development certificate. Verify that the code signing settings in Xcode are correct at the target level (which override any values at the project level). Additionally, make sure the bundle you are uploading was built using a Release target in Xcode, not a Simulator target. If you are certain your code signing settings are correct, choose "Clean All" in Xcode, delete the "build" directory in the Finder, and rebuild your release target. For more information, please consult https://developer.apple.com/library/ios/documentation/Security/Conceptual/CodeSigningGuide/Introduction/Introduction.html"

ERROR ITMS-90171: "Invalid Bundle Structure - The binary file '[my-app].app/Frameworks/CreditCardForm.framework/AKMaskFieldEvent.o' is not permitted. Your app can’t contain standalone executables or libraries, other than the CFBundleExecutable of supported bundles. Refer to the Bundle Programming Guide at https://developer.apple.com/go/?id=bundle-structure for information on the iOS app bundle structure." ERROR ITMS-90171: "Invalid Bundle Structure - The binary file '[my-app].app/Frameworks/CreditCardForm.framework/AKMaskFieldEvent.o' is not permitted. Your app can’t contain standalone executables or libraries, other than the CFBundleExecutable of supported bundles. Refer to the Bundle Programming Guide at https://developer.apple.com/go/?id=bundle-structure for information on the iOS app bundle structure."

ERROR ITMS-90171: "Invalid Bundle Structure - The binary file '[my-app].app/Frameworks/CreditCardForm.framework/AKMaskFieldBlock.o' is not permitted. Your app can’t contain standalone executables or libraries, other than the CFBundleExecutable of supported bundles. Refer to the Bundle Programming Guide at https://developer.apple.com/go/?id=bundle-structure for information on the iOS app bundle structure." ERROR ITMS-90171: "Invalid Bundle Structure - The binary file '[my-app].app/Frameworks/CreditCardForm.framework/AKMaskFieldBlock.o' is not permitted. Your app can’t contain standalone executables or libraries, other than the CFBundleExecutable of supported bundles. Refer to the Bundle Programming Guide at https://developer.apple.com/go/?id=bundle-structure for information on the iOS app bundle structure." ERROR ITMS-90171: "Invalid Bundle Structure - The binary file '[my-app].app/Frameworks/CreditCardForm.framework/AKMaskFieldStatus.o' is not permitted. Your app can’t contain standalone executables or libraries, other than the CFBundleExecutable of supported bundles. Refer to the Bundle Programming Guide at https://developer.apple.com/go/?id=bundle-structure for information on the iOS app bundle structure." ERROR ITMS-90171: "Invalid Bundle Structure - The binary file '[my-app].app/Frameworks/CreditCardForm.framework/AKMaskFieldStatus.o' is not permitted. Your app can’t contain standalone executables or libraries, other than the CFBundleExecutable of supported bundles. Refer to the Bundle Programming Guide at https://developer.apple.com/go/?id=bundle-structure for information on the iOS app bundle structure."

ERROR ITMS-90171: "Invalid Bundle Structure - The binary file '[my-app].app/Frameworks/CreditCardForm.framework/AKMaskFieldBlockCharacter.o' is not permitted. Your app can’t contain standalone executables or libraries, other than the CFBundleExecutable of supported bundles. Refer to the Bundle Programming Guide at https://developer.apple.com/go/?id=bundle-structure for information on the iOS app bundle structure." ERROR ITMS-90171: "Invalid Bundle Structure - The binary file '[my-app].app/Frameworks/CreditCardForm.framework/AKMaskFieldBlockCharacter.o' is not permitted. Your app can’t contain standalone executables or libraries, other than the CFBundleExecutable of supported bundles. Refer to the Bundle Programming Guide at https://developer.apple.com/go/?id=bundle-structure for information on the iOS app bundle structure."

ERROR ITMS-90171: "Invalid Bundle Structure - The binary file '[my-app].app/Frameworks/CreditCardForm.framework/AKMaskField.o' is not permitted. Your app can’t contain standalone executables or libraries, other than the CFBundleExecutable of supported bundles. Refer to the Bundle Programming Guide at https://developer.apple.com/go/?id=bundle-structure for information on the iOS app bundle structure." ERROR ITMS-90171: "Invalid Bundle Structure - The binary file '[my-app].app/Frameworks/CreditCardForm.framework/AKMaskField.o' is not permitted. Your app can’t contain standalone executables or libraries, other than the CFBundleExecutable of supported bundles. Refer to the Bundle Programming Guide at https://developer.apple.com/go/?id=bundle-structure for information on the iOS app bundle structure."

ERROR ITMS-90171: "Invalid Bundle Structure - The binary file '[my-app].app/Frameworks/CreditCardForm.framework/Utilities.o' is not permitted. Your app can’t contain standalone executables or libraries, other than the CFBundleExecutable of supported bundles. Refer to the Bundle Programming Guide at https://developer.apple.com/go/?id=bundle-structure for information on the iOS app bundle structure." ERROR ITMS-90171: "Invalid Bundle Structure - The binary file '[my-app].app/Frameworks/CreditCardForm.framework/Utilities.o' is not permitted. Your app can’t contain standalone executables or libraries, other than the CFBundleExecutable of supported bundles. Refer to the Bundle Programming Guide at https://developer.apple.com/go/?id=bundle-structure for information on the iOS app bundle structure."

ERROR ITMS-90171: "Invalid Bundle Structure - The binary file '[my-app].app/Frameworks/CreditCardForm.framework/CreditCardFormView.o' is not permitted. Your app can’t contain standalone executables or libraries, other than the CFBundleExecutable of supported bundles. Refer to the Bundle Programming Guide at https://developer.apple.com/go/?id=bundle-structure for information on the iOS app bundle structure." ERROR ITMS-90171: "Invalid Bundle Structure - The binary file '[my-app].app/Frameworks/CreditCardForm.framework/CreditCardFormView.o' is not permitted. Your app can’t contain standalone executables or libraries, other than the CFBundleExecutable of supported bundles. Refer to the Bundle Programming Guide at https://developer.apple.com/go/?id=bundle-structure for information on the iOS app bundle structure."

ERROR ITMS-90171: "Invalid Bundle Structure - The binary file '[my-app].app/Frameworks/CreditCardForm.framework/CreditCardValidationType.o' is not permitted. Your app can’t contain standalone executables or libraries, other than the CFBundleExecutable of supported bundles. Refer to the Bundle Programming Guide at https://developer.apple.com/go/?id=bundle-structure for information on the iOS app bundle structure." ERROR ITMS-90171: "Invalid Bundle Structure - The binary file '[my-app].app/Frameworks/CreditCardForm.framework/CreditCardValidationType.o' is not permitted. Your app can’t contain standalone executables or libraries, other than the CFBundleExecutable of supported bundles. Refer to the Bundle Programming Guide at https://developer.apple.com/go/?id=bundle-structure for information on the iOS app bundle structure."

ERROR ITMS-90171: "Invalid Bundle Structure - The binary file '[my-app].app/Frameworks/CreditCardForm.framework/AKMaskFieldPatternCharacter.o' is not permitted. Your app can’t contain standalone executables or libraries, other than the CFBundleExecutable of supported bundles. Refer to the Bundle Programming Guide at https://developer.apple.com/go/?id=bundle-structure for information on the iOS app bundle structure." ERROR ITMS-90171: "Invalid Bundle Structure - The binary file '[my-app].app/Frameworks/CreditCardForm.framework/AKMaskFieldPatternCharacter.o' is not permitted. Your app can’t contain standalone executables or libraries, other than the CFBundleExecutable of supported bundles. Refer to the Bundle Programming Guide at https://developer.apple.com/go/?id=bundle-structure for information on the iOS app bundle structure."

ERROR ITMS-90171: "Invalid Bundle Structure - The binary file '[my-app].app/Frameworks/CreditCardForm.framework/CreditCardValidator.o' is not permitted. Your app can’t contain standalone executables or libraries, other than the CFBundleExecutable of supported bundles. Refer to the Bundle Programming Guide at https://developer.apple.com/go/?id=bundle-structure for information on the iOS app bundle structure." ERROR ITMS-90171: "Invalid Bundle Structure - The binary file '[my-app].app/Frameworks/CreditCardForm.framework/CreditCardValidator.o' is not permitted. Your app can’t contain standalone executables or libraries, other than the CFBundleExecutable of supported bundles. Refer to the Bundle Programming Guide at https://developer.apple.com/go/?id=bundle-structure for information on the iOS app bundle structure."

ERROR ITMS-90171: "Invalid Bundle Structure - The binary file '[my-app].app/Frameworks/CreditCardForm.framework/AKMaskFieldUtility.o' is not permitted. Your app can’t contain standalone executables or libraries, other than the CFBundleExecutable of supported bundles. Refer to the Bundle Programming Guide at https://developer.apple.com/go/?id=bundle-structure for information on the iOS app bundle structure." ERROR ITMS-90171: "Invalid Bundle Structure - The binary file '[my-app].app/Frameworks/CreditCardForm.framework/AKMaskFieldUtility.o' is not permitted. Your app can’t contain standalone executables or libraries, other than the CFBundleExecutable of supported bundles. Refer to the Bundle Programming Guide at https://developer.apple.com/go/?id=bundle-structure for information on the iOS app bundle structure."

opened by weibsons 5
[Crash][0.1.5] Inserting cvc only crashes the form
Steps to reproduce:

Start CreditCardForm UI

Skip card number and expiration date

Edit cvc

Expected: The text in the cvc text field reflects the insertion

Got: Apps crashes because of nil optional force unwrapping: if (cardNumber?.count)! >= 7 || (cardNumber?.count)! < 4 {
opened by airspeed 4
How to write card name using payment textfield?

The payment textfield only lets you write in the card number, expiration and cvc number. Is there a way to let the user write the card owner name as well?

@damarte @ima-tech @orazz @itaispector

opened by hamzabinamin 2
Amex CVC should be on the front

First of all, thank you so much for this library. It is awesome.

The issue I have seen is that when entering Amex card, the card image flips to simulate entering CVC number from the back. However, AMEX cards have their CVC numbers on the front. See the example from Stripe's own demo:

So the question is since you went through the trouble to make Stripe's lousy UI actually worth something, do you mind taking a look at this enhancement so that when a user enters an AMEX card, we don't actually flip but rather show the entering of CVC on the front of the card instead? Let me know what you think. Thanks.

opened by BenderNK 2
Card Brand Image not appearing

Hey I love this credit card form library for swift and I am trying to implement this into my app. Everything works perfectly except the branding image on the card. I followed the instructions on how to install and add the form, but I can not get the brand icons to appear. The icon appears in the text field but not on the card itself. Any suggestions or help?

opened by joshualeon14 2
This project doesn't compile under XCode 10

This project doesn't seem to be compiling under the new XCode 10. I get the following error:

The file “Pods-CreditCardFormTests.debug.xcconfig” couldn’t be opened because there is no such file.

(CreditCardForm-iOS-master/CreditCardForm.xcodeproj The file “Pods-CreditCardForm.debug.xcconfig” couldn’t be opened because there is no such file. (/CreditCardForm-iOS-master/Pods/Target Support Files/Pods-CreditCardForm/Pods-CreditCardForm.debug.xcconfig)

opened by ima-tech 2
Got error when implementing UITableVIewController. Using static table

Terminating app due to uncaught exception 'NSGenericException', reason: 'Unable to activate constraint with anchors <NSLayoutXAxisAnchor:0x60400067aa40 "STPPaymentCardTextField:0x7fcf9b413d00.centerX"> and <NSLayoutXAxisAnchor:0x60400067a9c0 "UITableView:0x7fcf9b824000.centerX"> because they have no common ancestor. Does the constraint or its anchors reference items in different view hierarchies? That's illegal.'
bug help wanted

opened by zahedul 2
Changing card colors manually

Let's say I save a saved card that I know is of Visa or Mastercard brand. I can fetch the numeral data and show it in the card form but the card color doesn't change at all. It remains black.

I have tried the following:

creditCardForm.colors[Brands.MasterCard.rawValue] = [hexStr(hexStr: "#ED495A", alpha: 1), hexStr(hexStr: "#8B1A2B", alpha: 1)]

Is there a way to set the brand color and show the brand image (visa, mastercard etc) manually?

opened by hamzabinamin 1
Error sending STPCardParams to the STP Payment Card TextField
I am trying to send values from the cards.pay library when scanning the credit cards but when using the

` let params = STPCardParams() params.number = "4242424242424242" params.cvc = "123" params.expYear = 22 params.expMonth = 06 self.paymentTextField.cardParams = params`

This error marks me Thread 1: Fatal error: Unexpectedly found nil while unwrapping an Optional, on line 432 of the CreditCardFormView file.

I am new to swift and I would appreciate it if you can help me
opened by blinkuz 1
Crash when using build from TestFlight
Hi Team,

I am archiving and uploading the build on TestFlight. Whenever, I use the uploaded build from TestFlight, I am getting a crash in STPPaymentTextField class. However, I am not getting a crash when I use a build installed from the diawi link.

I used Crashlytics for recording the crashes on my production build. The following is the response I received from Crashlytics

Crashed: com.apple.main-thread 0 Stripe 0xab25c STPPaymentCardTextField.brandImageView.getter + 4356682332 (<compiler-generated>:4356682332) 1 Stripe 0xac09c STPPaymentCardTextField.commonInit() + 635 (STPPaymentCardTextField.swift:635) 2 Stripe 0xabdc0 STPPaymentCardTextField.init(frame:) + 616 (STPPaymentCardTextField.swift:616)

Please guide me on this.

Thanks!
opened by namansl 0
Could not access to paymentCardTextFieldDidChangeWithCardNumber in obj-c project
Hello,

I don't know why but your project dinde work properly in obj-c. Was working in 0.1.3 but since i update to 0.2.0 (mandatory by Xcode) the lib stop working

error:

No visible @interface for 'CreditCardFormView' declares the selector 'paymentCardTextFieldDidChangeWithCardNumber:expirationYear:expirationMonth:cvc:'

No visible @interface for 'CreditCardFormView' declares the selector 'paymentCardTextFieldDidEndEditingExpirationWithExpirationYear:'

No visible @interface for 'CreditCardFormView' declares the selector 'paymentCardTextFieldDidBeginEditingCVC'

@property (weak, nonatomic) IBOutlet CreditCardFormView *creditCardForm;
opened by KevinJue 2
Integrate with Xamarin.ios

This isn't an error or issue.

If anybody wish to integrate this code in your Xamarin.ios project contact to me and I will be happy to assist you.

Thanks!!!! very much @orazz 👍 🥇

opened by zalza13 0

Owner

Orazz

Software Developer

GitHub

Ios-card-transition - iOS CocoaPod to create beautiful card transitions

CSCardTransition CSCardTransition is a small library allowing you to create wond

12 Oct 31, 2022

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

AnimatedCardInput This library allows you to drop into your project two easily customisable, animated components that will make input of Credit Card i

39 Oct 16, 2022

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

362 Nov 29, 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

104 Dec 15, 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

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

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

127 Nov 27, 2022

TextFieldFormatter - Simple Text Formatter (Credit Card Number, Phone Number, Serial Number etc.)

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

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

127 Nov 27, 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.