Display a “default” badge for the default PM

StripePaymentSheet/StripePaymentSheet/Source/Categories/String+Localized.swift

@@ -437,4 +437,11 @@ extension String.Localized {
             "Promotional text for Affirm, displayed in a button that lets the customer pay with Affirm"
         )
     }
+
+    static var default_text: String {
+        STPLocalizedString(
+            "Default",
+            "Label for identifying the default payment method."
+       )
+    }
 }

StripePaymentSheet/StripePaymentSheet/Source/Internal/API Bindings/v1-elements-sessions/ElementsCustomer.swift

@@ -40,9 +40,14 @@ struct ElementsCustomer: Equatable, Hashable {
         return ElementsCustomer(paymentMethods: paymentMethods, defaultPaymentMethod: defaultPaymentMethod, customerSession: customerSession)
     }
 
+    func getDefaultPaymentMethod() -> STPPaymentMethod? {
+        let defaultSavedPaymentMethod = paymentMethods.first { $0.stripeId == defaultPaymentMethod }
+        return defaultSavedPaymentMethod
+    }
+
     func getDefaultOrFirstPaymentMethod() -> STPPaymentMethod? {
         // if customer has a default payment method from the elements session, return the default payment method
-        let defaultSavedPaymentMethod = paymentMethods.first { $0.stripeId == defaultPaymentMethod }
+        let defaultSavedPaymentMethod = getDefaultPaymentMethod()
         if let defaultSavedPaymentMethod = defaultSavedPaymentMethod {
             return defaultSavedPaymentMethod
         }

StripePaymentSheet/StripePaymentSheet/Source/Internal/Link/Components/PaymentMethodPicker/LinkPaymentMethodPicker-Cell.swift

@@ -73,7 +73,7 @@ extension LinkPaymentMethodPicker {
 
         private let defaultBadge = LinkBadgeView(
             type: .neutral,
-            text: STPLocalizedString("Default", "Label for identifying the default payment method.")
+            text: String.Localized.default_text
         )
 
         private let alertIconView: UIImageView = {

StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/CustomerSheet/CustomerSavedPaymentMethodsCollectionViewController.swift

@@ -386,7 +386,9 @@ extension CustomerSavedPaymentMethodsCollectionViewController: UICollectionViewD
 
         cell.setViewModel(viewModel.toSavedPaymentOptionsViewControllerSelection(),
                           cbcEligible: cbcEligible,
-                          allowsPaymentMethodRemoval: configuration.paymentMethodRemove)
+                          allowsPaymentMethodRemoval: configuration.paymentMethodRemove,
+                          allowsSetAsDefaultPM: false,
+                          showDefaultPMBadge: false)
         cell.delegate = self
         cell.isRemovingPaymentMethods = self.collectionView.isRemovingPaymentMethods
         cell.appearance = appearance

StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/Saved Payment Method Screen/SavedPaymentMethodCollectionView.swift

@@ -16,6 +16,7 @@ import UIKit
 // MARK: - Constants
 /// Entire cell size
 private let cellSize: CGSize = CGSize(width: 106, height: 94)
+private let cellSizeWithDefaultBadge: CGSize = CGSize(width: 106, height: 112)
 /// Size of the rounded rectangle that contains the PM logo
 let roundedRectangleSize = CGSize(width: 100, height: 64)
 private let paymentMethodLogoSize: CGSize = CGSize(width: 54, height: 40)
@@ -24,12 +25,13 @@ private let paymentMethodLogoSize: CGSize = CGSize(width: 54, height: 40)
 /// For internal SDK use only
 @objc(STP_Internal_SavedPaymentMethodCollectionView)
 class SavedPaymentMethodCollectionView: UICollectionView {
-    init(appearance: PaymentSheet.Appearance) {
+    init(appearance: PaymentSheet.Appearance, showDefaultPMBadge: Bool = false) {
         let layout = UICollectionViewFlowLayout()
         layout.scrollDirection = .horizontal
         layout.sectionInset = UIEdgeInsets(
             top: -6, left: PaymentSheetUI.defaultPadding, bottom: 0,
             right: PaymentSheetUI.defaultPadding)
+        self.showDefaultPMBadge = showDefaultPMBadge
         layout.itemSize = cellSize
         layout.minimumInteritemSpacing = 12
         layout.minimumLineSpacing = 4
@@ -43,13 +45,23 @@ class SavedPaymentMethodCollectionView: UICollectionView {
     }
 
     var isRemovingPaymentMethods: Bool = false
+    let showDefaultPMBadge: Bool
 
     required init?(coder: NSCoder) {
         fatalError("init(coder:) has not been implemented")
     }
 
     override var intrinsicContentSize: CGSize {
-        return CGSize(width: UIView.noIntrinsicMetric, height: 100)
+        return showDefaultPMBadge && isRemovingPaymentMethods ? CGSize(width: UIView.noIntrinsicMetric, height: 118) : CGSize(width: UIView.noIntrinsicMetric, height: 100)
+    }
+
+    func updateLayout() {
+        guard let layout = collectionViewLayout as? UICollectionViewFlowLayout else { return }
+        let newItemSize = showDefaultPMBadge && isRemovingPaymentMethods ? cellSizeWithDefaultBadge : cellSize
+        guard newItemSize != layout.itemSize else { return }
+        layout.itemSize = newItemSize
+        collectionViewLayout.invalidateLayout()
+        invalidateIntrinsicContentSize()
     }
 }
 
@@ -91,11 +103,31 @@ extension SavedPaymentMethodCollectionView {
             button.accessibilityLabel = String.Localized.edit
             return button
         }()
+        lazy var defaultBadge: UILabel = {
+            let label = UILabel()
+            label.font = appearance.scaledFont(for: appearance.font.base.regular, style: .caption1, maximumPointSize: 20)
+            label.textColor = appearance.colors.textSecondary
+            label.adjustsFontForContentSizeCategory = true
+            label.text = String.Localized.default_text
+            label.isHidden = true
+            return label
+        }()
 
         fileprivate var viewModel: SavedPaymentOptionsViewController.Selection?
+        var isDefaultPM: Bool = false
 
         var isRemovingPaymentMethods: Bool = false {
             didSet {
+                if showDefaultPMBadge {
+                    if isRemovingPaymentMethods {
+                        activateDefaultBadge()
+                        defaultBadge.isHidden = !isDefaultPM
+                    }
+                    else {
+                        deactivateDefaultBadge()
+                        defaultBadge.isHidden = true
+                    }
+                }
                 update()
             }
         }
@@ -110,14 +142,16 @@ extension SavedPaymentMethodCollectionView {
 
         var cbcEligible: Bool = false
         var allowsPaymentMethodRemoval: Bool = true
+        var allowsSetAsDefaultPM: Bool = false
+        var showDefaultPMBadge: Bool = false
 
         /// Indicates whether the cell for a saved payment method should display the edit icon.
-        /// True if payment methods can be removed or edited (will update this to include allowing set as default)
+        /// True if payment methods can be removed or edited
         var showEditIcon: Bool {
             guard UpdatePaymentMethodViewModel.supportedPaymentMethods.contains(where: { viewModel?.savedPaymentMethod?.type == $0 }) else {
                 fatalError("Payment method does not match supported saved payment methods.")
             }
-            return allowsPaymentMethodRemoval || (viewModel?.savedPaymentMethod?.isCoBrandedCard ?? false && cbcEligible)
+            return allowsSetAsDefaultPM || allowsPaymentMethodRemoval || (viewModel?.savedPaymentMethod?.isCoBrandedCard ?? false && cbcEligible)
         }
 
         // MARK: - UICollectionViewCell
@@ -142,12 +176,14 @@ extension SavedPaymentMethodCollectionView {
             paymentMethodLogo.contentMode = .scaleAspectFit
             accessoryButton.addTarget(self, action: #selector(didSelectAccessory), for: .touchUpInside)
             let views = [
-                label, shadowRoundedRectangle, paymentMethodLogo, plus, selectedIcon, accessoryButton,
+                label, shadowRoundedRectangle, paymentMethodLogo, plus, selectedIcon, accessoryButton, defaultBadge
             ]
             views.forEach {
                 $0.translatesAutoresizingMaskIntoConstraints = false
                 contentView.addSubview($0)
             }
+            labelBottomConstraint = label.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
+            guard let labelBottomConstraint else { return }
             NSLayoutConstraint.activate([
                 shadowRoundedRectangle.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 6),
                 shadowRoundedRectangle.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
@@ -159,7 +195,7 @@ extension SavedPaymentMethodCollectionView {
 
                 label.topAnchor.constraint(
                     equalTo: shadowRoundedRectangle.bottomAnchor, constant: 4),
-                label.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
+                labelBottomConstraint,
                 label.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 2),
                 label.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
 
@@ -188,6 +224,7 @@ extension SavedPaymentMethodCollectionView {
                     equalTo: contentView.trailingAnchor, constant: 0),
                 accessoryButton.topAnchor.constraint(
                     equalTo: contentView.topAnchor, constant: 0),
+
             ])
         }
 
@@ -208,15 +245,20 @@ extension SavedPaymentMethodCollectionView {
             }
         }
 
-        // MARK: - Internal Methods
+        private var labelBottomConstraint: NSLayoutConstraint?
+        private var labelHeightConstraint: NSLayoutConstraint?
+        private var defaultBadgeConstraints: [NSLayoutConstraint] = []
 
-        func setViewModel(_ viewModel: SavedPaymentOptionsViewController.Selection, cbcEligible: Bool, allowsPaymentMethodRemoval: Bool) {
+        // MARK: - Internal Methods
+        func setViewModel(_ viewModel: SavedPaymentOptionsViewController.Selection, cbcEligible: Bool, allowsPaymentMethodRemoval: Bool, allowsSetAsDefaultPM: Bool, showDefaultPMBadge: Bool) {
             paymentMethodLogo.isHidden = false
             plus.isHidden = true
             shadowRoundedRectangle.isHidden = false
             self.viewModel = viewModel
             self.cbcEligible = cbcEligible
             self.allowsPaymentMethodRemoval = allowsPaymentMethodRemoval
+            self.allowsSetAsDefaultPM = allowsSetAsDefaultPM
+            self.showDefaultPMBadge = showDefaultPMBadge
             update()
         }
 
@@ -324,7 +366,6 @@ extension SavedPaymentMethodCollectionView {
                     selectedIcon.isHidden = true
                     layer.shadowOpacity = 0
                 }
-
                 if isRemovingPaymentMethods {
                     if case .saved = viewModel, showEditIcon {
                         accessoryButton.isHidden = false
@@ -340,7 +381,6 @@ extension SavedPaymentMethodCollectionView {
                         plus.alpha = 0.6
                         label.textColor = appearance.colors.text.disabledColor
                     }
-
                 } else if isSelected {
                     accessoryButton.isHidden = true
                     shadowRoundedRectangle.isEnabled = true
@@ -372,6 +412,37 @@ extension SavedPaymentMethodCollectionView {
                 }()
             }
         }
+
+        private func activateDefaultBadge() {
+            labelHeightConstraint = label.heightAnchor.constraint(equalToConstant: 20)
+            guard let labelBottomConstraint, let labelHeightConstraint else { return }
+            NSLayoutConstraint.deactivate([
+                labelBottomConstraint
+            ])
+            NSLayoutConstraint.activate([
+                labelHeightConstraint
+            ])
+            defaultBadgeConstraints = [
+                defaultBadge.topAnchor.constraint(
+                    equalTo: label.bottomAnchor, constant: 4),
+                defaultBadge.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
+                defaultBadge.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 2),
+                defaultBadge.trailingAnchor.constraint(equalTo: contentView.trailingAnchor)
+            ]
+            NSLayoutConstraint.activate(defaultBadgeConstraints)
+        }
+
+        private func deactivateDefaultBadge() {
+            guard let labelHeightConstraint, let labelBottomConstraint else { return }
+            NSLayoutConstraint.deactivate(defaultBadgeConstraints)
+            NSLayoutConstraint.deactivate([
+                labelHeightConstraint
+            ])
+            NSLayoutConstraint.activate([
+                labelBottomConstraint
+            ])
+        }
+
     }
 
     // A circle with an image in the middle

StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/Saved Payment Method Screen/SavedPaymentOptionsViewController.swift

@@ -131,6 +131,10 @@ class SavedPaymentOptionsViewController: UIViewController {
         }
         set {
             collectionView.isRemovingPaymentMethods = newValue
+            collectionView.performBatchUpdates({
+                collectionView.reloadSections(IndexSet(integer: 0))
+                animateHeightChange{self.collectionView.updateLayout()}
+            })
             UIView.transition(with: collectionView,
                               duration: 0.3,
                               options: .transitionCrossDissolve,
@@ -147,6 +151,12 @@ class SavedPaymentOptionsViewController: UIViewController {
             }
         }
     }
+
+    var hasDefault: Bool {
+        guard configuration.allowsSetAsDefaultPM, let defaultPaymentMethod = elementsSession.customer?.getDefaultPaymentMethod() else { return false }
+        return viewModels.contains(where: { $0.savedPaymentMethod?.stripeId == defaultPaymentMethod.stripeId })
+    }
+
     var bottomNoticeAttributedString: NSAttributedString? {
         if case .saved(let paymentMethod, _) = selectedPaymentOption {
             if paymentMethod.usBankAccount != nil {
@@ -267,7 +277,7 @@ class SavedPaymentOptionsViewController: UIViewController {
 
     // MARK: - Views
     private lazy var collectionView: SavedPaymentMethodCollectionView = {
-        let collectionView = SavedPaymentMethodCollectionView(appearance: appearance)
+        let collectionView = SavedPaymentMethodCollectionView(appearance: appearance, showDefaultPMBadge: hasDefault)
         collectionView.delegate = self
         collectionView.dataSource = self
         return collectionView
@@ -508,8 +518,15 @@ extension SavedPaymentOptionsViewController: UICollectionViewDataSource, UIColle
             stpAssertionFailure()
             return UICollectionViewCell()
         }
-        cell.setViewModel(viewModel, cbcEligible: cbcEligible, allowsPaymentMethodRemoval: self.configuration.allowsRemovalOfPaymentMethods)
+        cell.setViewModel(viewModel, cbcEligible: cbcEligible, allowsPaymentMethodRemoval: self.configuration.allowsRemovalOfPaymentMethods, allowsSetAsDefaultPM: configuration.allowsSetAsDefaultPM, showDefaultPMBadge: hasDefault)
         cell.delegate = self
+        let isDefaultPM: Bool = {
+            guard self.hasDefault,
+                  let savedPMId = viewModel.savedPaymentMethod?.stripeId,
+                  let defaultPMId = self.elementsSession.customer?.defaultPaymentMethod else { return false }
+            return savedPMId == defaultPMId
+        }()
+        cell.isDefaultPM = isDefaultPM
         cell.isRemovingPaymentMethods = self.collectionView.isRemovingPaymentMethods
         cell.appearance = appearance
 

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

@@ -47,6 +47,8 @@ final class SavedPaymentMethodRowButton: UIView {
         }
     }
 
+    let showDefaultPMBadge: Bool
+
     private var isEditing: Bool {
         switch state {
         case .selected, .unselected:
@@ -90,15 +92,17 @@ final class SavedPaymentMethodRowButton: UIView {
     }()
 
     private lazy var rowButton: RowButton = {
-        let button: RowButton = .makeForSavedPaymentMethod(paymentMethod: paymentMethod, appearance: appearance, rightAccessoryView: chevronButton, didTap: handleRowButtonTapped)
+        let button: RowButton = .makeForSavedPaymentMethod(paymentMethod: paymentMethod, appearance: appearance, showDefaultPMBadge: showDefaultPMBadge, rightAccessoryView: chevronButton, didTap: handleRowButtonTapped)
 
         return button
     }()
 
     init(paymentMethod: STPPaymentMethod,
-         appearance: PaymentSheet.Appearance) {
+         appearance: PaymentSheet.Appearance,
+         showDefaultPMBadge: Bool = false) {
         self.paymentMethod = paymentMethod
         self.appearance = appearance
+        self.showDefaultPMBadge = showDefaultPMBadge
         super.init(frame: .zero)
 
         addAndPinSubview(rowButton)

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

@@ -88,13 +88,13 @@ class VerticalSavedPaymentMethodsViewController: UIViewController {
     }
 
     /// Indicates whether the chevron should be shown
-    /// True if any saved payment methods can be removed or edited (will update this to include allowing set as default)
+    /// True if any saved payment methods can be removed or edited
     var canRemoveOrEdit: Bool {
         let hasSupportedSavedPaymentMethods = paymentMethods.allSatisfy{ UpdatePaymentMethodViewModel.supportedPaymentMethods.contains($0.type) }
         guard hasSupportedSavedPaymentMethods else {
             fatalError("Saved payment methods contain unsupported payment methods.")
         }
-        return canRemovePaymentMethods || canEditPaymentMethods
+        return configuration.allowsSetAsDefaultPM || canRemovePaymentMethods || canEditPaymentMethods
     }
 
     private var selectedPaymentMethod: STPPaymentMethod? {
@@ -177,7 +177,8 @@ class VerticalSavedPaymentMethodsViewController: UIViewController {
     private func buildPaymentMethodRows(paymentMethods: [STPPaymentMethod]) -> [SavedPaymentMethodRowButton] {
         return paymentMethods.map { paymentMethod in
             let button = SavedPaymentMethodRowButton(paymentMethod: paymentMethod,
-                                                     appearance: configuration.appearance)
+                                                     appearance: configuration.appearance,
+                                                     showDefaultPMBadge: configuration.allowsSetAsDefaultPM && paymentMethod.stripeId == elementsSession.customer?.defaultPaymentMethod)
             button.delegate = self
             return button
         }
@@ -363,7 +364,8 @@ extension VerticalSavedPaymentMethodsViewController: UpdatePaymentMethodViewCont
         }
 
         // Create the new button
-        let newButton = SavedPaymentMethodRowButton(paymentMethod: updatedPaymentMethod, appearance: configuration.appearance)
+        let newButton = SavedPaymentMethodRowButton(paymentMethod: updatedPaymentMethod, appearance: configuration.appearance, showDefaultPMBadge: configuration.allowsSetAsDefaultPM && updatedPaymentMethod.stripeId == elementsSession.customer?.defaultPaymentMethod)
+
         newButton.delegate = self
         newButton.previousSelectedState = oldButton.previousSelectedState
         newButton.state = oldButton.state