Scan your card buton styling

Adyen · Mar 6, 2025 · 112c6b8 · 112c6b8
1 parent 7f399eb
commit 112c6b8
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 9 deletions.
diff --git a/Adyen/Assets/Generated/LocalizationKey.swift b/Adyen/Assets/Generated/LocalizationKey.swift
@@ -494,7 +494,9 @@ public struct LocalizationKey {
     public static let addressLookupSearchManualEntryItemTitle = LocalizationKey(key: "adyen.address.lookup.search.manualEntryItem.title")
     /// Last 4 digits
     public static let accessibilityLastFourDigits = LocalizationKey(key: "adyen.accessibility.lastFourDigits")
-
+    /// Scan your card
+    public static let scanYourCardButton = LocalizationKey(key: "adyen.card.scanYourCardButton")
+
     internal let key: String
 
     /// :nodoc:

diff --git a/AdyenCard/Form/FormCardNumberItem.swift b/AdyenCard/Form/FormCardNumberItem.swift
@@ -46,6 +46,7 @@ internal final class FormCardNumberItem: FormTextItem, AdyenObserver {
     private let localizationParameters: LocalizationParameters?
 
     internal let scanCardHandler: (() -> Void)?
+    internal var scanYourCardButtonTitle: String
 
     internal var supportsCardScanning: Bool { scanCardHandler != nil }
 
@@ -75,6 +76,7 @@ internal final class FormCardNumberItem: FormTextItem, AdyenObserver {
         self.supportedCardTypes = cardTypeLogos.map(\.type)
         self.localizationParameters = localizationParameters
         self.scanCardHandler = scanCardHandler
+        self.scanYourCardButtonTitle = localizedString(.scanYourCardButton, localizationParameters)
 
         super.init(style: style)
 

diff --git a/AdyenCard/Form/FormCardNumberItemView+ScanCard.swift b/AdyenCard/Form/FormCardNumberItemView+ScanCard.swift
@@ -8,21 +8,37 @@ import Foundation
 import UIKit
 
 extension FormCardNumberItemView {
-    func makeCardScanAccessoryView(_ selector: Selector) -> UIView {
-        let accessoryView = UIView(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 44))
-        accessoryView.backgroundColor = UIColor(white: 0.95, alpha: 1.0)
+    func makeCardScanAccessoryView(title: String, _ selector: Selector) -> UIView {
+        let accessoryView = UIInputView(
+            frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 44),
+            inputViewStyle: .keyboard
+        )
 
         let scanButton = UIButton(type: .system)
-        // TODO: Localization
-        scanButton.setTitle("Scan your card", for: .normal)
-        scanButton.addTarget(self, action: selector, for: .touchUpInside)
         scanButton.translatesAutoresizingMaskIntoConstraints = false
+        scanButton.setTitle(title, for: .normal)
+        scanButton.tintColor = .systemBlue
+
+        if #available(iOS 13.0, *) {
+            scanButton.setImage(UIImage(systemName: "camera.fill"), for: .normal)
+        }
+
+        scanButton.imageView?.contentMode = .scaleAspectFit
+        scanButton.contentHorizontalAlignment = .center
+
+        let spacing: CGFloat = 10
+        scanButton.imageEdgeInsets = UIEdgeInsets(top: 0, left: -spacing / 2, bottom: 0, right: spacing / 2)
+        scanButton.titleEdgeInsets = UIEdgeInsets(top: 0, left: spacing / 2, bottom: 0, right: -spacing / 2)
+        scanButton.contentEdgeInsets = UIEdgeInsets(top: 0, left: spacing, bottom: 0, right: spacing)
+
+        scanButton.addTarget(self, action: selector, for: .touchUpInside)
 
         accessoryView.addSubview(scanButton)
 
         NSLayoutConstraint.activate([
             scanButton.centerXAnchor.constraint(equalTo: accessoryView.centerXAnchor),
-            scanButton.centerYAnchor.constraint(equalTo: accessoryView.centerYAnchor)
+            scanButton.centerYAnchor.constraint(equalTo: accessoryView.centerYAnchor),
+            scanButton.widthAnchor.constraint(lessThanOrEqualTo: accessoryView.widthAnchor, multiplier: 0.8)
         ])
 
         return accessoryView

diff --git a/AdyenCard/Form/FormCardNumberItemView.swift b/AdyenCard/Form/FormCardNumberItemView.swift
@@ -20,7 +20,10 @@ internal final class FormCardNumberItemView: FormTextItemView<FormCardNumberItem
         super.init(item: item)
         accessory = .customView(detectedBrandsView)
         if item.supportsCardScanning {
-            textField.inputAccessoryView = makeCardScanAccessoryView(#selector(openCardScanner))
+            textField.inputAccessoryView = makeCardScanAccessoryView(
+                title: item.scanYourCardButtonTitle,
+                #selector(openCardScanner)
+            )
         }
         textField.textContentType = .creditCardNumber
         textField.returnKeyType = .default