feat(iOS): Recurring Transactions and order tracking APIs

CHANGELOG.md

@@ -2,6 +2,27 @@
 
 ## Unreleased
 
+### Breaking changes
+
+-  [#1248](https://github.com/stripe/stripe-react-native/pull/1248) Renamed the `paymentSummaryItems` field in `initPaymentSheet()`'s `applePay` params to `cartItems`. So your change will look like this:
+
+```diff
+ initPaymentSheet({
+   ...
+   applePay: {
+-    paymentSummaryItems: [
++    cartItems: [
+   }
+  ...
+ })
+```
+
+## New Features
+
+- Added the `setOrderTracking` property to the `PlatformPayButton` component and the `initPaymentSheet` method. Use this callback for setting the order details to give users the ability to track and manage their purchases in Wallet. To learn more about order tracking, see [Apple’s Wallet Orders documentation](https://developer.apple.com/documentation/walletorders). [#1248](https://github.com/stripe/stripe-react-native/pull/1248)
+- Added the `buttonType` field to `initPaymentSheet()`'s `applePay` params. Use this to set the text displayed by the call to action button in the Apple Pay sheet.[#1248](https://github.com/stripe/stripe-react-native/pull/1248)
+- Added the `request` field to `initPaymentSheet()`'s, `confirmPlatformPayPayment()`'s, and `confirmPlatformPaySetupIntent`'s  `applePay` params. Use this to support different types of payment requests, like `RecurringPaymentRequest`, `AutomaticReloadPaymentRequest`, and `MultiMerchantRequest`.[#1248](https://github.com/stripe/stripe-react-native/pull/1248)
+
 ## 0.23.3 - 2023-02-07
 
 ## Fixes

e2e-tests/android-only/ach-payment.yml → e2e-tests/android-only/local-only/ach-payment.yml

@@ -6,6 +6,10 @@ appId: ${APP_ID}
 - tapOn:
     text: "Collect bank account"
     retryTapIfNoChange: false
+- scrollUntilVisible:
+    element:
+      text: "Manually verify instead"
+    direction: DOWN
 - tapOn: "Manually verify instead"
 - tapOn:
     id: "manualEntry_routingNumber"

e2e-tests/android-only/ach-setup.yml → e2e-tests/android-only/local-only/ach-setup.yml

@@ -10,6 +10,10 @@ appId: ${APP_ID}
 - tapOn:
     text: "Collect bank account"
     retryTapIfNoChange: false
+- scrollUntilVisible:
+    element:
+      text: "Manually verify instead"
+    direction: DOWN
 - tapOn: "Manually verify instead"
 - tapOn:
     id: "manualEntry_routingNumber"

e2e-tests/android-only/financial-connections-session.yml → e2e-tests/android-only/local-only/financial-connections-session.yml

@@ -8,6 +8,10 @@ appId: ${APP_ID}
 - tapOn:
     text: "Collect session"
     retryTapIfNoChange: false
+- scrollUntilVisible:
+    element:
+      text: "Enter account details manually instead"
+    direction: DOWN
 - tapOn: "Enter account details manually instead"
 - tapOn:
     id: "manualEntry_routingNumber"
@@ -24,4 +28,7 @@ appId: ${APP_ID}
 - tapOn: "Continue"
 - assertVisible:
     text: "Success"
-- tapOn: "OK"
+    optional: true
+- tapOn:
+    text: "OK"
+    optional: true

e2e-tests/android-only/financial-connections-token.yml → e2e-tests/android-only/local-only/financial-connections-token.yml

@@ -8,18 +8,27 @@ appId: ${APP_ID}
 - tapOn:
     text: "Collect token"
     retryTapIfNoChange: false
+- scrollUntilVisible:
+    element:
+      text: "Enter account details manually instead"
+    direction: DOWN
 - tapOn: "Enter account details manually instead"
-- tapOn: "123456789"
+- tapOn:
+    id: "manualEntry_routingNumber"
 - inputText: "110000000"
+- hideKeyboard
 - tapOn:
-    text: "000123456789"
-    index: 0
+    id: "manualEntry_accountNumber"
 - inputText: "000123456789"
+- hideKeyboard
 - tapOn:
-    text: "000123456789"
-    index: 1
+    id: "manualEntry_confirmAccountNumber"
 - inputText: "000123456789"
+- hideKeyboard
 - tapOn: "Continue"
 - assertVisible:
     text: "Success"
-- tapOn: "OK"
+    optional: true
+- tapOn:
+    text: "OK"
+    optional: true

e2e-tests/ios-only/ach-payment.yml

@@ -9,14 +9,17 @@ appId: ${APP_ID}
 - tapOn: "Manually verify instead"
 - tapOn: "123456789"
 - inputText: "110000000"
+- hideKeyboard
 - tapOn:
     text: "000123456789"
     index: 0
 - inputText: "000123456789"
+- hideKeyboard
 - tapOn:
     text: "000123456789"
     index: 1
 - inputText: "000123456789"
+- hideKeyboard
 - tapOn: "Continue"
 - tapOn: "Done"
 - assertVisible:

e2e-tests/ios-only/ach-setup.yml

@@ -13,14 +13,17 @@ appId: ${APP_ID}
 - tapOn: "Manually verify instead"
 - tapOn: "123456789"
 - inputText: "110000000"
+- hideKeyboard
 - tapOn:
     text: "000123456789"
     index: 0
 - inputText: "000123456789"
+- hideKeyboard
 - tapOn:
     text: "000123456789"
     index: 1
 - inputText: "000123456789"
+- hideKeyboard
 - tapOn: "Continue"
 - tapOn: "Done"
 - assertVisible:

e2e-tests/ios-only/applepay-cancel.yml

@@ -0,0 +1,20 @@
+appId: ${APP_ID}
+---
+- launchApp
+- tapOn: "Wallets"
+- tapOn: "Apple Pay"
+- tapOn: "Buy with Apple\_Pay"
+- tapOn: "close"
+- assertVisible:
+    text: "Canceled"
+- tapOn: "OK"
+- tapOn: "Continue with Apple\_Pay"
+- tapOn: "close"
+- assertVisible:
+    text: "Canceled"
+- tapOn: "OK"
+- tapOn: "Set up Apple\_Pay"
+- tapOn: "close"
+- assertVisible:
+    text: "Canceled"
+- tapOn: "OK"

e2e-tests/ios-only/financial-connections-session.yml

@@ -11,14 +11,17 @@ appId: ${APP_ID}
 - tapOn: "Enter account details manually instead"
 - tapOn: "123456789"
 - inputText: "110000000"
+- hideKeyboard
 - tapOn:
     text: "000123456789"
     index: 0
 - inputText: "000123456789"
+- hideKeyboard
 - tapOn:
     text: "000123456789"
     index: 1
 - inputText: "000123456789"
+- hideKeyboard
 - tapOn: "Continue"
 - assertVisible:
     text: "Success"

e2e-tests/ios-only/financial-connections-token.yml

@@ -11,14 +11,17 @@ appId: ${APP_ID}
 - tapOn: "Enter account details manually instead"
 - tapOn: "123456789"
 - inputText: "110000000"
+- hideKeyboard
 - tapOn:
     text: "000123456789"
     index: 0
 - inputText: "000123456789"
+- hideKeyboard
 - tapOn:
     text: "000123456789"
     index: 1
 - inputText: "000123456789"
+- hideKeyboard
 - tapOn: "Continue"
 - assertVisible:
     text: "Success"

e2e-tests/ios-only/local-only/applepay-basic.yml

@@ -0,0 +1,14 @@
+appId: ${APP_ID}
+---
+- launchApp
+- tapOn: "Wallets"
+- tapOn: "Apple Pay"
+- tapOn: "Buy with Apple\_Pay"
+- tapOn: .*Simulated Card.*
+- tapOn:
+    text: "Simulated Card - AmEx, ‪•••• 1234‬"
+    index: 0
+- tapOn: "Pay with Passcode"
+- assertVisible:
+    text: "Success"
+- tapOn: "OK"

e2e-tests/ios-only/local-only/applepay-paymentmethod.yml

@@ -0,0 +1,14 @@
+appId: ${APP_ID}
+---
+- launchApp
+- tapOn: "Wallets"
+- tapOn: "Apple Pay"
+- tapOn: "Continue with Apple\_Pay"
+- tapOn:
+    text: "Forward"
+    index: 1
+- tapOn: "Done"
+- tapOn: "Pay with Passcode"
+- assertVisible:
+    text: "Success"
+- tapOn: "OK"

e2e-tests/ios-only/local-only/applepay-token.yml

@@ -0,0 +1,16 @@
+appId: ${APP_ID}
+---
+- launchApp
+- tapOn: "Wallets"
+- tapOn: "Apple Pay"
+- tapOn: "Set up Apple\_Pay"
+- tapOn:
+    text: "Forward"
+    index: 3
+- tapOn:
+    text: "Standard Shipping, US$3,21, 8 – 10 Dec 2022"
+    index: 0
+- tapOn: "Pay with Passcode"
+- assertVisible:
+    text: "Success"
+- tapOn: "OK"

e2e-tests/ios-only/fpx.yml → e2e-tests/ios-only/local-only/fpx.yml

@@ -11,6 +11,8 @@ appId: ${APP_ID}
 - tapOn:
     text: "Pay"
     retryTapIfNoChange: false
+- waitForAnimationToEnd:
+    timeout: 2000
 - tapOn:
     text: "Public Bank"
 - tapOn: "AUTHORIZE TEST PAYMENT"

e2e-tests/ios-only/local-only/klarna.yml

@@ -0,0 +1,25 @@
+appId: ${APP_ID}
+---
+- launchApp
+- tapOn: "Buy now pay later"
+- tapOn: "Klarna"
+- assertVisible:
+    text: "E-mail"
+- tapOn:
+    text: "E-mail"
+- inputText: "[email protected]"
+- tapOn:
+    text: "Pay"
+    retryTapIfNoChange: false
+- extendedWaitUntil:
+    visible: "Let's do a quick verification"
+    timeout: 30000
+- tapOn:
+    id: "${APP_ID}:id/action_close"
+    optional: true
+- tapOn:
+    text: "Close"
+    optional: true
+- assertVisible:
+    text: "Error code: Canceled"
+- tapOn: "OK"

example/server/index.ts

@@ -625,12 +625,16 @@ app.post('/ephemeral-key', async (req, res) => {
     typescript: true,
   });
 
-  let key = await stripe.ephemeralKeys.create(
-    { issuing_card: req.body.issuingCardId },
-    { apiVersion: req.body.apiVersion }
-  );
-
-  return res.send(key);
+  try {
+    let key = await stripe.ephemeralKeys.create(
+      { issuing_card: req.body.issuingCardId },
+      { apiVersion: req.body.apiVersion }
+    );
+    return res.send(key);
+  } catch (e) {
+    console.log(e);
+    return res.send({ error: e });
+  }
 });
 
 app.post('/issuing-card-details', async (req, res) => {
@@ -641,15 +645,19 @@ app.post('/issuing-card-details', async (req, res) => {
     typescript: true,
   });
 
-  let card = await stripe.issuing.cards.retrieve(req.body.id);
+  try {
+    let card = await stripe.issuing.cards.retrieve(req.body.id);
 
-  if (!card) {
-    return res.send({
-      error: 'No card with that ID exists.',
-    });
+    if (!card) {
+      console.log('No card with that ID exists.');
+      return res.send({ error: 'No card with that ID exists.' });
+    } else {
+      return res.send(card);
+    }
+  } catch (e) {
+    console.log(e);
+    return res.send({ error: e });
   }
-
-  return res.send(card);
 });
 
 app.post('/financial-connections-sheet', async (_, res) => {

example/src/screens/ApplePayScreen.tsx

@@ -93,10 +93,9 @@ export default function ApplePayScreen() {
   };
 
   useEffect(() => {
-    const checkCapability = async () => {
+    (async function () {
       setIsApplePaySupported(await isPlatformPaySupported());
-    };
-    checkCapability();
+    })();
   }, [isPlatformPaySupported]);
 
   const checkIfCardInWallet = async () => {
@@ -120,7 +119,7 @@ export default function ApplePayScreen() {
     });
 
     if (error) {
-      Alert.alert(error.code, error.message);
+      console.log(error.code, error.message);
     } else {
       setShowAddToWalletButton(canAddCard ?? false);
       if (details?.status) {

example/src/screens/CollectBankAccountScreen.tsx

@@ -75,14 +75,14 @@ export default function CollectBankAccountScreen() {
       <Button
         variant="primary"
         onPress={handleCollectTokenPress}
-        title={loading || !clientSecret ? 'loading...' : 'Collect token'}
+        title={!clientSecret ? 'loading...' : 'Collect token'}
         loading={loading}
         disabled={!clientSecret}
       />
       <Button
         variant="primary"
         onPress={handleCollectSessionPress}
-        title={loading || !clientSecret ? 'loading...' : 'Collect session'}
+        title={!clientSecret ? 'loading...' : 'Collect session'}
         loading={loading}
         disabled={!clientSecret}
       />

example/src/screens/PaymentSheetWithSetupIntent.tsx

@@ -65,7 +65,7 @@ export default function PaymentSheetWithSetupIntent() {
       merchantDisplayName: 'Example Inc.',
       applePay: {
         merchantCountryCode: 'US',
-        paymentSummaryItems: [
+        cartItems: [
           {
             paymentType: 'Recurring',
             label: 'This is a subscription',

ios/ApplePayButtonManager.m

@@ -11,5 +11,6 @@ @interface RCT_EXTERN_MODULE(ApplePayButtonManager, RCTViewManager)
 RCT_EXPORT_VIEW_PROPERTY(onShippingMethodSelectedAction, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onShippingContactSelectedAction, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onCouponCodeEnteredAction, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onOrderTrackingAction, RCTDirectEventBlock)
 
 @end

ios/ApplePayButtonView.swift

@@ -10,6 +10,7 @@ class ApplePayButtonView: UIView {
     @objc var onShippingMethodSelectedAction: RCTDirectEventBlock?
     @objc var onShippingContactSelectedAction: RCTDirectEventBlock?
     @objc var onCouponCodeEnteredAction: RCTDirectEventBlock?
+    @objc var onOrderTrackingAction: RCTDirectEventBlock?
 
     @objc var type: NSNumber?
     @objc var buttonStyle: NSNumber?
@@ -33,6 +34,7 @@ class ApplePayButtonView: UIView {
             stripeSdk?.shippingMethodUpdateJSCallback = onShippingMethodSelectedAction
             stripeSdk?.shippingContactUpdateJSCallback = onShippingContactSelectedAction
             stripeSdk?.couponCodeEnteredJSCallback = onCouponCodeEnteredAction
+            stripeSdk?.platformPayOrderTrackingJSCallback = onOrderTrackingAction
         }
     }