From ebc3e9361fb325c36e5f85c3be12f8adc31b1730 Mon Sep 17 00:00:00 2001 From: Tyler Clawson Date: Wed, 30 Oct 2024 17:11:34 -0400 Subject: [PATCH 1/3] Implement vertical mode --- android/gradle.properties | 2 +- .../PaymentSheetFragment.kt | 12 +++ example/android/app/build.gradle | 18 ++++ example/ios/Podfile.lock | 98 +++++++++---------- .../src/screens/PaymentsUICompleteScreen.tsx | 2 + ios/StripeSdk+PaymentSheet.swift | 9 ++ src/types/PaymentSheet.ts | 24 +++++ src/types/index.ts | 1 + stripe-react-native.podspec | 2 +- 9 files changed, 117 insertions(+), 51 deletions(-) diff --git a/android/gradle.properties b/android/gradle.properties index 3f1ecff88..a2d76a93e 100644 --- a/android/gradle.properties +++ b/android/gradle.properties @@ -1,3 +1,3 @@ StripeSdk_kotlinVersion=1.8.0 # Keep StripeSdk_stripeVersion in sync with https://github.com/stripe/stripe-identity-react-native/blob/main/android/gradle.properties -StripeSdk_stripeVersion=20.52.+ +StripeSdk_stripeVersion=20.53.+ diff --git a/android/src/main/java/com/reactnativestripesdk/PaymentSheetFragment.kt b/android/src/main/java/com/reactnativestripesdk/PaymentSheetFragment.kt index 15b4ea591..f7245bcbc 100644 --- a/android/src/main/java/com/reactnativestripesdk/PaymentSheetFragment.kt +++ b/android/src/main/java/com/reactnativestripesdk/PaymentSheetFragment.kt @@ -209,6 +209,10 @@ class PaymentSheetFragment( configurationBuilder.paymentMethodOrder(it) } + configurationBuilder.paymentMethodLayout( + mapToPaymentMethodLayout(arguments?.getString("paymentMethodLayout")) + ) + paymentSheetConfiguration = configurationBuilder.build() if (arguments?.getBoolean("customFlow") == true) { @@ -490,6 +494,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 diff --git a/example/android/app/build.gradle b/example/android/app/build.gradle index 521f63427..2009f427a 100644 --- a/example/android/app/build.gradle +++ b/example/android/app/build.gradle @@ -283,6 +283,24 @@ dependencies { } } // END TODO + + // TODO: Remove after upgrading react-native-screens + implementation ("androidx.lifecycle:lifecycle-livedata-core:2.8.7") + { + version { + strictly '2.7.0' + } + } + // END TODO + + // TODO: Remove after upgrading react-native-screens + implementation ("androidx.fragment:fragment-ktx:1.8.5") { + version { + strictly '1.6.2' + } + } + // END TODO + implementation fileTree(dir: "libs", include: ["*.jar"]) //noinspection GradleDynamicVersion implementation "com.facebook.react:react-native:+" // From node_modules diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock index 6e68ab586..96178ee82 100644 --- a/example/ios/Podfile.lock +++ b/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 diff --git a/example/src/screens/PaymentsUICompleteScreen.tsx b/example/src/screens/PaymentsUICompleteScreen.tsx index 5c6567eaa..140ee215b 100644 --- a/example/src/screens/PaymentsUICompleteScreen.tsx +++ b/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, diff --git a/ios/StripeSdk+PaymentSheet.swift b/ios/StripeSdk+PaymentSheet.swift index 99ba2b784..f6dfcbf57 100644 --- a/ios/StripeSdk+PaymentSheet.swift +++ b/ios/StripeSdk+PaymentSheet.swift @@ -116,6 +116,15 @@ extension StripeSdk { if let paymentMethodOrder = params["paymentMethodOrder"] as? Array { 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) } diff --git a/src/types/PaymentSheet.ts b/src/types/PaymentSheet.ts index 9a22b0e0a..62b5d48c6 100644 --- a/src/types/PaymentSheet.ts +++ b/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', +} diff --git a/src/types/index.ts b/src/types/index.ts index 6cb711239..b046f8e55 100644 --- a/src/types/index.ts +++ b/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 diff --git a/stripe-react-native.podspec b/stripe-react-native.podspec index 758f09e19..de84d1e01 100644 --- a/stripe-react-native.podspec +++ b/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' From 9996902538734764c8a36d484a87030eb8b022a0 Mon Sep 17 00:00:00 2001 From: Tyler Clawson Date: Thu, 31 Oct 2024 17:32:04 -0400 Subject: [PATCH 2/3] Downgrade stripe-android to 20.52.0 --- android/gradle.properties | 2 +- .../PaymentSheetFragment.kt | 1 + example/android/app/build.gradle | 17 ----------------- 3 files changed, 2 insertions(+), 18 deletions(-) diff --git a/android/gradle.properties b/android/gradle.properties index a2d76a93e..3f1ecff88 100644 --- a/android/gradle.properties +++ b/android/gradle.properties @@ -1,3 +1,3 @@ StripeSdk_kotlinVersion=1.8.0 # Keep StripeSdk_stripeVersion in sync with https://github.com/stripe/stripe-identity-react-native/blob/main/android/gradle.properties -StripeSdk_stripeVersion=20.53.+ +StripeSdk_stripeVersion=20.52.+ diff --git a/android/src/main/java/com/reactnativestripesdk/PaymentSheetFragment.kt b/android/src/main/java/com/reactnativestripesdk/PaymentSheetFragment.kt index f7245bcbc..cbc6e0486 100644 --- a/android/src/main/java/com/reactnativestripesdk/PaymentSheetFragment.kt +++ b/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() diff --git a/example/android/app/build.gradle b/example/android/app/build.gradle index 2009f427a..4bf45739d 100644 --- a/example/android/app/build.gradle +++ b/example/android/app/build.gradle @@ -284,23 +284,6 @@ dependencies { } // END TODO - // TODO: Remove after upgrading react-native-screens - implementation ("androidx.lifecycle:lifecycle-livedata-core:2.8.7") - { - version { - strictly '2.7.0' - } - } - // END TODO - - // TODO: Remove after upgrading react-native-screens - implementation ("androidx.fragment:fragment-ktx:1.8.5") { - version { - strictly '1.6.2' - } - } - // END TODO - implementation fileTree(dir: "libs", include: ["*.jar"]) //noinspection GradleDynamicVersion implementation "com.facebook.react:react-native:+" // From node_modules From f96f0411ef08ac9a5beb6dbe75584c59d13fd585 Mon Sep 17 00:00:00 2001 From: tjclawson-stripe <163896025+tjclawson-stripe@users.noreply.github.com> Date: Fri, 1 Nov 2024 14:32:08 -0400 Subject: [PATCH 3/3] Remove blank line --- example/android/app/build.gradle | 1 - 1 file changed, 1 deletion(-) diff --git a/example/android/app/build.gradle b/example/android/app/build.gradle index 4bf45739d..521f63427 100644 --- a/example/android/app/build.gradle +++ b/example/android/app/build.gradle @@ -283,7 +283,6 @@ dependencies { } } // END TODO - implementation fileTree(dir: "libs", include: ["*.jar"]) //noinspection GradleDynamicVersion implementation "com.facebook.react:react-native:+" // From node_modules