TapCardInputKit-iOS 1.0.66

TapCardInputKit-iOS 1.0.66

Osama Rabie 维护。



 
依赖项
SnapKit>= 0
TapCardVlidatorKit-iOS>= 0
TapThemeManager2020>= 0
CommonDataModelsKit-iOS>= 0
LocalisationManagerKit-iOS>= 0
Nuke>= 0
 

  • Tap Payments

TapCardInputKit-iOS

这是一个 SDK,提供高度可定制的现成视图,用于在不同模式下收集您应用中的支付卡数据。

Platform CocoaPods Compatible

Tap Card Input Kit Demo

要求

为了使用此 SDK,以下要求必须满足

  1. Xcode 11.0 或更高版本
  2. Swift 4.2 或更高版本(与 Xcode 预装)
  3. 应用的部署目标 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 组件,可以在您的应用程序内部收集支付卡数据。它还附带许多额外的功能,例如

  • 实时卡品牌检测。

  • 实时卡号验证。

  • 基于卡品牌的实时卡号间距。

  • 卡 CVV 验证。

  • 行内模式

    • inlineMode
  • 全模式

    • fullMode

    使其成为市场上最具包容性的 pods 之一,同时也是最容易集成的之一。

模型

本节将描述在 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 文件的形式传递主题。

主题映射

map

主题 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)