Implement vertical mode

android/src/main/java/com/reactnativestripesdk/PaymentSheetFragment.kt

@@ -55,6 +55,7 @@ class PaymentSheetFragment(
     }
   }
 
+  @OptIn(ExperimentalPaymentMethodLayoutApi::class)
   override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
     super.onViewCreated(view, savedInstanceState)
     val merchantDisplayName = arguments?.getString("merchantDisplayName").orEmpty()
@@ -209,6 +210,10 @@ class PaymentSheetFragment(
       configurationBuilder.paymentMethodOrder(it)
     }
 
+    configurationBuilder.paymentMethodLayout(
+      mapToPaymentMethodLayout(arguments?.getString("paymentMethodLayout"))
+    )
+
     paymentSheetConfiguration = configurationBuilder.build()
 
     if (arguments?.getBoolean("customFlow") == true) {
@@ -490,6 +495,14 @@ fun mapToCollectionMode(str: String?): PaymentSheet.BillingDetailsCollectionConf
   }
 }
 
+fun mapToPaymentMethodLayout(str: String?): PaymentSheet.PaymentMethodLayout {
+  return when (str) {
+    "Horizontal" -> PaymentSheet.PaymentMethodLayout.Horizontal
+    "Vertical" -> PaymentSheet.PaymentMethodLayout.Vertical
+    else -> PaymentSheet.PaymentMethodLayout.Automatic
+  }
+}
+
 fun mapToAddressCollectionMode(str: String?): PaymentSheet.BillingDetailsCollectionConfiguration.AddressCollectionMode {
   return when (str) {
     "automatic" -> PaymentSheet.BillingDetailsCollectionConfiguration.AddressCollectionMode.Automatic

example/ios/Podfile.lock

@@ -299,50 +299,50 @@ PODS:
   - RNScreens (3.29.0):
     - React-Core
     - React-RCTImage
-  - Stripe (23.30.0):
-    - StripeApplePay (= 23.30.0)
-    - StripeCore (= 23.30.0)
-    - StripePayments (= 23.30.0)
-    - StripePaymentsUI (= 23.30.0)
-    - StripeUICore (= 23.30.0)
+  - Stripe (23.32.0):
+    - StripeApplePay (= 23.32.0)
+    - StripeCore (= 23.32.0)
+    - StripePayments (= 23.32.0)
+    - StripePaymentsUI (= 23.32.0)
+    - StripeUICore (= 23.32.0)
   - stripe-react-native (0.38.6):
     - React-Core
-    - Stripe (~> 23.30.0)
-    - StripeApplePay (~> 23.30.0)
-    - StripeFinancialConnections (~> 23.30.0)
-    - StripePayments (~> 23.30.0)
-    - StripePaymentSheet (~> 23.30.0)
-    - StripePaymentsUI (~> 23.30.0)
+    - Stripe (~> 23.32.0)
+    - StripeApplePay (~> 23.32.0)
+    - StripeFinancialConnections (~> 23.32.0)
+    - StripePayments (~> 23.32.0)
+    - StripePaymentSheet (~> 23.32.0)
+    - StripePaymentsUI (~> 23.32.0)
   - stripe-react-native/Tests (0.38.6):
     - React-Core
-    - Stripe (~> 23.30.0)
-    - StripeApplePay (~> 23.30.0)
-    - StripeFinancialConnections (~> 23.30.0)
-    - StripePayments (~> 23.30.0)
-    - StripePaymentSheet (~> 23.30.0)
-    - StripePaymentsUI (~> 23.30.0)
-  - StripeApplePay (23.30.0):
-    - StripeCore (= 23.30.0)
-  - StripeCore (23.30.0)
-  - StripeFinancialConnections (23.30.0):
-    - StripeCore (= 23.30.0)
-    - StripeUICore (= 23.30.0)
-  - StripePayments (23.30.0):
-    - StripeCore (= 23.30.0)
-    - StripePayments/Stripe3DS2 (= 23.30.0)
-  - StripePayments/Stripe3DS2 (23.30.0):
-    - StripeCore (= 23.30.0)
-  - StripePaymentSheet (23.30.0):
-    - StripeApplePay (= 23.30.0)
-    - StripeCore (= 23.30.0)
-    - StripePayments (= 23.30.0)
-    - StripePaymentsUI (= 23.30.0)
-  - StripePaymentsUI (23.30.0):
-    - StripeCore (= 23.30.0)
-    - StripePayments (= 23.30.0)
-    - StripeUICore (= 23.30.0)
-  - StripeUICore (23.30.0):
-    - StripeCore (= 23.30.0)
+    - Stripe (~> 23.32.0)
+    - StripeApplePay (~> 23.32.0)
+    - StripeFinancialConnections (~> 23.32.0)
+    - StripePayments (~> 23.32.0)
+    - StripePaymentSheet (~> 23.32.0)
+    - StripePaymentsUI (~> 23.32.0)
+  - StripeApplePay (23.32.0):
+    - StripeCore (= 23.32.0)
+  - StripeCore (23.32.0)
+  - StripeFinancialConnections (23.32.0):
+    - StripeCore (= 23.32.0)
+    - StripeUICore (= 23.32.0)
+  - StripePayments (23.32.0):
+    - StripeCore (= 23.32.0)
+    - StripePayments/Stripe3DS2 (= 23.32.0)
+  - StripePayments/Stripe3DS2 (23.32.0):
+    - StripeCore (= 23.32.0)
+  - StripePaymentSheet (23.32.0):
+    - StripeApplePay (= 23.32.0)
+    - StripeCore (= 23.32.0)
+    - StripePayments (= 23.32.0)
+    - StripePaymentsUI (= 23.32.0)
+  - StripePaymentsUI (23.32.0):
+    - StripeCore (= 23.32.0)
+    - StripePayments (= 23.32.0)
+    - StripeUICore (= 23.32.0)
+  - StripeUICore (23.32.0):
+    - StripeCore (= 23.32.0)
   - Yoga (1.14.0)
 
 DEPENDENCIES:
@@ -511,15 +511,15 @@ SPEC CHECKSUMS:
   RNCMaskedView: bc0170f389056201c82a55e242e5d90070e18e5a
   RNCPicker: 0bf8ef8f7800524f32d2bb2a8bcadd53eda0ecd1
   RNScreens: fa9b582d85ae5d62c91c66003b5278458fed7aaa
-  Stripe: 9757efc154de1d9615cbea4836d590bc4034d3a4
-  stripe-react-native: 99b3cc2fae5a53f0ab1d9949ff19ae2aaba73641
-  StripeApplePay: ca33933601302742623762157d587b79b942d073
-  StripeCore: 2af250a2366ff2bbf64d4243c5f9bbf2a98b2aaf
-  StripeFinancialConnections: 3ab1ef6182ec44e71c29e9a2100b663f9713ac20
-  StripePayments: 658a16bd34d20c8185aa281866227b9e1743300e
-  StripePaymentSheet: eac031f76d7fbb4f52df9b9c39be5be671ca4c07
-  StripePaymentsUI: 7d7cffb2ecfc0d6b5ac3a4488c02893a5ff6cc77
-  StripeUICore: bb102d453b1e1a10a37f810bc0a9aa0675fb17fd
+  Stripe: d546a79759fb2b0983076d2551096b91d032693a
+  stripe-react-native: f72717815a4eba2b584518cc16aa86c844e97fc2
+  StripeApplePay: fd4aeaa8af1ebbfe5e38390ef7b4607f66494f80
+  StripeCore: 4999b0c234127b28b9e656caa558ba4406ce58b3
+  StripeFinancialConnections: 4e50d2395e74c7637f84fc9d89fa5740b8240f49
+  StripePayments: a1260c9fecdb8640462c1fe70c4e2e17df2ab3a8
+  StripePaymentSheet: 155d402ee01447002d23c982e905ce06e6d7ef66
+  StripePaymentsUI: 2084d4398cb4869b13dd9eac43a00481476b152f
+  StripeUICore: 2c115cc8498f3badc19b4a41b3b1fdac0ae21d41
   Yoga: 8a90b50af67eaa9fe94fd03e550bfeab06096873
 
 PODFILE CHECKSUM: 7b4a5e954edfeed0967520f79be9e773f07d8266

example/src/screens/PaymentsUICompleteScreen.tsx

@@ -9,6 +9,7 @@ import {
   AddressSheet,
   AddressSheetError,
   CardBrand,
+  PaymentMethodLayout,
 } from '@stripe/stripe-react-native';
 import Button from '../components/Button';
 import PaymentScreen from '../components/PaymentScreen';
@@ -137,6 +138,7 @@ export default function PaymentsUICompleteScreen() {
         allowsDelayedPaymentMethods: true,
         appearance,
         primaryButtonLabel: 'purchase!',
+        paymentMethodLayout: PaymentMethodLayout.Automatic,
         removeSavedPaymentMethodMessage: 'remove this payment method?',
         preferredNetworks: [CardBrand.Amex, CardBrand.Visa],
         ...clientSecretParams,

ios/StripeSdk+PaymentSheet.swift

@@ -116,6 +116,15 @@ extension StripeSdk {
         if let paymentMethodOrder = params["paymentMethodOrder"] as? Array<String> {
             configuration.paymentMethodOrder = paymentMethodOrder
         }
+
+        switch params["paymentMethodLayout"] as? String? {
+          case "Horizontal":
+            configuration.paymentMethodLayout = .horizontal
+          case "Vertical":
+            configuration.paymentMethodLayout = .vertical
+          default:
+            configuration.paymentMethodLayout = .automatic
+        }
 
         return (nil, configuration)
     }

src/types/PaymentSheet.ts

@@ -65,6 +65,11 @@ type SetupParamsBase = IntentParams & {
    *  If false, the customer can't delete if they only have one saved payment method remaining.
    */
   allowsRemovalOfLastSavedPaymentMethod?: boolean;
+  /**
+   * Defines the layout orientations available for displaying payment methods in PaymentSheet.
+   * - Note: Defaults to `Automatic` if not set
+   */
+  paymentMethodLayout?: PaymentMethodLayout;
 };
 
 export type SetupParams =
@@ -417,3 +422,22 @@ export type SetupMode = {
   Seealso: https://stripe.com/docs/api/payment_intents/create#create_payment_intent-setup_future_usage */
   setupFutureUsage: FutureUsage;
 };
+
+export enum PaymentMethodLayout {
+  /**
+   * Payment methods are arranged horizontally.
+   * Users can swipe left or right to navigate through different payment methods.
+   */
+  Horizontal = 'Horizontal',
+
+  /**
+   * Payment methods are arranged vertically.
+   * Users can scroll up or down to navigate through different payment methods.
+   */
+  Vertical = 'Vertical',
+
+  /**
+   * This lets Stripe choose the best layout for payment methods in the sheet.
+   */
+  Automatic = 'Automatic',
+}

src/types/index.ts

@@ -46,6 +46,7 @@ export * from './Errors';
 export * from './CustomerSheet';
 export type { Address, BillingDetails, AddressDetails } from './Common';
 export { CardBrand } from './Common';
+export { PaymentMethodLayout } from './PaymentSheet';
 
 /**
  * @ignore

stripe-react-native.podspec

@@ -2,7 +2,7 @@ require 'json'
 
 package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
 # Keep stripe_version in sync with https://github.com/stripe/stripe-identity-react-native/blob/main/stripe-identity-react-native.podspec
-stripe_version = '~> 23.30.0'
+stripe_version = '~> 23.32.0'
 
 Pod::Spec.new do |s|
   s.name         = 'stripe-react-native'