Support dashboard, SPM, dynamic fonts, payout details

Example/StripeConnectExample/StripeConnectExample/Info.plist

@@ -2,6 +2,58 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <dict>
+	<key>CFBundleLocalizations</key>
+	<array>
+		<string>bg-BG</string>
+		<string>zh-Hans</string>
+		<string>zh-Hant-HK</string>
+		<string>zh-Hant-TW</string>
+		<string>hr-HR</string>
+		<string>cs-CZ</string>
+		<string>da-DK</string>
+		<string>nl-NL</string>
+		<string>en-AU</string>
+		<string>en-IN</string>
+		<string>en-IE</string>
+		<string>en-NZ</string>
+		<string>en-SG</string>
+		<string>en-GB</string>
+		<string>en-US</string>
+		<string>et-EE</string>
+		<string>fil-PH</string>
+		<string>fi-FI</string>
+		<string>fr-CA</string>
+		<string>fr-FR</string>
+		<string>de-DE</string>
+		<string>el-GR</string>
+		<string>hu-HU</string>
+		<string>id-ID</string>
+		<string>it-IT</string>
+		<string>ja-JP</string>
+		<string>ko-KR</string>
+		<string>lv-LV</string>
+		<string>lt-LT</string>
+		<string>ms-MY</string>
+		<string>mt-MT</string>
+		<string>nb-NO</string>
+		<string>pl-PL</string>
+		<string>pt-BR</string>
+		<string>pt-PT</string>
+		<string>ro-RO</string>
+		<string>sk-SK</string>
+		<string>sl-SI</string>
+		<string>es-AR</string>
+		<string>es-BR</string>
+		<string>es-419</string>
+		<string>es-MX</string>
+		<string>es-ES</string>
+		<string>sv-SE</string>
+		<string>th-TH</string>
+		<string>tr-TR</string>
+		<string>vi-VN</string>
+	</array>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>$(DEVELOPMENT_LANGUAGE)</string>
 	<key>UIAppFonts</key>
 	<array>
 		<string>Handjet-Regular.ttf</string>

StripeConnect/StripeConnect/Source/Components/ComponentType.swift

@@ -7,9 +7,12 @@
 
 import Foundation
 
-enum ComponentType: String {
+/// The name of the embedded component tag in JS ([docs](https://docs.stripe.com/connect/supported-embedded-components))
+enum ComponentType: String, Encodable {
     /// Displays the balance summary, the payout schedule, and a list of payouts for the connected account
     case payouts
     /// The onboarding flow for the account.
     case onboarding = "account-onboarding"
+    /// Show details of a given payment and allow users to manage disputes and perform refunds.
+    case paymentDetails = "payment-details"
 }

StripeConnect/StripeConnect/Source/Components/PaymentDetailsViewController.swift

@@ -0,0 +1,73 @@
+//
+//  PaymentDetailsViewController.swift
+//  StripeConnect
+//
+//  Created by Mel Ludowise on 8/30/24.
+//
+
+import UIKit
+
+/**
+ Show details of a given payment and allow users to manage disputes and perform refunds.
+ */
+@_spi(DashboardOnly)
+@available(iOS 15, *)
+public class PaymentDetailsViewController: UIViewController {
+    let webView: ConnectComponentWebView
+
+    public weak var delegate: PaymentDetailsViewControllerDelegate?
+
+    init(componentManager: EmbeddedComponentManager) {
+        webView = ConnectComponentWebView(
+            componentManager: componentManager,
+            componentType: .paymentDetails
+        )
+        super.init(nibName: nil, bundle: nil)
+        webView.addMessageHandler(OnLoadErrorMessageHandler { [weak self] value in
+            guard let self else { return }
+            self.delegate?.paymentDetailsLoadDidFail(self, withError: value.error.connectEmbedError)
+        })
+        // TODO: Add support for `setOnClose`
+        webView.presentPopup = { [weak self] vc in
+            self?.present(vc, animated: true)
+        }
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    public override func loadView() {
+        view = webView
+    }
+
+    public func setPayment(id: String) {
+        webView.sendMessage(CallSetterWithSerializableValueSender(payload: .init(
+            setter: "setPayment",
+            value: id
+        )))
+    }
+}
+
+/// Delegate of an `PaymentDetailsViewController`
+@available(iOS 15, *)
+@_spi(DashboardOnly)
+public protocol PaymentDetailsViewControllerDelegate: AnyObject {
+
+    /**
+     Triggered when an error occurs loading the payment details component
+     - Parameters:
+       - paymentDetails: The payment details component that errored when loading
+       - error: The error that occurred when loading the component
+     */
+    func paymentDetailsLoadDidFail(_ paymentDetails: PaymentDetailsViewController,
+                                   withError error: Error)
+
+}
+
+@available(iOS 15, *)
+public extension PaymentDetailsViewControllerDelegate {
+    // Default implementation to make optional
+    func paymentDetailsLoadDidFail(_ paymentDetails: PaymentDetailsViewController,
+                                   withError error: Error) { }
+}

StripeConnect/StripeConnect/Source/Components/PayoutsViewController.swift

@@ -11,9 +11,10 @@ import UIKit
  The balance summary, the payout schedule, and a list of payouts for the connected account. It can also allow the user to perform instant or manual payouts.
  */
 @_spi(PrivateBetaConnect)
+@available(iOS 15, *)
 public class PayoutsViewController: UIViewController {
     let webView: ConnectComponentWebView
-    
+
     public weak var delegate: PayoutsViewControllerDelegate?
 
     init(componentManager: EmbeddedComponentManager,
@@ -44,6 +45,7 @@ public class PayoutsViewController: UIViewController {
 
 /// Delegate of an `PayoutsViewController`
 @_spi(PrivateBetaConnect)
+@available(iOS 15, *)
 public protocol PayoutsViewControllerDelegate: AnyObject {
 
     /**
@@ -57,9 +59,9 @@ public protocol PayoutsViewControllerDelegate: AnyObject {
 
 }
 
+@available(iOS 15, *)
 public extension PayoutsViewControllerDelegate {
     // Default implementation to make optional
     func payoutsLoadDidFail(_ payouts: PayoutsViewController,
                             withError error: Error) { }
 }
-

StripeConnect/StripeConnect/Source/CustomFontSource.swift

@@ -8,8 +8,9 @@
 import UIKit
 
 @_spi(PrivateBetaConnect)
+@available(iOS 15, *)
 extension EmbeddedComponentManager {
-    
+
     /// Use a `CustomFontSource` pass custom fonts embedded in your app's binary when initializing a
     /// `EmbeddedComponentManager`.
     /// - Seealso: https://docs.stripe.com/connect/get-started-connect-embedded-components#customize-the-look-of-connect-embedded-components
@@ -19,7 +20,7 @@ extension EmbeddedComponentManager {
         let style: String?
         let weight: String?
         let src: FontSource
-        
+
         /**
          Initializes a CustomFontSource from a base font and its original file URL
          - Parameters:
@@ -37,15 +38,15 @@ extension EmbeddedComponentManager {
             }
 
             let fontData = try Data(contentsOf: fileUrl)
-            self.src = .init(fileType: fileUrl.pathExtension, encoding:fontData.base64EncodedString())
+            self.src = .init(fileType: fileUrl.pathExtension, encoding: fontData.base64EncodedString())
             family = font.familyName
             style = font.isItalic ? "italic" : nil
             self.weight = font.weight.cssValue
         }
-        
+
         enum FontLoadError: Error, CustomDebugStringConvertible {
             case notFileURL
-            
+
             var debugDescription: String {
                 switch self {
                 case .notFileURL:
@@ -54,11 +55,11 @@ extension EmbeddedComponentManager {
             }
         }
     }
-    
+
     struct FontSource: Encodable, Equatable {
         let fileType: String
         let encoding: String
-        
+
         // TODO: CAUI-2844 Move to encoding FontSource directly instead of using a string.
         var stringValue: String {
             "url(data:font/\(fileType);charset=utf-8;base64,\(encoding))"

StripeConnect/StripeConnect/Source/EmbeddedComponentManager+Appearance.swift

@@ -9,6 +9,7 @@
 import UIKit
 
 @_spi(PrivateBetaConnect)
+@available(iOS 15, *)
 extension EmbeddedComponentManager {
     /// Describes the appearance of embedded components.
     /// - seealso: https://docs.stripe.com/connect/embedded-appearance-options
@@ -22,7 +23,7 @@ extension EmbeddedComponentManager {
             case lowercase
             /// Displays the text with the first character capitalized.
             case capitalize
-            
+
             // Since the public API does not call for TextTransform to be a string
             // we manually create a raw value here.
             var rawValue: String {
@@ -37,7 +38,7 @@ extension EmbeddedComponentManager {
                     return "capitalize"
                 }
             }
-            
+
             init?(rawValue: String) {
                 switch rawValue {
                 case "none":
@@ -53,13 +54,14 @@ extension EmbeddedComponentManager {
                 }
             }
         }
-        
+
         /// Describes the typography attributes used in embedded components
         public struct Typography {
             /// Describes the font attributes used for a
             /// typography style in embedded components.
             public struct Style {
-                /// The font size for this typography style.
+                /// The unscaled font size for this typography style.
+                /// The displayed fonts are automatically scaled when the component's size category is updated.
                 public var fontSize: CGFloat?
                 /// The font weight for this typography style.
                 public var weight: UIFont.Weight?
@@ -68,9 +70,9 @@ extension EmbeddedComponentManager {
 
                 /// Creates a `EmbeddedComponentManager.Appearance.Typography.Stylye` with default values
                 public init() {}
-                
+
             }
-            
+
             /// Determines the font family value used throughout embedded components.
             /// Only the family is used from the specified font. The size and weight can be
             /// configured from `fontSizeBase` or `fontSize` and `fontWeight`
@@ -80,9 +82,10 @@ extension EmbeddedComponentManager {
             ///   `CustomFontSource` when initializing the `EmbeddedComponentManager` before
             ///   referencing them in the appearance's `typography.font` property.
             public var font: UIFont?
-            /// The baseline font size set on the embedded component root.
-            /// This scales the value of other font size variables.
-            public var fontSizeBase: CGFloat?
+            /// The unscaled baseline font size set on the embedded component root.
+            /// This scales the value of other font size variables and is automatically scaled
+            /// when the component's size category is updated.
+            public var fontSizeBase: CGFloat? = 16
             /// Describes the font size and weight for the medium body typography.
             /// The `textTransform` property is ignored.
             public var bodyMd: Style = .init()
@@ -103,11 +106,11 @@ extension EmbeddedComponentManager {
             public var labelMd: Style = .init()
             /// Describes the font size and weight for the small label typography.
             public var labelSm: Style = .init()
-            
+
             /// Creates a `EmbeddedComponentManager.Appearance.Typography` with default values
             public init() { }
         }
-        
+
         /// Describes the colors used in embedded components.
         /// - Note: If UIColors using dynamicProviders are specified, the appearance will automatically
         ///   update when the component's UITraitCollection is updated (e.g. dark mode)
@@ -147,11 +150,11 @@ extension EmbeddedComponentManager {
             /// The color used for to fill in form items like checkboxes,
             /// radio buttons and switches. The alpha component is ignored.
             public var formAccent: UIColor?
-            
+
             /// Creates a `EmbeddedComponentManager.Appearance.Colors` with default values
             public init() {}
         }
-        
+
         /// Describes the appearance of a button type used in embedded components
         public struct Button {
             /// The color used as a background for this button type.
@@ -163,11 +166,11 @@ extension EmbeddedComponentManager {
             /// The text color used for this button type.
             /// The alpha component is ignored.
             public var colorText: UIColor?
-            
+
             /// Creates a `EmbeddedComponentManager.Appearance.Button` with default values
             public init() { }
         }
-        
+
         /// Describes the appearance of a badge type usied in embedded components.
         public struct Badge {
             /// The background color for this badge type.
@@ -177,11 +180,11 @@ extension EmbeddedComponentManager {
             public var colorBorder: UIColor?
             /// The text color for this badge type. The alpha component is ignored.
             public var colorText: UIColor?
-            
+
             /// Creates a `EmbeddedComponentManager.Appearance.Badge` with default values
             public init() {}
         }
-        
+
         /// Describes the corner radius used in embedded components.
         public struct CornerRadius {
             /// The general border radius used in embedded components.
@@ -195,14 +198,14 @@ extension EmbeddedComponentManager {
             public var badge: CGFloat?
             /// The corner radius used for overlays.
             public var overlay: CGFloat?
-            
+
             /// Creates a `EmbeddedComponentManager.Appearance.CornerRadius` with default values
             public init() {}
         }
-        
+
         /// The default appearance
         public static let `default`: Appearance = .init()
-        
+
         /// Describes the appearance of typography used in embedded components.
         public var typography: Typography = .init()
         /// Describes the colors used in embedded components.
@@ -229,9 +232,8 @@ extension EmbeddedComponentManager {
         public var badgeDanger: Badge  = .init()
         /// Describes the corner radius used in embedded components.
         public var cornerRadius: CornerRadius = .init()
-        
+
         /// Creates a `EmbeddedComponentManager.Appearance` with default values
         public init() {}
     }
 }
-