feat: add call to action button label configuration to initPaymentSheet

CHANGELOG.md

@@ -4,17 +4,21 @@
 
 ### Breaking changes
 
+- This library now supports iOS 13 and up, due to `stripe-ios` increasing the deployment target. If you would like to build for iOS 12, please continue to use `@stripe/stripe-react-native@0.19.0`. [#1190](https://github.com/stripe/stripe-react-native/pull/1190)
+
 ### New features
 
 - Added [Link](https://stripe.com/docs/payments/link) support in Payment Sheet. [#1176](https://github.com/stripe/stripe-react-native/pull/1176)
 - Added the `resetPaymentSheetCustomer` method to clear persisted authentication state in the PaymentSheet. [#1176](https://github.com/stripe/stripe-react-native/pull/1176)
 - Added `preferredNetwork` and `availableNetworks` fields to the `CardResult` payment method. [#1176](https://github.com/stripe/stripe-react-native/pull/1176)
 - Added support for custom fonts to `CardForm` and `CardView` on Android. [#1150](https://github.com/stripe/stripe-react-native/pull/1150)
+- Added support for customizing the call to action button label in Payment Sheet by providing the `primaryButtonLabel` property to `initPaymentSheet()`. [#1190](https://github.com/stripe/stripe-react-native/pull/1190)
 
 ## Fixes
 
 - Fixed an issue on iOS where `confirmSetupIntent` would throw an error if the `Card` payment method was provided with the `paymentMethodId` parameter. [#1151](https://github.com/stripe/stripe-react-native/pull/1151)
 - Upgraded `stripe-android` to 20.15.+. [#1176](https://github.com/stripe/stripe-react-native/pull/1176)
+- Upgraded `stripe-ios` to 23.1.+. [#1190](https://github.com/stripe/stripe-react-native/pull/1190)
 - Fixed `FinancialConnections.Subcategory` and `FinancialConnections.Permission` types to be camel-case instead of snake case. [#1176](https://github.com/stripe/stripe-react-native/pull/1176)
 - Fixed an issue with Financial Connections on iOS where the app wouldn't properly redirect back after authentication. [#1178](https://github.com/stripe/stripe-react-native/pull/1178)
 - Fixed `borderWidth` and `borderRadius` for `<CardField />` and `CardForm />` was inconsistent across iOS and Android. [#1182](https://github.com/stripe/stripe-react-native/pull/1182)

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

@@ -56,6 +56,7 @@ class PaymentSheetFragment(
       initPromise.resolve(createError(ErrorType.Failed.toString(), "merchantDisplayName cannot be empty or null."))
       return
     }
+    val primaryButtonLabel = arguments?.getString("primaryButtonLabel")
     val customerId = arguments?.getString("customerId").orEmpty()
     val customerEphemeralKeySecret = arguments?.getString("customerEphemeralKeySecret").orEmpty()
     val googlePayConfig = buildGooglePayConfig(arguments?.getBundle("googlePay"))
@@ -126,7 +127,8 @@ class PaymentSheetFragment(
         ephemeralKeySecret = customerEphemeralKeySecret
       ) else null,
       googlePay = googlePayConfig,
-      appearance = appearance
+      appearance = appearance,
+      primaryButtonLabel = primaryButtonLabel
     )
 
     if (arguments?.getBoolean("customFlow") == true) {

e2e/FinancialConnections.test.ts

@@ -53,7 +53,10 @@ describe('Financial Connections', () => {
 });
 
 function authorizeBankAccount() {
-  driver.pause(5000);
+  driver.waitUntil(() => getAllWebviewContexts().length > 0, {
+    timeout: 10000,
+    interval: 1000,
+  });
   const webviewContexts = getAllWebviewContexts();
   for (const context of webviewContexts) {
     try {

e2e/buyNowPayLater.test.ts

@@ -49,6 +49,10 @@ describe('Payment scenarios with redirects', () => {
 
     BasicPaymentScreen.pay({ email: 'test@stripe.com' });
     driver.pause(10000);
+    driver.waitUntil(() => getAllWebviewContexts().length > 0, {
+      timeout: 10000,
+      interval: 1000,
+    });
     const webviewContexts = getAllWebviewContexts();
     expect(webviewContexts.length).toBeGreaterThan(0);
   });

e2e/screenObject/BasicPaymentScreen.ts

@@ -73,7 +73,10 @@ class BasicPaymentScreen {
   }
 
   authorizeACH() {
-    driver.pause(5000);
+    driver.waitUntil(() => getAllWebviewContexts().length > 0, {
+      timeout: 10000,
+      interval: 1000,
+    });
     const webviewContexts = getAllWebviewContexts();
     for (const context of webviewContexts) {
       try {
@@ -132,9 +135,6 @@ export function getAllWebviewContexts(): string[] {
   const webviewContext = allContexts.filter((contextName) =>
     contextName.toLowerCase().includes('webview')
   );
-  if (!webviewContext.length) {
-    throw new Error('No webview context was found.');
-  }
 
   return webviewContext.sort((a, b) => {
     if (a.includes('stripe') && !b.includes('stripe')) {

example/ios/Podfile

@@ -1,4 +1,4 @@
-platform :ios, '12.4'
+platform :ios, '13.0'
 
 install! 'cocoapods', deterministic_uuids: false
 

example/ios/Podfile.lock

@@ -368,31 +368,50 @@ PODS:
     - React-Core
     - React-RCTImage
   - SocketRocket (0.6.0)
-  - Stripe (22.8.4):
-    - Stripe/Stripe3DS2 (= 22.8.4)
-    - StripeApplePay (= 22.8.4)
-    - StripeCore (= 22.8.4)
-    - StripeUICore (= 22.8.4)
+  - Stripe (23.1.0):
+    - StripeApplePay (= 23.1.0)
+    - StripeCore (= 23.1.0)
+    - StripePayments (= 23.1.0)
+    - StripePaymentsUI (= 23.1.0)
+    - StripeUICore (= 23.1.0)
   - stripe-react-native (0.19.0):
     - React-Core
-    - Stripe (~> 22.8.4)
-    - StripeFinancialConnections (~> 22.8.4)
+    - Stripe (~> 23.1.0)
+    - StripeApplePay (~> 23.1.0)
+    - StripeFinancialConnections (~> 23.1.0)
+    - StripePayments (~> 23.1.0)
+    - StripePaymentSheet (~> 23.1.0)
+    - StripePaymentsUI (~> 23.1.0)
   - stripe-react-native/Tests (0.19.0):
     - React-Core
-    - Stripe (~> 22.8.4)
-    - StripeFinancialConnections (~> 22.8.4)
-  - Stripe/Stripe3DS2 (22.8.4):
-    - StripeApplePay (= 22.8.4)
-    - StripeCore (= 22.8.4)
-    - StripeUICore (= 22.8.4)
-  - StripeApplePay (22.8.4):
-    - StripeCore (= 22.8.4)
-  - StripeCore (22.8.4)
-  - StripeFinancialConnections (22.8.4):
-    - StripeCore (= 22.8.4)
-    - StripeUICore (= 22.8.4)
-  - StripeUICore (22.8.4):
-    - StripeCore (= 22.8.4)
+    - Stripe (~> 23.1.0)
+    - StripeApplePay (~> 23.1.0)
+    - StripeFinancialConnections (~> 23.1.0)
+    - StripePayments (~> 23.1.0)
+    - StripePaymentSheet (~> 23.1.0)
+    - StripePaymentsUI (~> 23.1.0)
+  - StripeApplePay (23.1.0):
+    - StripeCore (= 23.1.0)
+  - StripeCore (23.1.0)
+  - StripeFinancialConnections (23.1.0):
+    - StripeCore (= 23.1.0)
+    - StripeUICore (= 23.1.0)
+  - StripePayments (23.1.0):
+    - StripeCore (= 23.1.0)
+    - StripePayments/Stripe3DS2 (= 23.1.0)
+  - StripePayments/Stripe3DS2 (23.1.0):
+    - StripeCore (= 23.1.0)
+  - StripePaymentSheet (23.1.0):
+    - StripeApplePay (= 23.1.0)
+    - StripeCore (= 23.1.0)
+    - StripePayments (= 23.1.0)
+    - StripePaymentsUI (= 23.1.0)
+  - StripePaymentsUI (23.1.0):
+    - StripeCore (= 23.1.0)
+    - StripePayments (= 23.1.0)
+    - StripeUICore (= 23.1.0)
+  - StripeUICore (23.1.0):
+    - StripeCore (= 23.1.0)
   - Yoga (1.14.0)
   - YogaKit (1.18.1):
     - Yoga (~> 1.14)
@@ -482,6 +501,9 @@ SPEC REPOS:
     - StripeApplePay
     - StripeCore
     - StripeFinancialConnections
+    - StripePayments
+    - StripePaymentSheet
+    - StripePaymentsUI
     - StripeUICore
     - YogaKit
 
@@ -614,15 +636,18 @@ SPEC CHECKSUMS:
   RNCPicker: abc646b53a3d28ccfa3232c927a0ca52e0cf024d
   RNScreens: 4a1af06327774490d97342c00aee0c2bafb497b7
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
-  Stripe: 59f6659e8ea413def19c97c57e23f5ec6ea48cf8
-  stripe-react-native: 48ad0866973ed214c3a4424de85b00ed006cf116
-  StripeApplePay: 6e9aebd3d248464836e9fbdaef6e5fb1817d56a6
-  StripeCore: 193f27552fb98108ebfe0df11651fe5f38948305
-  StripeFinancialConnections: 955c345ada7d0dff1a9bd15c4ebc97eacce4ac75
-  StripeUICore: 6a5bbea0164d63bd91000f001903e7901859e1a4
+  Stripe: 6e1b3bbe0224636ee06a7c032d5392be0a10ac0a
+  stripe-react-native: 750cfa646f177126de4c07fd5f09c9aee6ad94dc
+  StripeApplePay: 0c8b29f4914ce260ce85302df58dacbfcee6c2e0
+  StripeCore: 88d19cb8d1f6a10be0af5cff384d77261a0f04a2
+  StripeFinancialConnections: e54978d7450686af6a1532258c04d4721c93a522
+  StripePayments: 25e0303adcaf584efb4617a70a0123553fcd3069
+  StripePaymentSheet: 7ce65414fc5a65ddcabee1571336b2de5f60ec6a
+  StripePaymentsUI: 503d43f56fd5faaed502427ef57e6919759658c8
+  StripeUICore: 3864423d3595403cc9349eedd4911c0d7e251e48
   Yoga: 236056dd74cda4d9d76c20306fd8c20bb087614d
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
-PODFILE CHECKSUM: 17106566f645fc6d606ce750e3389c566170dbf4
+PODFILE CHECKSUM: 4eaaad013a6f099aabc8d8e69940bf881c4db33e
 
 COCOAPODS: 1.11.3

example/ios/StripeSdkExample.xcodeproj/project.pbxproj

@@ -263,18 +263,24 @@
 				"${PODS_ROOT}/Target Support Files/Pods-StripeSdkExample/Pods-StripeSdkExample-resources.sh",
 				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/AccessibilityResources.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/Stripe/Stripe.bundle",
-				"${PODS_CONFIGURATION_BUILD_DIR}/Stripe/Stripe3DS2.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/StripeCore/StripeCore.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/StripeFinancialConnections/StripeFinancialConnections.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/StripePaymentSheet/StripePaymentSheet.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/StripePayments/StripePayments.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/StripePayments/Stripe3DS2.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/StripePaymentsUI/StripePaymentsUI.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/StripeUICore/StripeUICore.bundle",
 			);
 			name = "[CP] Copy Pods Resources";
 			outputPaths = (
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AccessibilityResources.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Stripe.bundle",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Stripe3DS2.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/StripeCore.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/StripeFinancialConnections.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/StripePaymentSheet.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/StripePayments.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Stripe3DS2.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/StripePaymentsUI.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/StripeUICore.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;

example/src/screens/PaymentsUICompleteScreen.tsx

@@ -93,6 +93,7 @@ export default function PaymentsUICompleteScreen() {
       defaultBillingDetails: billingDetails,
       allowsDelayedPaymentMethods: true,
       appearance,
+      primaryButtonLabel: 'purchase! 😃',
     });
     if (!error) {
       setPaymentSheetEnabled(true);

ios/ApplePayUtils.swift

@@ -6,7 +6,7 @@
 //
 
 import Foundation
-import Stripe
+import StripePaymentSheet
 
 class ApplePayUtils {
 

ios/CardFieldView.swift

@@ -9,7 +9,7 @@ class CardFieldView: UIView, STPPaymentCardTextFieldDelegate {
 
     private var cardField = STPPaymentCardTextField()
 
-    public var cardParams: STPPaymentMethodCardParams? = nil
+    public var cardParams: STPPaymentMethodParams? = nil
     public var cardPostalCode: String? = nil
 
     @objc var postalCodeEnabled: Bool = true {
@@ -144,7 +144,7 @@ class CardFieldView: UIView, STPPaymentCardTextFieldDelegate {
                 "expiryYear": textField.expirationYear,
                 "complete": textField.isValid,
                 "brand": Mappers.mapFromCardBrand(brand) ?? NSNull(),
-                "last4": textField.cardParams.last4 ?? "",
+                "last4": textField.paymentMethodParams.card!.last4 ?? "",
                 "validExpiryDate": Mappers.mapFromCardValidationState(state: validExpiryDate),
                 "validCVC": Mappers.mapFromCardValidationState(state: validCVC),
                 "validNumber": Mappers.mapFromCardValidationState(state: validNumber)
@@ -159,7 +159,7 @@ class CardFieldView: UIView, STPPaymentCardTextFieldDelegate {
             onCardChange!(cardData as [AnyHashable : Any])
         }
         if (textField.isValid) {
-            self.cardParams = textField.cardParams
+            self.cardParams = textField.paymentMethodParams
             self.cardPostalCode = textField.postalCode
         } else {
             self.cardParams = nil

ios/Mappers.swift

@@ -1,4 +1,5 @@
 import Stripe
+import StripePaymentSheet
 
 class Mappers {
     class func createResult(_ key: String, _ value: NSDictionary?) -> NSDictionary {

ios/PaymentMethodFactory.swift

@@ -162,11 +162,7 @@ class PaymentMethodFactory {
             return STPPaymentMethodParams(card: methodParams, billingDetails: billingDetailsParams, metadata: nil)
         }
 
-        guard let cardParams = cardFieldView?.cardParams ?? cardFormView?.cardParams else {
-            throw PaymentMethodError.cardPaymentMissingParams
-        }
-
-        if cardFieldView?.cardParams != nil {
+        if let params = cardFieldView?.cardParams as? STPPaymentMethodParams {
             if let postalCode = cardFieldView?.cardPostalCode{
                 if (billingDetailsParams == nil) {
                     let bd = STPPaymentMethodBillingDetails()
@@ -177,8 +173,10 @@ class PaymentMethodFactory {
                     billingDetailsParams?.address?.postalCode = postalCode
                 }
             }
+            params.billingDetails = billingDetailsParams
+            return params
         }
-        if cardFormView?.cardParams != nil {
+        if let params = cardFormView?.cardParams as? STPPaymentMethodCardParams {
             if let address = cardFormView?.cardForm?.cardParams?.billingDetails?.address {
                 if (billingDetailsParams == nil) {
                     let bd = STPPaymentMethodBillingDetails()
@@ -191,9 +189,10 @@ class PaymentMethodFactory {
                     billingDetailsParams?.address?.country = address.country
                 }
             }
+            return STPPaymentMethodParams(card: params, billingDetails: billingDetailsParams, metadata: nil)
         }
 
-        return STPPaymentMethodParams(card: cardParams, billingDetails: billingDetailsParams, metadata: nil)
+        throw PaymentMethodError.cardPaymentMissingParams
     }
 
 

ios/PaymentSheetAppearance.swift

@@ -4,7 +4,7 @@
 //
 //  Created by Charles Cruzan on 5/11/22.
 //
-import Stripe
+import StripePaymentSheet
 
 extension StripeSdk {
     func buildPaymentSheetAppearance(userParams: NSDictionary) throws -> PaymentSheet.Appearance {
@@ -30,8 +30,8 @@ extension StripeSdk {
         return appearance
     }
 
-    private func buildFont(params: NSDictionary) throws -> Stripe.PaymentSheet.Appearance.Font {
-        var font = Stripe.PaymentSheet.Appearance.Font()
+    private func buildFont(params: NSDictionary) throws -> PaymentSheet.Appearance.Font {
+        var font = PaymentSheet.Appearance.Font()
         if let fontName = params[PaymentSheetAppearanceKeys.FAMILY] as? String {
             guard let customFont = UIFont(name: fontName, size: UIFont.systemFontSize) else {
                 throw PaymentSheetAppearanceError.missingFont(fontName)
@@ -42,8 +42,8 @@ extension StripeSdk {
         return font
     }
 
-    private func buildColors(params: NSDictionary) throws -> Stripe.PaymentSheet.Appearance.Colors {
-        var colors = Stripe.PaymentSheet.Appearance.Colors()
+    private func buildColors(params: NSDictionary) throws -> PaymentSheet.Appearance.Colors {
+        var colors = PaymentSheet.Appearance.Colors()
 
         if (params.object(forKey: PaymentSheetAppearanceKeys.LIGHT) != nil && params.object(forKey: PaymentSheetAppearanceKeys.DARK) == nil ||
             params.object(forKey: PaymentSheetAppearanceKeys.DARK) != nil && params.object(forKey: PaymentSheetAppearanceKeys.LIGHT) == nil) {

ios/StripeSdk.swift

@@ -1,5 +1,6 @@
 import PassKit
 import Stripe
+import StripePaymentSheet
 import StripeFinancialConnections
 
 @objc(StripeSdk)
@@ -77,6 +78,8 @@ class StripeSdk: RCTEventEmitter, STPApplePayContextDelegate, STPBankSelectionVi
                           rejecter reject: @escaping RCTPromiseRejectBlock) -> Void  {
         var configuration = PaymentSheet.Configuration()
         self.paymentSheetFlowController = nil
+
+        configuration.primaryButtonLabel = params["primaryButtonLabel"] as? String
 
         if let appearanceParams = params["appearance"] as? NSDictionary {
             do {
@@ -673,17 +676,22 @@ class StripeSdk: RCTEventEmitter, STPApplePayContextDelegate, STPBankSelectionVi
         resolver resolve: @escaping RCTPromiseResolveBlock,
         rejecter reject: @escaping RCTPromiseRejectBlock
     ) -> Void {
-        guard let cardParams = cardFieldView?.cardParams ?? cardFormView?.cardParams else {
+        let address = params["address"] as? NSDictionary
+        let cardSourceParams = STPCardParams()
+        if let params = cardFieldView?.cardParams as? STPPaymentMethodParams {
+            cardSourceParams.number = params.card!.number
+            cardSourceParams.cvc = params.card!.cvc
+            cardSourceParams.expMonth = UInt(truncating: params.card!.expMonth ?? 0)
+            cardSourceParams.expYear = UInt(truncating: params.card!.expYear ?? 0)
+        } else if let params = cardFormView?.cardParams as? STPPaymentMethodCardParams {
+            cardSourceParams.number = params.number
+            cardSourceParams.cvc = params.cvc
+            cardSourceParams.expMonth = UInt(truncating: params.expMonth ?? 0)
+            cardSourceParams.expYear = UInt(truncating: params.expYear ?? 0)
+        } else {
             resolve(Errors.createError(ErrorType.Failed, "Card details not complete"))
             return
         }
-
-        let address = params["address"] as? NSDictionary
-        let cardSourceParams = STPCardParams()
-        cardSourceParams.number = cardParams.number
-        cardSourceParams.cvc = cardParams.cvc
-        cardSourceParams.expMonth = UInt(truncating: cardParams.expMonth ?? 0)
-        cardSourceParams.expYear = UInt(truncating: cardParams.expYear ?? 0)
         cardSourceParams.address = Mappers.mapToAddress(address: address)
         cardSourceParams.name = params["name"] as? String
         cardSourceParams.currency = params["currency"] as? String