Add ability to applyLiquidGlass and update navigationBarStyle

Author: wooj-stripe

example/ios/Podfile.lock

@@ -1685,13 +1685,13 @@ PODS:
     - ReactCommon/turbomodule/core
     - Yoga
   - SocketRocket (0.7.1)
-  - Stripe (24.23.0):
-    - StripeApplePay (= 24.23.0)
-    - StripeCore (= 24.23.0)
-    - StripePayments (= 24.23.0)
-    - StripePaymentsUI (= 24.23.0)
-    - StripeUICore (= 24.23.0)
-  - stripe-react-native (0.53.0):
+  - Stripe (24.24.0):
+    - StripeApplePay (= 24.24.0)
+    - StripeCore (= 24.24.0)
+    - StripePayments (= 24.24.0)
+    - StripePaymentsUI (= 24.24.0)
+    - StripeUICore (= 24.24.0)
+  - stripe-react-native (0.53.1):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1711,15 +1711,15 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - Stripe (~> 24.23.0)
-    - stripe-react-native/NewArch (= 0.53.0)
-    - StripeApplePay (~> 24.23.0)
-    - StripeFinancialConnections (~> 24.23.0)
-    - StripePayments (~> 24.23.0)
-    - StripePaymentSheet (~> 24.23.0)
-    - StripePaymentsUI (~> 24.23.0)
+    - Stripe (~> 24.24.0)
+    - stripe-react-native/NewArch (= 0.53.1)
+    - StripeApplePay (~> 24.24.0)
+    - StripeFinancialConnections (~> 24.24.0)
+    - StripePayments (~> 24.24.0)
+    - StripePaymentSheet (~> 24.24.0)
+    - StripePaymentsUI (~> 24.24.0)
     - Yoga
-  - stripe-react-native/NewArch (0.53.0):
+  - stripe-react-native/NewArch (0.53.1):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1739,14 +1739,14 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - Stripe (~> 24.23.0)
-    - StripeApplePay (~> 24.23.0)
-    - StripeFinancialConnections (~> 24.23.0)
-    - StripePayments (~> 24.23.0)
-    - StripePaymentSheet (~> 24.23.0)
-    - StripePaymentsUI (~> 24.23.0)
+    - Stripe (~> 24.24.0)
+    - StripeApplePay (~> 24.24.0)
+    - StripeFinancialConnections (~> 24.24.0)
+    - StripePayments (~> 24.24.0)
+    - StripePaymentSheet (~> 24.24.0)
+    - StripePaymentsUI (~> 24.24.0)
     - Yoga
-  - stripe-react-native/Tests (0.53.0):
+  - stripe-react-native/Tests (0.53.1):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1766,35 +1766,35 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - Stripe (~> 24.23.0)
-    - StripeApplePay (~> 24.23.0)
-    - StripeFinancialConnections (~> 24.23.0)
-    - StripePayments (~> 24.23.0)
-    - StripePaymentSheet (~> 24.23.0)
-    - StripePaymentsUI (~> 24.23.0)
+    - Stripe (~> 24.24.0)
+    - StripeApplePay (~> 24.24.0)
+    - StripeFinancialConnections (~> 24.24.0)
+    - StripePayments (~> 24.24.0)
+    - StripePaymentSheet (~> 24.24.0)
+    - StripePaymentsUI (~> 24.24.0)
     - Yoga
-  - StripeApplePay (24.23.0):
-    - StripeCore (= 24.23.0)
-  - StripeCore (24.23.0)
-  - StripeFinancialConnections (24.23.0):
-    - StripeCore (= 24.23.0)
-    - StripeUICore (= 24.23.0)
-  - StripePayments (24.23.0):
-    - StripeCore (= 24.23.0)
-    - StripePayments/Stripe3DS2 (= 24.23.0)
-  - StripePayments/Stripe3DS2 (24.23.0):
-    - StripeCore (= 24.23.0)
-  - StripePaymentSheet (24.23.0):
-    - StripeApplePay (= 24.23.0)
-    - StripeCore (= 24.23.0)
-    - StripePayments (= 24.23.0)
-    - StripePaymentsUI (= 24.23.0)
-  - StripePaymentsUI (24.23.0):
-    - StripeCore (= 24.23.0)
-    - StripePayments (= 24.23.0)
-    - StripeUICore (= 24.23.0)
-  - StripeUICore (24.23.0):
-    - StripeCore (= 24.23.0)
+  - StripeApplePay (24.24.0):
+    - StripeCore (= 24.24.0)
+  - StripeCore (24.24.0)
+  - StripeFinancialConnections (24.24.0):
+    - StripeCore (= 24.24.0)
+    - StripeUICore (= 24.24.0)
+  - StripePayments (24.24.0):
+    - StripeCore (= 24.24.0)
+    - StripePayments/Stripe3DS2 (= 24.24.0)
+  - StripePayments/Stripe3DS2 (24.24.0):
+    - StripeCore (= 24.24.0)
+  - StripePaymentSheet (24.24.0):
+    - StripeApplePay (= 24.24.0)
+    - StripeCore (= 24.24.0)
+    - StripePayments (= 24.24.0)
+    - StripePaymentsUI (= 24.24.0)
+  - StripePaymentsUI (24.24.0):
+    - StripeCore (= 24.24.0)
+    - StripePayments (= 24.24.0)
+    - StripeUICore (= 24.24.0)
+  - StripeUICore (24.24.0):
+    - StripeCore (= 24.24.0)
   - Yoga (0.0.0)
 
 DEPENDENCIES:
@@ -2109,15 +2109,15 @@ SPEC CHECKSUMS:
   RNCPicker: cfb51a08c6e10357d9a65832e791825b0747b483
   RNScreens: 0d4cb9afe052607ad0aa71f645a88bb7c7f2e64c
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
-  Stripe: 2306d32be47f9632942f3385e9c2bad31d6ddcab
-  stripe-react-native: 5250f17648f652dd5c570e76bd8b7bca579a238d
-  StripeApplePay: edf515972406df57bd860d5f00416a552be6a450
-  StripeCore: ff6173a175acc7c4c25acc7cfabbade717dbc4de
-  StripeFinancialConnections: 34a90401657135130fe5bfd93db5ac27c001ec65
-  StripePayments: 9efe7bd14cae1821dba13997e12e070dfb38610b
-  StripePaymentSheet: 1c04531a7eff2c721736fc7d433ee342a59fae0e
-  StripePaymentsUI: 1cd35149b88de69c3364b4d1d4bb28c653c7d626
-  StripeUICore: 539e667170d9c5c86c02a9c63f320d132c7c1b73
+  Stripe: 64849211528185870444d8ca696eeab40bdcacce
+  stripe-react-native: bc53c1a2eaf455bd9065b4dbe64c5a6707a4b2a9
+  StripeApplePay: 1e65bbf41e4844a02b0dff60cb56c8d37261e53d
+  StripeCore: 63f2337bceb55db0095c5e29a61cfad33a61963c
+  StripeFinancialConnections: 2b2b2c9c0ed71ad22a038b3a4caf73ca5128dae2
+  StripePayments: 7a994f28bedd16bc0e4eb9091d2811425adaa6af
+  StripePaymentSheet: 82477c8b000ba6446d2294106e3f4f96fc043ea8
+  StripePaymentsUI: 8302dfe8094abb32cd2e0998a5b601164216d9db
+  StripeUICore: defd03b91fd5fb2838c59284e697b8da9cef0db0
   Yoga: afd04ff05ebe0121a00c468a8a3c8080221cb14c
 
 PODFILE CHECKSUM: a2ed964678852d4cc306ff4add3e4fa90be77ea6

example/src/screens/PaymentSheetAppearance.ts

@@ -1,7 +1,20 @@
 import { Platform } from 'react-native';
-import type { PaymentSheet } from '@stripe/stripe-react-native';
+import {
+  NavigationBarStyle,
+  type PaymentSheet,
+} from '@stripe/stripe-react-native';
 
-const appearance: PaymentSheet.AppearanceParams = {
+const appearance: PaymentSheet.AppearanceParams = {};
+
+const liquidGlassAppearance: PaymentSheet.AppearanceParams = {
+  applyLiquidGlass: true,
+};
+
+const liquidGlassNavigationOnlyAppearance: PaymentSheet.AppearanceParams = {
+  navigationBarStyle: NavigationBarStyle.Glass,
+};
+
+const customAppearance: PaymentSheet.AppearanceParams = {
   font: {
     scale: 1.1,
     family: Platform.OS === 'android' ? 'macondoregular' : 'Macondo-Regular',
@@ -64,3 +77,9 @@ const appearance: PaymentSheet.AppearanceParams = {
 };
 
 export default appearance;
+export {
+  appearance,
+  liquidGlassAppearance,
+  liquidGlassNavigationOnlyAppearance,
+  customAppearance,
+};

example/src/screens/PaymentsUICompleteScreen.tsx

@@ -19,14 +19,29 @@ import CustomerSessionSwitch from '../components/CustomerSessionSwitch';
 import PaymentScreen from '../components/PaymentScreen';
 import { API_URL } from '../Config';
 import { getClientSecretParams } from '../helpers';
-import appearance from './PaymentSheetAppearance';
+import {
+  appearance,
+  liquidGlassAppearance,
+  liquidGlassNavigationOnlyAppearance,
+  customAppearance,
+} from './PaymentSheetAppearance';
+import { Platform, View, Text, TouchableOpacity } from 'react-native';
+
+enum AppearanceSettings {
+  default = `default`,
+  glass = 'glass',
+  glassNavigation = 'glassNavigation',
+  custom = 'custom',
+}
 
 export default function PaymentsUICompleteScreen() {
   const { initPaymentSheet, presentPaymentSheet, resetPaymentSheetCustomer } =
     useStripe();
   const [paymentSheetEnabled, setPaymentSheetEnabled] = useState(false);
   const [loading, setLoading] = useState(false);
   const [addressSheetVisible, setAddressSheetVisible] = useState(false);
+  const [appearanceSettings, setAppearanceSettings] =
+    useState<AppearanceSettings>(AppearanceSettings.default);
   const [clientSecret, setClientSecret] = useState<string>();
 
   const [customerKeyType, setCustomerKeyType] = useState<string>(
@@ -63,7 +78,6 @@ export default function PaymentsUICompleteScreen() {
       };
     }
   };
-
   const openPaymentSheet = async () => {
     if (!clientSecret) {
       return;
@@ -99,6 +113,19 @@ export default function PaymentsUICompleteScreen() {
     setLoading(false);
   };
 
+  const getAppearanceForSetting = (setting: AppearanceSettings) => {
+    switch (setting) {
+      case AppearanceSettings.default:
+        return appearance;
+      case AppearanceSettings.glass:
+        return liquidGlassAppearance;
+      case AppearanceSettings.glassNavigation:
+        return liquidGlassNavigationOnlyAppearance;
+      case AppearanceSettings.custom:
+        return customAppearance;
+    }
+  };
+
   const initialisePaymentSheet = useCallback(
     async (shippingDetails?: AddressDetails) => {
       const { paymentIntent, customer, ...remainingParams } =
@@ -139,7 +166,7 @@ export default function PaymentsUICompleteScreen() {
         defaultBillingDetails: billingDetails,
         defaultShippingDetails: shippingDetails,
         allowsDelayedPaymentMethods: true,
-        appearance,
+        appearance: getAppearanceForSetting(appearanceSettings),
         primaryButtonLabel: 'purchase!',
         paymentMethodLayout: PaymentMethodLayout.Automatic,
         removeSavedPaymentMethodMessage: 'remove this payment method?',
@@ -206,7 +233,7 @@ export default function PaymentsUICompleteScreen() {
         );
       }
     },
-    [customerKeyType, initPaymentSheet]
+    [customerKeyType, appearanceSettings, initPaymentSheet]
   );
 
   const toggleCustomerKeyType = (value: boolean) => {
@@ -242,6 +269,67 @@ export default function PaymentsUICompleteScreen() {
         onValueChange={toggleCustomerKeyType}
         value={customerKeyType === 'customer_session'}
       />
+      {Platform.OS === 'ios' && (
+        <View style={{ marginVertical: 10 }}>
+          <Text style={{ marginBottom: 8, fontWeight: '500', marginLeft: 10 }}>
+            Appearance Style
+          </Text>
+          <View
+            style={{
+              flexDirection: 'row',
+              borderRadius: 8,
+              borderWidth: 1,
+              borderColor: '#ccc',
+              overflow: 'hidden',
+            }}
+          >
+            {[
+              { title: 'Default', value: AppearanceSettings.default },
+              { title: 'Glass', value: AppearanceSettings.glass },
+              { title: 'Glass Nav', value: AppearanceSettings.glassNavigation },
+              { title: 'Custom', value: AppearanceSettings.custom },
+            ].map((option) => (
+              <TouchableOpacity
+                key={option.title}
+                style={{
+                  flex: 1,
+                  padding: 10,
+                  backgroundColor:
+                    appearanceSettings === option.value
+                      ? '#007AFF'
+                      : 'transparent',
+                  alignItems: 'center',
+                }}
+                onPress={() => {
+                  setAppearanceSettings(option.value);
+                  (async () => {
+                    setLoading(true);
+                    try {
+                      await initialisePaymentSheet();
+                    } catch (error) {
+                      console.error('Error initializing payment sheet:', error);
+                    } finally {
+                      setLoading(false);
+                    }
+                  })();
+                }}
+              >
+                <Text
+                  style={{
+                    fontSize: 13,
+                    color:
+                      appearanceSettings === option.value ? 'white' : '#333',
+                    fontWeight:
+                      appearanceSettings === option.value ? '600' : 'normal',
+                  }}
+                >
+                  {option.title}
+                </Text>
+              </TouchableOpacity>
+            ))}
+          </View>
+        </View>
+      )}
       <Button
         variant="primary"
         loading={loading}

ios/PaymentSheetAppearance.swift

@@ -11,6 +11,19 @@ internal class PaymentSheetAppearance {
         var appearance = PaymentSheet.Appearance()
         guard let userParams = userParams else { return appearance }
 
+        if #available(iOS 26.0, *), let applyLiquidGlass = userParams[PaymentSheetAppearanceKeys.APPLY_LIQUID_GLASS] as? Bool,
+           applyLiquidGlass {
+            appearance.applyLiquidGlass()
+        }
+
+        if #available(iOS 26.0, *), let navigationBarStyle = userParams[PaymentSheetAppearanceKeys.NAVIGATION_BAR_STYLE] as? String {
+            if navigationBarStyle == "plain" {
+                appearance.navigationBarStyle = .plain
+            } else if navigationBarStyle == "glass" {
+                appearance.navigationBarStyle = .glass
+            }
+        }
+
         if let fontParams = userParams[PaymentSheetAppearanceKeys.FONT] as? NSDictionary {
             appearance.font = try buildFont(params: fontParams)
         }
@@ -426,6 +439,8 @@ private struct PaymentSheetAppearanceKeys {
     static let BLUR_RADIUS = "blurRadius"
     static let X = "x"
     static let Y = "y"
+    static let APPLY_LIQUID_GLASS = "applyLiquidGlass"
+    static let NAVIGATION_BAR_STYLE = "navigationBarStyle"
 
     static let PRIMARY_BUTTON = "primaryButton"
     static let TEXT = "text"