Designing a credit card view in iOS Swift involves creating a visual representation of a credit card within your app. Users can input their card details, such as card number, expiration date, and CVV, in a user-friendly interface. This feature becomes essential for making transactions smooth and secure. Additionally, it offers users a convenient way to manage their payment information seamlessly within your app.

The “iCard” repository is crafted to generate BankCard and CreditCard information with the Swift 3 programming language. It cleverly employs the SnapKit DSL (Domain Specific Language) for building user interfaces in a concise and expressive manner.

This tool can be handy for developers working with Swift 3 who need a quick and efficient way to generate bank and credit card details within their applications. By incorporating SnapKit DSL, the project aims to offer a codebase that is simple and easy to read, especially when dealing with UI design.

iCard – Credit Card View

Bank Card Generator with Swift using SnapKit DSL 💳

iCard is a straightforward tool that creates Credit and Bank Cards. It represents these cards as UIView, which is a simple way of saying it treats them like visual elements in your app. In essence, iCard functions as a type of UIView, simplifying the process of integrating card generation features into your Swift projects with ease.

Screenshots

.chip1 - .blueway - .withBothBankIcon - .cirrusIcon  &  .chip3 - .blueway - .withBothBankIcon - .masterCardIcon

blueway Credit Card View
Blue Cirrus Card View
Mastercard Credit Card View
Mastercard Credit Card View

.chip2 - .yelloway - .googleWalletIcon - .cirrusIcon  &  .chip2 - .yelloway - .withDefaultTitles

Google wallet Credit Card View
Google wallet Credit Card View
Default Credit Card View
Default Card View

.chip1 - .cirrusIcon - .withBothBankIcon  &  .chip2 - .withBothBankIcon

Cirrus Credit Card View
Cirrus Credit Card View
Visa Credit Card View
Visa Credit Card View

Init

init(cardStyleWithBackgroundColor: cardStyle , withCardColors colors: cardColors , pinIcon: chipIcons , creditIcons: creditIcons)

For creating iCard with single backgroundColor , you should use this initalizer and you must choose cardStylecardColorspinIcons and creditIcons

let simpleCard: iCreditCard = iCreditCard(cardStyleWithBackgroundColor: .withBothBankIcon, withCardColors: .blueway, pinIcon: .chip1, creditIcons: .cirrusIcon)

Moreover, when crafting an iCreditCard with a distinctive background image, you can effortlessly employ this init function. Just remember to provide a UIImage to the init function; otherwise, if withCardImage is nil, it will default to a simple background color.

init(cardStyleWithBackgroundImage: cardStyle , withCardImage: UIImage?, pinIcon: chipIcons , creditIcons: creditIcons)

Here is a simple creation of Credit Card View with backgroundImage

let simpleCard: iCreditCard = iCreditCard(cardStyleWithBackgroundImage: .withBothBankIcon, withCardImage: UIImage(named:"simpleBackgroundImage"), pinIcon: .chip2, creditIcons: .maestroIcon)

Convenience Init

You can also create iCard with no-parameter or single-parameter

convenience init(){
self.init(cardStyleWithBackgroundColor: .withBothBankIcon, withCardColors: .yelloway, pinIcon: .chip1, creditIcons: .cirrusIcon) }

Here is a simple example of it . If you use this initializer you will created a iCard with .withBothBankIcon style , .yelloway color , .chip1 chip and .cirrusIcon icon

Here is a simple usage

let simpleCard: iCreditCard = iCreditCard()

Another convenience init is below.

convenience init(cardColors: cardColors){
self.init(cardStyleWithBackgroundColor: .withBothBankIcon, withCardColors: .yelloway, pinIcon: .chip2, creditIcons: .americanExpressIcon)
}

Here is a simple usage of it

let simpleCard2: iCreditCard = iCreditCard(cardColors: .blueway)

Structs

public enum cardColors{
case blueway
case yelloway
}

cardColors using when choose card backgroundColor , now support only 2 color as blue and yellow

public enum cardVisual{
case withBackgroundColor
case withBackgroundImage
}

cardVisual feature is used to select the type of card.

public enum cardStyle{
case withDefaultTitles
case withTopBankIcon
case withBottomBankIcon
case withBothBankIcon
}

cardStyle is used to set card style to different type.

public enum chipIcons{
case chip1
case chip2
case chip3
}

chipIcons is used to choose card chip icons, there are only 3 different chip icons

public enum creditIcons{
case americanExpressIcon
case bitcoinIcon
case bluePayIcon
case cirrusIcon
case citiIcon
case clickBank
case cvsIcon
case googleWalletIcon
case hsbcIcon
case maestroIcon
case maestroIcon2
case masterCard
case masterCardMini
case masterCardDetail
case moneyGramIcon
case paypalIcon
case paypalIconSimple
case visaIcon
case visaIconBigger
case visaIconText
case wePayIcon
case westernUnionIcon
}
ParameterIcons
.americanExpressIcon
.bitcoinIcon
.bluePayIcon
.cirrusIcon
.citiIcon
.clickBank
.cvsIcon
.googleWalletIcon
.hsbcIcon
.maestroIcon
.maestroIcon2
.masterCard
.masterCardMini
.masterCardDetail
.moneyGramIcon
.paypalIcon
.paypalIconSimple
.visaIcon
.visaIconBigger
.visaIconText
.wePayIcon
.westernUnionIcon
public enum chipIcons{
case chip1
case chip2
case chip3
}
ParameterIcons
.chip1
.chip2
.chip3

Font and Icons

I have used HALTER__.ttf font for cardNumber and also ‘ve used Icon-Icons Website for all icons.

Installation

git clone REPO_URL
cd iCard/
use iCreditCard.swift 

Github – icard Credit Card View

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *