🎨 Use new payment method icons in PaymentSheet (#890)

* Add new PM icons (still need PayPal and AUBECSDebit)

* Tint text for card and AUBECSDebit, remove image tint for darkmode

* Dynamic tinting of PM icons that don't have dark agnostic icons

* Remove semi-bold from Appearance APIs

* Don't hide shadow when not selected for PM types

* Update CHANGELOG.md

* Use medium in snapshot tests

* Clean up code

* update snapshots

* update light and dark snapshots

* Update parameter name

* Update PaymentMethodTypeCollectionView.swift

* Consolidate image tinting

* Re-add deleted comment

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## x.x.x 2022-x-x
 * The minimum iOS version is now 12.0. If you'd like to deploy for iOS 11.0, please use Stripe SDK 21.12.0.
+* [Changed] PaymentSheet now uses light and dark mode agnostic icons for payment method types.
 
 ## 21.13.0 2022-03-15
 * [Changed] Binary framework distribution now requires Xcode 13. Carthage users using Xcode 12 need to add the `--no-use-binaries` flag.

Stripe/CheckboxButton.swift

@@ -20,7 +20,7 @@ class CheckboxButton: UIControl {
     }
 
     private var emphasisFont: UIFont {
-        return appearance.scaledFont(for: appearance.font.semiBold, style: .footnote, maximumPointSize: 20)
+        return appearance.scaledFont(for: appearance.font.medium, style: .footnote, maximumPointSize: 20)
     }
 
     private lazy var label: UILabel = {

Stripe/PaymentMethodTypeCollectionView.swift

@@ -241,15 +241,25 @@ extension PaymentMethodTypeCollectionView {
             shadowRoundedRectangle.layer.cornerRadius = appearance.shape.cornerRadius
             shadowRoundedRectangle.roundedRectangle.layer.cornerRadius = appearance.shape.cornerRadius
             label.text = paymentMethodType.displayName
-            label.textColor = appearance.color.componentBackgroundText
+
             label.font = appearance.scaledFont(for: appearance.font.medium, style: .footnote, maximumPointSize: 20)
             shadowRoundedRectangle.roundedRectangle.backgroundColor = appearance.color.componentBackground
-            let image = paymentMethodType.makeImage(for: self.traitCollection)
+            var image = paymentMethodType.makeImage(forDarkBackground: appearance.color.componentBackground.contrastingColor == .white)
+
+            // tint icon primary color for a few PMs should be tinted the appearance primary color when selected
+            if paymentMethodType.iconRequiresTinting  {
+                image = image.withRenderingMode(.alwaysTemplate)
+                paymentMethodLogo.tintColor = isSelected ? appearance.color.primary : appearance.color.componentBackground.contrastingColor
+            }
+
             paymentMethodLogo.image = image
             paymentMethodLogoWidthConstraint.constant = paymentMethodLogoSize.height / image.size.height * image.size.width
             setNeedsLayout()
 
             if isSelected {
+                // Set text color
+                label.textColor = appearance.color.primary
+
                 // Set shadow
                 contentView.layer.applyShadowAppearance(shape: appearance.shape)
                 shadowRoundedRectangle.shouldDisplayShadow = true
@@ -258,10 +268,9 @@ extension PaymentMethodTypeCollectionView {
                 shadowRoundedRectangle.layer.borderWidth = appearance.shape.componentBorderWidth * 2
                 shadowRoundedRectangle.layer.borderColor = appearance.color.primary.cgColor
             } else {
-                // Hide shadow
-                contentView.layer.shadowOpacity = 0
-                shadowRoundedRectangle.shouldDisplayShadow = false
-
+                // Set text color
+                label.textColor = appearance.color.componentBackgroundText
+
                 // Set border
                 shadowRoundedRectangle.layer.borderWidth = appearance.shape.componentBorderWidth
                 shadowRoundedRectangle.layer.borderColor = appearance.color.componentBorder.cgColor

Stripe/PaymentOption+Images.swift

@@ -16,17 +16,17 @@ extension PaymentOption {
         case .applePay:
             return Image.apple_pay_mark.makeImage().withRenderingMode(.alwaysOriginal)
         case .saved(let paymentMethod):
-            return paymentMethod.makeIcon(for: traitCollection)
+            return paymentMethod.makeIcon()
         case .new(let confirmParams):
-            return confirmParams.paymentMethodParams.makeIcon(for: traitCollection)
+            return confirmParams.paymentMethodParams.makeIcon()
         case .link(_, let confirmOption):
             switch confirmOption {
             case .forNewAccount(_, let paymentMethodParams):
-                return paymentMethodParams.makeIcon(for: traitCollection)
+                return paymentMethodParams.makeIcon()
             case .withPaymentDetails(let paymentDetails):
                 return paymentDetails.makeIcon()
             case .withPaymentMethodParams(let paymentMethodParams):
-                return paymentMethodParams.makeIcon(for: traitCollection)
+                return paymentMethodParams.makeIcon()
             }
         }
     }
@@ -48,7 +48,7 @@ extension PaymentOption {
 }
 
 extension STPPaymentMethod {
-    func makeIcon(for traitCollection: UITraitCollection? = nil) -> UIImage {
+    func makeIcon() -> UIImage {
         switch type {
         case .card:
             guard let card = card else {
@@ -60,20 +60,20 @@ extension STPPaymentMethod {
             return Image.pm_type_ideal.makeImage()
         default:
             // If there's no image specific to this PaymentMethod (eg card network logo, bank logo), default to the PaymentMethod type's icon
-            return type.makeImage(for: traitCollection)
+            return type.makeImage()
         }
     }
 
     func makeCarouselImage(for view: UIView) -> UIImage {
         if type == .card, let cardBrand = card?.brand {
             return cardBrand.makeCarouselImage()
         }
-        return makeIcon(for: view.traitCollection)
+        return makeIcon()
     }
 }
 
 extension STPPaymentMethodParams {
-    func makeIcon(for traitCollection: UITraitCollection? = nil) -> UIImage {
+    func makeIcon() -> UIImage {
         switch type {
         case .card:
             guard let card = card, let number = card.number else {
@@ -84,7 +84,7 @@ extension STPPaymentMethodParams {
             return STPImageLibrary.cardBrandImage(for: brand)
         default:
             // If there's no image specific to this PaymentMethod (eg card network logo, bank logo), default to the PaymentMethod type's icon
-            return type.makeImage(for: traitCollection)
+            return type.makeImage()
         }
     }
 
@@ -93,7 +93,7 @@ extension STPPaymentMethodParams {
             let cardBrand = STPCardValidator.brand(forNumber: number)
             return cardBrand.makeCarouselImage()
         }
-        return makeIcon(for: view.traitCollection)
+        return makeIcon()
     }
 }
 
@@ -110,7 +110,14 @@ extension ConsumerPaymentDetails {
 }
 
 extension STPPaymentMethodType {
-    func makeImage(for traitCollection: UITraitCollection? = nil) -> UIImage {
+
+    /// A few payment method type icons need to be tinted white or black as they do not have
+    /// light/dark agnostic icons
+    var iconRequiresTinting: Bool {
+        return self == .card || self == .AUBECSDebit || self == .linkInstantDebit
+    }
+
+    func makeImage(forDarkBackground: Bool = false) -> UIImage {
         guard let image: Image = {
             switch self {
             case .card:
@@ -146,14 +153,8 @@ extension STPPaymentMethodType {
             assertionFailure()
             return UIImage()
         }
-        // Tint the image white for darkmode
-        if traitCollection?.isDarkMode ?? isDarkMode(),
-           let imageTintedWhite = image.makeImage(template: true)
-            .compatible_withTintColor(.white)?
-            .withRenderingMode(.alwaysOriginal) {
-            return imageTintedWhite
-        } else {
-            return image.makeImage(darkMode: false)
-        }
+
+        // payment method type icons are light/dark agnostic except PayPal
+        return image.makeImage(darkMode: self == .payPal ? forDarkBackground : false)
     }
 }

Stripe/PaymentSheetAppearance.swift

@@ -30,8 +30,6 @@ import UIKit
             public var regular = UIFont.systemFont(ofSize: 12.0, weight: .regular)
 
             public var medium  = UIFont.systemFont(ofSize: 12.0, weight: .medium)
-
-            public var semiBold = UIFont.systemFont(ofSize: 12.0, weight: .semibold)
 
             public var bold = UIFont.systemFont(ofSize: 12.0, weight: .bold)
         }

Stripe/SheetNavigationBar.swift

@@ -43,7 +43,7 @@ class SheetNavigationBar: UIView {
         let button = UIButton()
         button.setTitleColor(appearance.color.icon, for: .normal)
         button.setTitleColor(CompatibleColor.tertiaryLabel, for: .disabled)
-        button.titleLabel?.font = appearance.scaledFont(for: appearance.font.semiBold, style: .footnote, maximumPointSize: 20)
+        button.titleLabel?.font = appearance.scaledFont(for: appearance.font.bold, style: .footnote, maximumPointSize: 20)
         return button
     }()
 

Tests/Tests/CheckboxButtonSnapshotTests.swift

@@ -43,7 +43,7 @@ class CheckboxButtonSnapshotTests: FBSnapshotTestCase {
     func testCustomFont() throws {
         var appearance = PaymentSheet.Appearance.default
         appearance.font.regular = try XCTUnwrap(UIFont(name: "Arial-ItalicMT", size: 12.0))
-        appearance.font.semiBold = try XCTUnwrap(UIFont(name: "Arial-BoldItalicMT", size: 0.0))
+        appearance.font.medium = try XCTUnwrap(UIFont(name: "Arial-BoldItalicMT", size: 0.0))
 
         let checkbox = CheckboxButton(
             text: "Save my info for secure 1-click checkout",
@@ -57,7 +57,7 @@ class CheckboxButtonSnapshotTests: FBSnapshotTestCase {
     func testCustomFontScales() throws {
         var appearance = PaymentSheet.Appearance.default
         appearance.font.regular = try XCTUnwrap(UIFont(name: "Arial-ItalicMT", size: 12.0))
-        appearance.font.semiBold = try XCTUnwrap(UIFont(name: "Arial-BoldItalicMT", size: 0.0))
+        appearance.font.medium = try XCTUnwrap(UIFont(name: "Arial-BoldItalicMT", size: 0.0))
         appearance.font.sizeScaleFactor = 1.25
 
         let checkbox = CheckboxButton(