breaking: use a cardDetails prop for AddToWalletButton component

CHANGELOG.md

@@ -1,5 +1,15 @@
 # CHANGELOG
 
+## Unreleased
+
+- [#913](https://github.com/stripe/stripe-react-native/pull/913) BREAKING CHANGE: Changed props for the `<AddToWalletButton />` component. Instead of passing `cardHolderName`, `cardLastFour`, `cardDescription`, and `cardBrand` directly as props, you will instead pass a `cardDetails` prop, which is an object containing the following fields:
+  - `primaryAccountIdentifier`: The `wallet.primary_account_identifier` value from the issued card.
+  - `name`: The card holder name (previously `cardHolderName`).
+  - `description`: A user-facing description of the card (previously `cardDescription`).
+  - `lastFour`: Last 4 digits of the card, optional (previously `cardLastFour`).
+  - `brand`: The card brand, optional (previously `cardBrand`).
+- [#913](https://github.com/stripe/stripe-react-native/pull/913) chore: Updated `stripe-ios` from 22.0.0 to 22.2.0.
+
 ## 0.8.0
 
 - [#902](https://github.com/stripe/stripe-react-native/pull/902) fix: create custom babel plugin for package.json imports in src/

android/src/main/java/com/reactnativestripesdk/pushprovisioning/AddToWalletButtonManager.kt

@@ -38,14 +38,9 @@ class AddToWalletButtonManager(applicationContext: ReactApplicationContext) : Si
     view.setSourceMap(source)
   }
 
-  @ReactProp(name = "cardDescription")
-  fun cardDescription(view: AddToWalletButtonView, cardDescription: String) {
-    view.setCardDescription(cardDescription)
-  }
-
-  @ReactProp(name = "cardLastFour")
-  fun cardLastFour(view: AddToWalletButtonView, last4: String) {
-    view.setCardLastFour(last4)
+  @ReactProp(name = "cardDetails")
+  fun cardDetails(view: AddToWalletButtonView, cardDetails: ReadableMap) {
+    view.setCardDetails(cardDetails)
   }
 
   @ReactProp(name = "ephemeralKey")

android/src/main/java/com/reactnativestripesdk/pushprovisioning/AddToWalletButtonView.kt

@@ -22,8 +22,7 @@ import com.reactnativestripesdk.createError
 
 
 class AddToWalletButtonView(private val context: ThemedReactContext, private val requestManager: RequestManager) : AppCompatImageView(context) {
-  private var cardDescription: String? = null
-  private var cardLastFour: String? = null
+  private var cardDetails: ReadableMap? = null
   private var ephemeralKey: String? = null
   private var sourceMap: ReadableMap? = null
   private var token: ReadableMap? = null
@@ -35,7 +34,8 @@ class AddToWalletButtonView(private val context: ThemedReactContext, private val
 
   override fun performClick(): Boolean {
     super.performClick()
-    cardDescription?.let { cardDescription ->
+
+    cardDetails?.getString("description")?.let { cardDescription ->
       ephemeralKey?.let { ephemeralKey ->
         PushProvisioningProxy.invoke(
           context.reactApplicationContext,
@@ -50,7 +50,7 @@ class AddToWalletButtonView(private val context: ThemedReactContext, private val
       }
     } ?: run {
       dispatchEvent(
-        createError("Failed", "Missing parameters. `cardDescription` must be supplied in the props to <AddToWalletButton />")
+        createError("Failed", "Missing parameters. `cardDetails.cardDescription` must be supplied in the props to <AddToWalletButton />")
       )
     }
     return true
@@ -125,12 +125,8 @@ class AddToWalletButtonView(private val context: ThemedReactContext, private val
     sourceMap = map
   }
 
-  fun setCardDescription(description: String) {
-    cardDescription = description
-  }
-
-  fun setCardLastFour(last4: String) {
-    cardLastFour = last4
+  fun setCardDetails(detailsMap: ReadableMap) {
+    cardDetails = detailsMap
   }
 
   fun setEphemeralKey(map: ReadableMap) {

e2e/payments.test.ts

@@ -221,7 +221,7 @@ describe('Common payment scenarios', () => {
   });
 
   it('ACH Payment', function () {
-    this.retries(3);
+    this.retries(2);
 
     homeScreen.goTo('Bank Debits');
     homeScreen.goTo('ACH payment');
@@ -230,25 +230,34 @@ describe('Common payment scenarios', () => {
     clickButtonContainingText('Collect bank account');
 
     BasicPaymentScreen.authorizeACH();
-    driver.pause(3000);
 
-    expect(driver.getAlertText()).toContain('RequiresConfirmation');
-    driver.dismissAlert();
+    let alert = getElementByText('RequiresConfirmation');
+    alert.waitForDisplayed({
+      timeout: 20000,
+    });
+    alert.dismissAlert();
 
     clickButtonContainingText('Confirm');
     driver.pause(3000);
 
-    expect(driver.getAlertText()).toContain('Awaiting verification');
-    driver.dismissAlert();
+    alert = getElementByText('Awaiting verification');
+    alert.waitForDisplayed({
+      timeout: 20000,
+    });
+    alert.dismissAlert();
 
     getElementByText('Verify microdeposit').click();
     driver.pause(3000);
 
-    expect(driver.getAlertText()).toContain('Processing');
+    alert = getElementByText('Processing');
+    alert.waitForDisplayed({
+      timeout: 20000,
+    });
+    alert.dismissAlert();
   });
 
   it('ACH Setup', function () {
-    this.retries(3);
+    this.retries(2);
 
     homeScreen.goTo('Bank Debits');
     homeScreen.goTo('ACH setup');
@@ -257,20 +266,29 @@ describe('Common payment scenarios', () => {
     clickButtonContainingText('Collect bank account');
 
     BasicPaymentScreen.authorizeACH();
-    driver.pause(3000);
 
-    expect(driver.getAlertText()).toContain('RequiresConfirmation');
-    driver.dismissAlert();
+    let alert = getElementByText('RequiresConfirmation');
+    alert.waitForDisplayed({
+      timeout: 20000,
+    });
+    alert.dismissAlert();
 
     clickButtonContainingText('Confirm');
     driver.pause(3000);
 
-    expect(driver.getAlertText()).toContain('Awaiting verification');
-    driver.dismissAlert();
+    alert = getElementByText('Awaiting verification');
+    alert.waitForDisplayed({
+      timeout: 20000,
+    });
+    alert.dismissAlert();
 
     getElementByText('Verify microdeposit').click();
     driver.pause(3000);
 
-    expect(driver.getAlertText()).toContain('Succeeded');
+    alert = getElementByText('Succeeded');
+    alert.waitForDisplayed({
+      timeout: 20000,
+    });
+    alert.dismissAlert();
   });
 });

e2e/screenObject/BasicPaymentScreen.ts

@@ -81,21 +81,24 @@ class BasicPaymentScreen {
         let button = $(`button*=Manually verify instead`);
         if (button.isDisplayed()) {
           button.click();
-          driver.pause(5000);
+          driver.pause(2000);
 
           button = $(`//input[@name='confirmAccountNumber']`);
           button.click();
           button.sendKeys(['000123456789\n']);
+          driver.pause(2000);
 
           button = $(`//input[@name='routingNumber']`);
           button.click();
           button.click();
           button.sendKeys(['110000000\n']);
+          driver.pause(2000);
 
           button = $(`//input[@name='accountNumber']`);
           button.click();
           button.click();
           button.sendKeys(['000123456789\n']);
+          driver.pause(2000);
 
           button = $(`button*=Continue`);
           button.click();
@@ -104,7 +107,6 @@ class BasicPaymentScreen {
 
           button = $(`button*=Done`);
           button.click();
-          driver.pause(5000);
           break;
         }
       } catch (e) {
@@ -114,6 +116,7 @@ class BasicPaymentScreen {
       }
     }
     driver.switchContext(getNativeContext());
+    driver.pause(5000);
   }
 }
 

example/ios/Podfile.lock

@@ -287,27 +287,27 @@ PODS:
   - RNScreens (3.10.2):
     - React-Core
     - React-RCTImage
-  - Stripe (22.0.0):
-    - Stripe/Stripe3DS2 (= 22.0.0)
-    - StripeApplePay (= 22.0.0)
-    - StripeCore (= 22.0.0)
-    - StripeUICore (= 22.0.0)
-  - stripe-react-native (0.7.0):
+  - Stripe (22.2.0):
+    - Stripe/Stripe3DS2 (= 22.2.0)
+    - StripeApplePay (= 22.2.0)
+    - StripeCore (= 22.2.0)
+    - StripeUICore (= 22.2.0)
+  - stripe-react-native (0.8.0):
     - React-Core
-    - Stripe (~> 22.0.0)
-    - StripeConnections (~> 22.0.0)
-  - Stripe/Stripe3DS2 (22.0.0):
-    - StripeApplePay (= 22.0.0)
-    - StripeCore (= 22.0.0)
-    - StripeUICore (= 22.0.0)
-  - StripeApplePay (22.0.0):
-    - StripeCore (= 22.0.0)
-  - StripeConnections (22.0.0):
-    - StripeCore (= 22.0.0)
-    - StripeUICore (= 22.0.0)
-  - StripeCore (22.0.0)
-  - StripeUICore (22.0.0):
-    - StripeCore (= 22.0.0)
+    - Stripe (~> 22.2.0)
+    - StripeFinancialConnections (~> 22.2.0)
+  - Stripe/Stripe3DS2 (22.2.0):
+    - StripeApplePay (= 22.2.0)
+    - StripeCore (= 22.2.0)
+    - StripeUICore (= 22.2.0)
+  - StripeApplePay (22.2.0):
+    - StripeCore (= 22.2.0)
+  - StripeCore (22.2.0)
+  - StripeFinancialConnections (22.2.0):
+    - StripeCore (= 22.2.0)
+    - StripeUICore (= 22.2.0)
+  - StripeUICore (22.2.0):
+    - StripeCore (= 22.2.0)
   - Yoga (1.14.0)
 
 DEPENDENCIES:
@@ -355,8 +355,8 @@ SPEC REPOS:
     - fmt
     - Stripe
     - StripeApplePay
-    - StripeConnections
     - StripeCore
+    - StripeFinancialConnections
     - StripeUICore
 
 EXTERNAL SOURCES:
@@ -469,12 +469,12 @@ SPEC CHECKSUMS:
   RNCMaskedView: c298b644a10c0c142055b3ae24d83879ecb13ccd
   RNCPicker: cb57c823d5ce8d2d0b5dfb45ad97b737260dc59e
   RNScreens: d6da2b9e29cf523832c2542f47bf1287318b1868
-  Stripe: ee32e594fa4dee4bdf2a8a3039f7fb07a21075dc
-  stripe-react-native: 165df7efcedb14f15b8e2ddff20cedd6e6c42fca
-  StripeApplePay: e09964f3e2c6b318e53a05c12f3cb7efc592484d
-  StripeConnections: d3068bf688679a51932abb94d956d8a73c213bd7
-  StripeCore: 689b9605ccb78e507f59ddc5e677615e0af16583
-  StripeUICore: f5fe5ad283e132b40077b5eb85b625ebf7de034a
+  Stripe: 33cb13d41868ad64a6eabda23c920c5ffa724fa6
+  stripe-react-native: bff4d8028167e1cbf67cc870bc2075f2db7ed315
+  StripeApplePay: 77bbdb76f77e5e387c393e1512d111ee4818e384
+  StripeCore: 5703818b3a9949d8fce1a1b09e51fbe8953eb0ed
+  StripeFinancialConnections: 115d05b11a627e64d2402065b816e1aebae10951
+  StripeUICore: e1829301ad5de8831bc269a8ce8f73c31c26ce42
   Yoga: e7dc4e71caba6472ff48ad7d234389b91dadc280
 
 PODFILE CHECKSUM: 72bfeab5bf84b6ab4999227a1d3e012ee6b3f46e

example/ios/StripeSdkExample.xcodeproj/project.pbxproj

@@ -228,17 +228,17 @@
 				"${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}/StripeConnections/StripeConnections.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/StripeCore/StripeCore.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/StripeFinancialConnections/StripeFinancialConnections.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}/StripeConnections.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}/StripeUICore.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;

example/src/screens/ApplePayScreen.tsx

@@ -187,9 +187,13 @@ export default function ApplePayScreen() {
               testEnv={true}
               style={styles.payButton}
               iOSButtonStyle="onLightBackground"
-              cardHolderName={cardDetails?.cardholder?.name}
-              cardDescription={'Added by Stripe'}
-              cardLastFour={cardDetails?.last4}
+              cardDetails={{
+                name: cardDetails?.cardholder?.name,
+                primaryAccountIdentifier:
+                  cardDetails?.wallets?.primary_account_identifier,
+                lastFour: cardDetails?.last4,
+                description: 'Added by Stripe',
+              }}
               ephemeralKey={ephemeralKey}
               onComplete={({ error }) => {
                 Alert.alert(

example/src/screens/GooglePayScreen.tsx

@@ -183,9 +183,13 @@ export default function GooglePayScreen() {
         <AddToWalletButton
           androidAssetSource={Image.resolveAssetSource(AddToGooglePayPNG)}
           style={styles.payButton}
-          cardHolderName={cardDetails?.cardholder?.name}
-          cardDescription={'Added by Stripe'}
-          cardLastFour={cardDetails?.last4}
+          cardDetails={{
+            name: cardDetails?.cardholder?.name,
+            primaryAccountIdentifier:
+              cardDetails?.wallet?.primary_account_identifier,
+            lastFour: cardDetails?.last4,
+            description: 'Added by Stripe',
+          }}
           token={androidCardToken}
           ephemeralKey={ephemeralKey}
           onComplete={({ error }) => {

ios/pushprovisioning/AddToWalletButtonManager.m

@@ -12,10 +12,7 @@
 @interface RCT_EXTERN_MODULE(AddToWalletButtonManager, RCTViewManager)
 RCT_EXPORT_VIEW_PROPERTY(testEnv, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(iOSButtonStyle, NSString)
-RCT_EXPORT_VIEW_PROPERTY(cardHolderName, NSString)
-RCT_EXPORT_VIEW_PROPERTY(cardDescription, NSString)
-RCT_EXPORT_VIEW_PROPERTY(cardLastFour, NSString)
-RCT_EXPORT_VIEW_PROPERTY(cardBrand, NSString)
+RCT_EXPORT_VIEW_PROPERTY(cardDetails, NSDictionary)
 RCT_EXPORT_VIEW_PROPERTY(ephemeralKey, NSDictionary)
 RCT_EXPORT_VIEW_PROPERTY(onCompleteAction, RCTDirectEventBlock)
 @end