Experimental Feature Branch

Samples/MobileBuyIntegration/MobileBuyIntegration.xcodeproj/project.pbxproj

@@ -441,6 +441,7 @@
 				ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME = AccentColor;
 				CODE_SIGN_STYLE = Automatic;
 				CURRENT_PROJECT_VERSION = 1;
+				DEVELOPMENT_TEAM = A7XGC83MZE;
 				GENERATE_INFOPLIST_FILE = YES;
 				INFOPLIST_FILE = MobileBuyIntegration/Info.plist;
 				INFOPLIST_KEY_UIApplicationSupportsIndirectInputEvents = YES;

Samples/MobileBuyIntegration/MobileBuyIntegration/AppConfiguration.swift

@@ -24,7 +24,11 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SO
 import ShopifyCheckoutSheetKit
 
 public struct AppConfiguration {
+	/// Prefill buyer information
 	public var useVaultedState: Bool = false
+	public var useNativeButton: Bool = false
+
+	/// Logger to retain Web Pixel events
 	internal let webPixelsLogger = FileLogger("analytics.txt")
 }
 

Samples/MobileBuyIntegration/MobileBuyIntegration/AppDelegate.swift

@@ -33,7 +33,11 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
 			$0.colorScheme = .automatic
 
 			/// Enable preloading
-			$0.preloading.enabled = true
+			$0.preloading.enabled = false
+
+			$0.progressBarEnabled = true
+
+			/// Optional logger used for internal purposes
 			$0.logger = FileLogger("log.txt")
 		}
 

Samples/MobileBuyIntegration/MobileBuyIntegration/LogsView.swift

@@ -49,7 +49,6 @@ struct LogsView: View {
 						Button(action: clearLogs) {
 							Text("Clear logs")
 								.foregroundColor(.red)
-								.background(.white)
 								.font(.system(size: 12))
 						}
 						Spacer()

Samples/MobileBuyIntegration/MobileBuyIntegration/SettingsViewController.swift

@@ -28,9 +28,11 @@ import ShopifyCheckoutSheetKit
 struct SettingsView: View {
 	@State private var preloadingEnabled = ShopifyCheckoutSheetKit.configuration.preloading.enabled
 	@State private var useVaultedState = appConfiguration.useVaultedState
+	@State private var useNativePayButton = ShopifyCheckoutSheetKit.configuration.payButton.enabled
 	@State private var logs: [String?] = LogReader.shared.readLogs() ?? []
 	@State private var selectedColorScheme = ShopifyCheckoutSheetKit.configuration.colorScheme
 	@State private var colorScheme: ColorScheme = .light
+	@State private var useProgressBar = ShopifyCheckoutSheetKit.configuration.progressBarEnabled
 
 	var body: some View {
 		NavigationView {
@@ -46,6 +48,18 @@ struct SettingsView: View {
 						}
 				}
 
+				Section(header: Text("Experiments")) {
+					Toggle("Native pay button", isOn: $useNativePayButton)
+						.onChange(of: useNativePayButton) { newValue in
+							appConfiguration.useNativeButton = newValue
+							ShopifyCheckoutSheetKit.configuration.payButton.enabled = newValue
+						}
+					Toggle("Progress bar", isOn: $useProgressBar)
+						.onChange(of: useProgressBar) { newValue in
+							ShopifyCheckoutSheetKit.configuration.progressBarEnabled = newValue
+						}
+				}
+
 				Section(header: Text("Theme")) {
 					ForEach(Configuration.ColorScheme.allCases, id: \.self) { scheme in
 						ColorSchemeView(scheme: scheme, isSelected: scheme == selectedColorScheme)
@@ -158,6 +172,28 @@ extension Configuration.ColorScheme {
 		}
 	}
 
+	var payButtonBackgroundColor: UIColor {
+		switch self {
+		case .web:
+			return UIColor(red: 0.94, green: 0.94, blue: 0.91, alpha: 1.00)
+		default:
+			return .systemBackground
+		}
+	}
+
+	var borderColor: UIColor {
+		switch self {
+		case .web:
+			return UIColor(red: 208/255, green: 208/255, blue: 205/255, alpha: 1.0)
+		case .light:
+			return UIColor(red: 222/255, green: 222/255, blue: 222/255, alpha: 1.0)
+		case .dark:
+			return UIColor(red: 68/255, green: 68/255, blue: 70/255, alpha: 1.0)
+		default:
+			return .systemGray5
+		}
+	}
+
 	var backgroundColor: UIColor {
 		switch self {
 		case .web:

Samples/MobileBuyIntegration/MobileBuyIntegration/WebPixelEventsView.swift

@@ -48,7 +48,6 @@ struct WebPixelsEventsView: View {
 						Button(action: clearLogs) {
 							Text("Clear logs")
 								.foregroundColor(.red)
-								.background(.white)
 								.font(.system(size: 12))
 						}
 						Spacer()

Sources/ShopifyCheckoutSheetKit/CheckoutBridge.swift

@@ -52,6 +52,15 @@
 		}
 		let script = dispatchMessageTemplate(body: dispatchMessageBody)
 		webView.evaluateJavaScript(script)
+		webView.evaluateJavaScript("""
+		   function showElement(selector) {
+				const el = document.querySelector(selector)
+				if (el) el.style.display = "block";
+		   }
+		   showElement("#sticky-pay-button-container");
+		   showElement("#checkout-sdk-pay-button-container");
+		   showElement(".XlHGh");
+		""")
 	}
 
 	static func decode(_ message: WKScriptMessage) throws -> WebEvent {

Sources/ShopifyCheckoutSheetKit/CheckoutWebView.swift

@@ -103,7 +103,64 @@ class CheckoutWebView: WKWebView {
 
 		configuration.userContentController
 			.add(self, name: CheckoutBridge.messageHandler)
+
 		isBridgeAttached = true
+
+		let script = """
+		function hideElement(selector) {
+			const el = document.querySelector(selector)
+			if (el) el.style.display = "none";
+		}
+
+		function showElement(selector) {
+			const el = document.querySelector(selector)
+			if (el) el.style.display = "block";
+		}
+
+		function showStickyButtons() {
+			showElement("#sticky-pay-button-container");
+			showElement("#checkout-sdk-pay-button-container");
+			showElement(".XlHGh");
+		}
+
+		function hideStickyButtons() {
+			hideElement("#sticky-pay-button-container");
+			hideElement("#checkout-sdk-pay-button-container");
+			hideElement(".XlHGh");
+		}
+
+		document.addEventListener("DOMContentLoaded", () => {
+		   const fullHeight = window.visualViewport.height;
+		   showStickyButtons();
+
+		   window.visualViewport.addEventListener('resize', () => {
+				if (window.visualViewport.height < fullHeight) {
+					hideStickyButtons();
+				}
+
+				if (window.visualViewport.height === fullHeight) {
+					showStickyButtons();
+				}
+		   });
+
+		   document.addEventListener("focusout", () => {
+				showStickyButtons();
+		   });
+		  });
+		"""
+
+		configuration.userContentController.addUserScript(WKUserScript(
+			source: script,
+			injectionTime: WKUserScriptInjectionTime.atDocumentStart,
+			forMainFrameOnly: true
+		))
+
+		isOpaque = false
+		backgroundColor = ShopifyCheckoutSheetKit.configuration.backgroundColor
+
+		if #available(iOS 15.0, *) {
+			underPageBackgroundColor = ShopifyCheckoutSheetKit.configuration.backgroundColor
+		}
 	}
 
 	deinit {
@@ -158,7 +215,7 @@ extension CheckoutWebView: WKScriptMessageHandler {
 				()
 			}
 		} catch {
-            viewDelegate?.checkoutViewDidFailWithError(error: .sdkError(underlying: error))
+			viewDelegate?.checkoutViewDidFailWithError(error: .sdkError(underlying: error))
 		}
 	}
 }
@@ -182,15 +239,15 @@ extension CheckoutWebView: WKNavigationDelegate {
 		decisionHandler(.allow)
 	}
 
-    func webView(_ webView: WKWebView, decidePolicyFor navigationResponse: WKNavigationResponse, decisionHandler: @escaping (WKNavigationResponsePolicy) -> Void) {
-        if let response = navigationResponse.response as? HTTPURLResponse {
-            decisionHandler(handleResponse(response))
-            return
-        }
-        decisionHandler(.allow)
-    }
+	func webView(_ webView: WKWebView, decidePolicyFor navigationResponse: WKNavigationResponse, decisionHandler: @escaping (WKNavigationResponsePolicy) -> Void) {
+		if let response = navigationResponse.response as? HTTPURLResponse {
+			decisionHandler(handleResponse(response))
+			return
+		}
+		decisionHandler(.allow)
+	}
 
-    func handleResponse(_ response: HTTPURLResponse) -> WKNavigationResponsePolicy {
+	func handleResponse(_ response: HTTPURLResponse) -> WKNavigationResponsePolicy {
 		if isCheckout(url: response.url) && response.statusCode >= 400 {
 			CheckoutWebView.cache = nil
 			switch response.statusCode {
@@ -257,7 +314,7 @@ extension CheckoutWebView: WKNavigationDelegate {
 		}
 		urlComponents.queryItems = urlComponents.queryItems?.filter { !($0.name == "open_externally") }
 		return urlComponents.url ?? url
-    }
+	}
 
 	private func isMailOrTelLink(_ url: URL) -> Bool {
 		return ["mailto", "tel"].contains(url.scheme)