Платежи с использованием кредитных и дебетовых карт являются неотъемлемой частью электронной коммерции. Если у вас есть приложение, в котором продаются какие-либо товары, не относящиеся к контенту приложения и не связанные с экосистемой iOS, вы бы уже представили способ оплаты с помощью кредитных / дебетовых карт.

Часто пользователи неправильно вводят номера кредитных карт, а показ сообщения об ошибке пользователю после ошибки с платежного шлюза - это что-то нелогичное. Мы можем изменить этот поток, указав пользователю, если введенный номер карты недействителен, пока пользователь вводит его. И даже лучше мы можем определить тип карты при вводе номера. Обратите внимание, что мы будем делать это локально, и для этого не требуется связь с какими-либо серверами. Давайте посмотрим, как мы можем успокоить пользователя, когда он вводит номер кредитной / дебетовой карты.

Мы можем использовать ATGValidator для выполнения этих нескольких строк кода. ATGValidator можно добавить, используя как Cocoapods, так и Carthage. В этой статье мы будем использовать Cocoapods.

ATGValidator - это среда проверки, полностью написанная на Swift, в основе которой лежат правила проверки. Он предоставляет множество предварительно созданных правил проверки и поддерживает добавление ваших собственных правил проверки. ATGValidator поддерживает валидатор формы, который можно использовать для объединения нескольких полей ввода и использования результатов их проверки как единого блока.

Предварительные требования: - Xcode, Cocoapods (Если вы не знакомы с Cocoapods, сначала взгляните на эту ссылку.)

Стартовый проект - Вы можете скачать стартовый проект здесь.

После загрузки начального проекта распакуйте и откройте его в Xcode.

Когда вы скомпилируете и запустите загруженный проект, вы увидите текстовое поле для ввода номера кредитной / дебетовой карты.

Проверка еще не добавлена, и когда вы нажимаете кнопку «Продолжить», она просто распечатывает значение, введенное в текстовое поле.

Давайте добавим валидацию в поля.

Первое, что нужно сделать, это добавить ATGValidator в качестве зависимости в Podfile. Для этого откройте Podfile в текстовом редакторе и раскомментируйте строку (удалите # из строки), в которой упоминается ATGValidator.

pod ‘ATGValidator’, ‘~> 1.0’

Теперь откройте каталог проекта в Терминале и запустите

pod install

Это загрузит и свяжет фреймворк с проектом и сгенерирует файл xcworkspace. Дважды щелкните созданный файл CardValidationSample.xcworkspace, чтобы открыть его в Xcode.

Добавьте следующую строку в ViewController.swift под импортом UIKit

import ATGValidator

Теперь мы можем настроить поле кредитной карты для проверки. Добавьте следующие строки кода в конец метода viewDidLoad.

// Line 1
cardNumberTextField.validationRules = [
    PaymentCardRule(acceptedTypes: [.visa])
]
// Line 2
cardNumberTextField.validateOnInputChange(true)
// Line 3
cardNumberTextField.validationHandler = { result in
    if self?.cardNumberTextField.text?.isEmpty ?? true {
        self?.cardTypeIndicator.text = nil
    } else {
        self?.cardTypeIndicator.text = (result.status == .success ? "✅" : "❌")
    }
    self?.cardTypeIndicator.isHidden = self?.cardTypeIndicator.text?.isEmpty ?? true
}

Строка 1 устанавливает PaymentCardRule для текстового поля номера карты с Visa в качестве единственного поддерживаемого типа.

Строка 2 указывает платформе запускать алгоритм проверки всякий раз, когда текст в текстовом поле изменяется.

Строка 3 регистрирует обработчик проверки, который будет вызываться при каждом запуске алгоритма проверки. Если поле номера карты пустое, метка статуса будет скрыта. Если он не пустой, метка будет установлена ​​либо с зеленой галочкой, либо с красным крестом в зависимости от статуса проверки.

Теперь запустите приложение и введите образец номера карты Visa;

4111 1111 1111 1111

Посмотрите на это в действии ниже;

Мы еще не закончили. :-) Мы можем показать тип номера карты, который вводится с помощью ATGValidator. Фактически, вся тяжелая работа уже выполняется фреймворком, и нам нужно просто использовать значение.

Чтобы отключить кнопку продолжения по умолчанию, добавьте следующие строки кода чуть ниже super .viewDidLoad ()

continueButton.alpha = 0.5
continueButton.isEnabled = false

Теперь добавьте. mastercard в список поддерживаемых карт, как указано ниже;

cardNumberTextField.validationRules = [
    PaymentCardRule(acceptedTypes: [.visa, .mastercard])
]

Обновите часть обработчика проверки в viewDidLoad следующим образом:

cardNumberTextField.validationHandler = { [weak self] result in
    if self?.cardNumberTextField.text?.isEmpty ?? true {
        self?.cardNumberStatusLabel.text = nil
    } else {
        var statusString = (result.status == .success ? "✅" : "❌")
        if let type = result.value as? PaymentCardType {
            statusString = type.rawValue + " " + statusString
        }
        self?.cardNumberStatusLabel.text = statusString
    }
    self?.cardNumberStatusLabel.isHidden =
    self?.cardNumberStatusLabel.text?.isEmpty ?? true
    self?.continueButton.isEnabled = result.status == .success
    self?.continueButton.alpha = result.status == .success ? 1.0 : 0.5
}

Скомпилируйте и запустите проект. Вы можете найти список тестовых кредитных карт PayPal здесь. Вот это в действии;

Обратите внимание, что правило платежной карты обрезает все пробелы в текстовом поле ввода, поэтому вы можете автоматически форматировать номер кредитной карты при вводе, чтобы между каждыми 4 цифрами был разделитель.

Также ATGValidator «из коробки» поддерживает следующие типы карт.

American Express
MasterCard
Maestro
Visa
Visa Electron
Discover
Diners Club

Надеюсь, вы нашли эту статью полезной. Если да, то не забывайте хлопать :-)