TapCardInputKit-iOS
这是一个 SDK,提供高度可定制的现成视图,用于在不同模式下收集您应用中的支付卡数据。
要求
为了使用此 SDK,以下要求必须满足
- Xcode 11.0 或更高版本
- Swift 4.2 或更高版本(与 Xcode 预装)
- 应用的部署目标 SDK:iOS 12.0 或更高版本
安装
CocoaPods方式安装
CocoaPods 是一个依赖项管理器,它可以自动化并简化在项目中使用第三方库的过程。您可以使用以下命令安装它
$ gem install cocoapods
Podfile
要使用 CocoaPods 将 goSellSDK 集成到您的 Xcode 项目中,请在您的 Podfile
中指定它
platform :ios, '12.0'
use_frameworks!
source 'https://github.com/CocoaPods/Specs.git'
target 'MyApp' do
pod 'TapCardInputKit-iOS'
end
然后,运行以下命令
$ pod update
功能
TapCardInputKit
提供了一个易用的 UI 组件,可以在您的应用程序内部收集支付卡数据。它还附带许多额外的功能,例如
模型
本节将描述在 kit 中使用的模型。这是了解如何使用和利用套件的重要介绍。
CardInputMode
这是一个表示枚举的类,用于决定你希望在应用程序中向卡收集者展示的UI模式。
Swift:
/// This when you want show one line card input
case InlineCardInput = 0
/// This when you want show full multline card input
case FullCardInput = 1
TapCard
此模型代表了KIT在用户在UIView中输入任何数据时返回的Card对象,当你的应用程序需要填充某些数据时使用。
Swift:
/**
This is the default constructor for creating the TapCard model
- Parameter tapCardNumber: Represents the card number if any. Otherwise, it will be nil
- Parameter tapCardName: Represents the card name if any. Otherwise, it will be nil
- Parameter tapCardExpiryMonth: Represents the card expiration month MM if any. Otherwise, it will be nil
- Parameter tapCardExpiryYear: Represents the card exxpiration year YYYY or YY if any. Otherwise, it will be nil
*/
@objc public init(tapCardNumber:String? = nil,tapCardName:String? = nil,tapCardExpiryMonth:String? = nil, tapCardExpiryYear:String? = nil, tapCardCVV:String? = nil)
Controllers
本节描述了你应用程序将要处理的实际控制器。控制器会根据应用程序使用的集成模式而有所不同。
TapCardInput
这是显示在布局内卡收集器的UIView。您可以通过调用其setup方法来开始/配置收集器,如下所示
Swift:
/**
Call this method when you need to setup the view with a custom theme json file. Setup method is reponsible for laying out the view, adding subviews and applying the default theme
- Parameter cardInputMode: Defines the card input mode required whether Inline or Full mode
*/
@objc public func setup(for cardInputMode:CardInputMode)
主题定制
TapCardInput-Kit
在用户界面方面高度可自定义。
该套件已为浅色和深色模式提供默认设计。如果使用套件默认主题,则套件负责监听光/暗模式更改,但如果从您自己的主题开始使用套件,则您必须指导套件在需要时更改主题。
此外,KIT 允许您以字典或 JSON 文件的形式传递主题。
主题映射
主题 JSON 结构
JSON
{
"inlineCard": {
"commonAttributes": {
"backgroundColor": "#FFFFFF",
"borderColor": "#0066FF",
"cornerRadius": 10,
"borderWidth": 1,
"itemSpacing": 5,
"shadow": {
"color": "#2ACE00",
"radius": 3,
"offsetWidth": 0,
"offsetHeight": 0,
"opacity": 1
}
},
"iconImage": {
"image": "bank",
"width": 32
},
"scanImage": {
"image": "scanIcon",
"width": 32
},
"textFields": {
"textColor": "#000000",
"errorTextColor": "#FF0000",
"font": "15",
"placeHolderColor": "#00000055"
}
},
"fullCard": {
"commonAttributes": {
"backgroundColor": "#FFFFFF",
"borderColor": "#00000000",
"cornerRadius": 0,
"borderWidth": 0,
"itemSpacing": 0,
"separatorColor": "#0000001E",
"shadow": {
"color": "#2ACE00",
"radius": 3,
"offsetWidth": 0,
"offsetHeight": 0,
"opacity": 1
}
},
"iconImage": {
"image": "bank",
"width": 32
},
"scanImage": {
"image": "scanIcon",
"width": 32
},
"textFields": {
"textColor": "#000000",
"errorTextColor": "#FF0000",
"font": "15",
"placeHolderColor": "#00000055"
}
}
}
示例
展示 TapCardInput UIView
Swift:
import TapCardInputKit_iOS
import CommonDataModelsKit_iOS
/// This is an ouutlet from the TapCardInput you created inside your storyboard
@IBOutlet weak var cardInput: TapCardInput!
/// Set the delegate to yourself
cardInput.delegate = self
/// Setup the card input view by stating which mode and if you want to apply a certain theme
cardInput.setup(for: (isInline ? .InlineCardInput : .FullCardInput), withDictionaryTheme: themeDictionaty)
/// PS. You can show the card input with the default view as follows
cardInput.setup(for: (isInline ? .InlineCardInput : .FullCardInput))
使用 TapCardInputProtocol 委托
Swift:
import TapCardInputKit_iOS
import CommonDataModelsKit_iOS
extension ExampleCardInputViewController: TapCardInputProtocol {
/**
This method will be called whenever the card data in the form has changed. It is being called in a live manner
- Parameter tapCard: The TapCard model that hold sthe data the currently enetred by the user till now
*/
func cardDataChanged(tapCard: TapCard) {
print("Card Number : \(tapCard.tapCardNumber ?? "")\nCard Name : \(tapCard.tapCardName ?? "")\nCard Expiry : \(tapCard.tapCardExpiryMonth ?? "")/\(tapCard.tapCardExpiryYear ?? "")\nCard CVV : \(tapCard.tapCardCVV ?? "")\n\(resultTextView.text ?? "")\n")
}
/// This method will be called once the user clicks on Scan button
func scanCardClicked() {
print("SCAN CLICKED\n\(resultTextView.text ?? "")\n");
}
}
TapCardInput 中公共属性和方法
Swift:
/// This defines the mode required to show the card input view in whether Full or Inline
@objc public var cardInputMode:CardInputMode = .FullCardInput
/// States if the parent controller wants to show a scanning option or not
@objc public lazy var showScanningOption:Bool = true
/**
Call this method when you need to fill in the text fields with data.
- Parameter tapCard: The TapCard that holds the data needed to be filled into the textfields
*/
@objc public func setCardData(tapCard:TapCard)