Secondary action color

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## X.Y.Z X-Y-Z
 ### PaymentSheet
+* [Added] The ability to customize the secondary action color with `PaymentSheetAppearance.colors.secondary`.
 * [Added] The ability to customize the disabled colors of the primary button with `PaymentSheetAppearance.primaryButton.disabledBackgroundColor` and `PaymentSheetAppearance.primaryButton.disabledTextColor`.
 * [Added] CVC Recollection is now in GA. For more information see our docs for [here](https://docs.stripe.com/payments/accept-a-payment?platform=ios#ios-cvc-recollection) for intent first integrations or [here](https://docs.stripe.com/payments/accept-a-payment-deferred?platform=ios&type=payment#ios-cvc-recollection) for deferred intent integrations.
 * [Fixed] Fixed an issue where checkboxes were not visible when `appearance.colors.componentBorder` was transparent.

Example/PaymentSheet Example/PaymentSheet Example/AppearancePlaygroundView.swift

@@ -24,6 +24,11 @@ struct AppearancePlaygroundView: View {
             get: { Color(self.appearance.colors.primary) },
             set: { self.appearance.colors.primary = UIColor($0) }
         )
+
+        let secondaryColorBinding = Binding(
+            get: { Color(self.appearance.colors.secondary ?? self.appearance.colors.primary) },
+            set: { self.appearance.colors.secondary = UIColor($0) }
+        )
 
         let backgroundColorBinding = Binding(
             get: { Color(self.appearance.colors.background) },
@@ -219,6 +224,7 @@ struct AppearancePlaygroundView: View {
                 Section(header: Text("Colors")) {
                     Group {
                         ColorPicker("primary", selection: primaryColorBinding)
+                        ColorPicker("secondary", selection: secondaryColorBinding)
                         ColorPicker("background", selection: backgroundColorBinding)
                         ColorPicker("componentBackground", selection: componentBackgroundColorBinding)
                         ColorPicker("componentBorder", selection: componentBorderColorBinding)

StripePaymentSheet/StripePaymentSheet/Source/Internal/Link/Elements/InlineSignup/LinkInlineSignupView.swift

@@ -39,7 +39,7 @@ final class LinkInlineSignupView: UIView {
                                        isOptional: viewModel.isEmailOptional,
                                        showLogo: viewModel.mode != .textFieldsOnlyPhoneFirst,
                                        theme: theme)
-        element.indicatorTintColor = theme.colors.primary
+        element.indicatorTintColor = theme.colors.secondary ?? theme.colors.primary
         return element
     }()
 
@@ -85,7 +85,7 @@ final class LinkInlineSignupView: UIView {
                                            delegate: self)
         legalView.font = theme.fonts.caption
         legalView.textColor = theme.colors.secondaryText
-        legalView.tintColor = theme.colors.primary
+        legalView.tintColor = theme.colors.secondary ?? theme.colors.primary
 
         return StaticElement(
             view: legalView

StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/PaymentSheetAppearance.swift

@@ -94,6 +94,10 @@ public extension PaymentSheet {
             #else
             public var background: UIColor = .systemBackground
             #endif
+
+            /// The secondary color used throughout PaymentSheet
+            /// - Note: If `nil`, defaults to  `appearance.colors.primary`
+            public var secondary: UIColor?
 
             /// The color used for the background of inputs, tabs, and other components
             public var componentBackground: UIColor = UIColor.dynamic(light: .systemBackground,
@@ -192,7 +196,7 @@ public extension PaymentSheet {
             public var textColor: UIColor?
 
             /// The background color of the primary button when in a disabled state.
-             /// - Note: If `nil`, defaults to `backgroundColor`. If `backgroundColor` is `nil`, defaults to `appearance.colors.primary`.
+            /// - Note: If `nil`, defaults to `backgroundColor`. If `backgroundColor` is `nil`, defaults to `appearance.colors.primary`.
             public var disabledBackgroundColor: UIColor?
 
             /// The text color of the primary button when in a disabled state.

StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/PaymentSheetFormFactory/PaymentSheetFormFactory.swift

@@ -876,6 +876,7 @@ extension PaymentSheet.Appearance {
 
         var colors = ElementsUITheme.Color()
         colors.primary = self.colors.primary
+        colors.secondary = self.colors.secondary
         colors.parentBackground = self.colors.background
         colors.background = self.colors.componentBackground
         colors.bodyText = self.colors.text

StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/Saved Payment Method Screen/Vertical Saved Payment Method Screen/SavedPaymentMethodRowButton.swift

@@ -90,7 +90,7 @@ final class SavedPaymentMethodRowButton: UIView {
     // TODO(porter) Refactor CircleIconView out of SavedPaymentMethodCollectionView once it is deleted
     private lazy var circleView: SavedPaymentMethodCollectionView.CircleIconView = {
         let circleView = SavedPaymentMethodCollectionView.CircleIconView(icon: .icon_checkmark,
-                                                                         fillColor: appearance.colors.primary)
+                                                                         fillColor: appearance.colors.secondary ?? appearance.colors.primary)
         circleView.isHidden = true
         return circleView
     }()

StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/Saved Payment Method Screen/Vertical Saved Payment Method Screen/VerticalSavedPaymentMethodsViewController.swift

@@ -119,8 +119,8 @@ class VerticalSavedPaymentMethodsViewController: UIViewController {
         navBar.delegate = self
         navBar.additionalButton.configureCommonEditButton(isEditingPaymentMethods: isEditingPaymentMethods, appearance: configuration.appearance)
         // TODO(porter) Read color from new secondary action color from appearance
-        navBar.additionalButton.setTitleColor(configuration.appearance.colors.primary, for: .normal)
-        navBar.additionalButton.setTitleColor(configuration.appearance.colors.primary.disabledColor, for: .disabled)
+        navBar.additionalButton.setTitleColor(configuration.appearance.colors.secondary ?? configuration.appearance.colors.primary, for: .normal)
+        navBar.additionalButton.setTitleColor(configuration.appearance.colors.secondary?.disabledColor ?? configuration.appearance.colors.primary.disabledColor, for: .disabled)
         navBar.additionalButton.addTarget(self, action: #selector(didSelectEditSavedPaymentMethodsButton), for: .touchUpInside)
         return navBar
     }()

StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/Vertical Main Screen/RightAccessoryButton.swift

@@ -43,7 +43,7 @@ extension RowButton {
             if #available(iOS 15.0, *) {
                 label.minimumContentSizeCategory = .large
             }
-            label.textColor = appearance.colors.primary // TODO(porter) use secondary action color
+            label.textColor = appearance.colors.secondary ?? appearance.colors.primary // TODO(porter) use secondary action color
             label.adjustsFontSizeToFitWidth = true
             label.adjustsFontForContentSizeCategory = true
             label.isAccessibilityElement = false
@@ -53,7 +53,7 @@ extension RowButton {
         private var imageView: UIImageView? {
             guard let image = accessoryType.accessoryImage else { return nil }
             let imageView = UIImageView(image: image)
-            imageView.tintColor = appearance.colors.primary // TODO(porter) use secondary action color
+            imageView.tintColor = appearance.colors.secondary ?? appearance.colors.primary // TODO(porter) use secondary action color
             imageView.contentMode = .scaleAspectFit
             imageView.isAccessibilityElement = false
             return imageView

StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/ViewControllers/PollingViewController.swift

@@ -59,7 +59,7 @@ class PollingViewController: UIViewController {
                 format: viewModel.CTA,
                    timeRemaining
                ))
-               attrText.addAttributes([.foregroundColor: appearance.colors.primary],
+        attrText.addAttributes([.foregroundColor: appearance.colors.secondary ?? appearance.colors.primary],
                                       range: NSString(string: attrText.string).range(of: timeRemaining))
                return attrText
     }
@@ -133,7 +133,7 @@ class PollingViewController: UIViewController {
         button.setTitle(.Localized.cancel_pay_another_way, for: .normal)
         button.titleLabel?.font = appearance.scaledFont(for: appearance.font.base.regular, style: .footnote, maximumPointSize: 22)
         button.addTarget(self, action: #selector(didTapCancel), for: .touchUpInside)
-        button.tintColor = appearance.colors.primary
+        button.tintColor = appearance.colors.secondary ?? appearance.colors.primary
         return button
     }()
 

StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/Views/AUBECSMandate.swift

@@ -31,7 +31,7 @@ final class AUBECSLegalTermsView: UIView {
         textView.backgroundColor = .clear
         textView.attributedText = formattedLegalText()
         textView.textColor = theme.colors.secondaryText
-        textView.linkTextAttributes = [.foregroundColor: theme.colors.primary]
+        textView.linkTextAttributes = [.foregroundColor: theme.colors.secondary ?? theme.colors.primary]
         textView.textContainerInset = .zero
         textView.textContainer.lineFragmentPadding = 0
         textView.clipsToBounds = false

StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/Views/CardScanButton.swift

@@ -24,7 +24,7 @@ extension UIButton {
         scanButton.setTitle(String.Localized.scan_card, for: .normal)
         scanButton.setImage(UIImage(systemName: "camera.fill", withConfiguration: iconConfig), for: .normal)
         scanButton.setContentSpacing(4, withEdgeInsets: .zero)
-        scanButton.tintColor = theme.colors.primary
+        scanButton.tintColor = theme.colors.secondary ?? theme.colors.primary
         scanButton.titleLabel?.font = theme.fonts.sectionHeader
         scanButton.setContentHuggingPriority(.defaultLow + 1, for: .horizontal)
         return scanButton

StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/Views/ShadowedRoundedRectangleView.swift

@@ -56,7 +56,7 @@ class ShadowedRoundedRectangle: UIView {
                 // Without a border, the customer can't tell this is selected and it looks bad
                 layer.borderWidth = 1.5
             }
-            layer.borderColor = appearance.colors.componentBorderSelected?.cgColor ?? appearance.colors.primary.cgColor
+            layer.borderColor = appearance.colors.componentBorderSelected?.cgColor ?? appearance.colors.secondary?.cgColor ?? appearance.colors.primary.cgColor
         } else {
             layer.borderWidth = appearance.borderWidth
             layer.borderColor = appearance.colors.componentBorder.cgColor

StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/Views/SimpleMandateTextView.swift

@@ -58,7 +58,7 @@ class SimpleMandateTextView: UIView {
         textView.font = theme.fonts.caption
         textView.backgroundColor = .clear
         textView.textColor = theme.colors.secondaryText
-        textView.linkTextAttributes = [.foregroundColor: theme.colors.primary]
+        textView.linkTextAttributes = [.foregroundColor: theme.colors.secondary ?? theme.colors.primary]
         // These two lines remove insets that are on UITextViews by default
         textView.textContainerInset = .zero
         textView.textContainer.lineFragmentPadding = 0

StripePaymentSheet/StripePaymentSheetTests/PaymentSheet/PaymentSheetSnapshotTests.swift

@@ -15,6 +15,7 @@ import XCTest
 @_spi(STP)@testable import StripeCore
 @_spi(STP)@testable import StripePaymentSheet
 @_spi(STP)@testable import StripeUICore
+@_spi(EmbeddedPaymentMethodsViewBeta) @testable import StripePaymentSheet
 
 class PaymentSheetSnapshotTests: STPSnapshotTestCase {
 
@@ -163,6 +164,7 @@ class PaymentSheetSnapshotTests: STPSnapshotTestCase {
 
         var appearance = PaymentSheet.Appearance()
         appearance.colors.primary = .red
+        appearance.colors.secondary = .black
         appearance.colors.background = .lightGray
         appearance.colors.componentBackground = .black
         appearance.colors.componentBorder = .yellow
@@ -178,6 +180,18 @@ class PaymentSheetSnapshotTests: STPSnapshotTestCase {
         presentPaymentSheet(darkMode: false)
         verify(paymentSheet.bottomSheetViewController.view!)
     }
+
+    func testPaymentSheetSecondaryAndSelected() {
+        stubNewCustomerResponse()
+
+        var appearance = PaymentSheet.Appearance()
+        appearance.colors.secondary = .black
+        appearance.colors.componentBorderSelected = .red
+
+        preparePaymentSheet(appearance: appearance)
+        presentPaymentSheet(darkMode: false)
+        verify(paymentSheet.bottomSheetViewController.view!)
+    }
 
     func testPaymentSheetPrimaryButton() {
         stubNewCustomerResponse()

StripeUICore/StripeUICore/Source/Elements/Checkbox/CheckboxButton.swift

@@ -262,7 +262,7 @@ class CheckBox: UIView {
 
     private var fillColor: UIColor {
         if isSelected {
-            return theme.colors.primary
+            return theme.colors.secondary ?? theme.colors.primary
         }
 
         return theme.colors.parentBackground

StripeUICore/StripeUICore/Source/Elements/ElementsUI.swift

@@ -51,7 +51,7 @@ import UIKit
         textView.font = theme.fonts.footnote
         textView.backgroundColor = .clear
         textView.textColor = theme.colors.secondaryText
-        textView.linkTextAttributes = [.foregroundColor: theme.colors.primary]
+        textView.linkTextAttributes = [.foregroundColor: theme.colors.secondary ?? theme.colors.primary]
         return textView
     }
 
@@ -100,6 +100,7 @@ import UIKit
         public init() {}
 
         public var primary = UIColor.systemBlue
+        public var secondary: UIColor?
         public var parentBackground = UIColor.systemBackground
         public var background = ElementsUI.backgroundColor
         public var disabledBackground = ElementsUI.disabledBackgroundColor

StripeUICore/StripeUICore/Source/Views/DoneButtonToolbar.swift

@@ -38,7 +38,7 @@ import UIKit
             target: self,
             action: #selector(didTapDone)
         )
-        doneButton.tintColor = theme.colors.primary
+        doneButton.tintColor = theme.colors.secondary ?? theme.colors.primary
         let cancelButton = UIBarButtonItem(
             barButtonSystemItem: .cancel,
             target: self,