From 7f1d6ec67da99467a11976afe6a5e0708e377bb3 Mon Sep 17 00:00:00 2001
From: Mina W Alphonce <mina.alphonce@gmail.com>
Date: Sat, 4 May 2024 12:59:14 +0200
Subject: [PATCH] feat: :zap: Update payment details after calling
 initPaymentSheet

---
 .../PaymentSheetFragment.kt                   |  23 ++
 .../reactnativestripesdk/StripeSdkModule.kt   |  10 +
 example/server/index.ts                       |   5 +-
 example/src/App.tsx                           |   6 +
 example/src/screens/HomeScreen.tsx            |  10 +
 ...ferredIntentMultiStepScreenWithUpdates.tsx | 311 ++++++++++++++++++
 ios/StripeSdk+PaymentSheet.swift              |  36 ++
 ios/StripeSdk.m                               |   7 +
 ios/StripeSdk.swift                           |  10 +-
 src/NativeStripeSdk.tsx                       |   3 +
 src/functions.ts                              |  43 +++
 src/hooks/useStripe.tsx                       |  11 +
 12 files changed, 472 insertions(+), 3 deletions(-)
 create mode 100644 example/src/screens/PaymentSheetDeferredIntentMultiStepScreenWithUpdates.tsx

diff --git a/android/src/main/java/com/reactnativestripesdk/PaymentSheetFragment.kt b/android/src/main/java/com/reactnativestripesdk/PaymentSheetFragment.kt
index 75fabe128..8950bd9a6 100644
--- a/android/src/main/java/com/reactnativestripesdk/PaymentSheetFragment.kt
+++ b/android/src/main/java/com/reactnativestripesdk/PaymentSheetFragment.kt
@@ -292,6 +292,29 @@ class PaymentSheetFragment(
     flowController?.confirm()
   }
 
+  fun updateIntentConfiguration(bundle: Bundle, promise: Promise){
+    val onFlowControllerConfigure = PaymentSheet.FlowController.ConfigCallback { _, _ ->
+      val result = flowController?.getPaymentOption()?.let {
+        val bitmap = getBitmapFromVectorDrawable(context, it.drawableResourceId)
+        val imageString = getBase64FromBitmap(bitmap)
+        val option: WritableMap = WritableNativeMap()
+        option.putString("label", it.label)
+        option.putString("image", imageString)
+        createResult("paymentOption", option)
+      } ?: run {
+        WritableNativeMap()
+      }
+      promise.resolve(result)
+    }
+
+    this.intentConfiguration =  buildIntentConfiguration(bundle);
+    this.flowController?.configureWithIntentConfiguration(
+      intentConfiguration = this.intentConfiguration!!,
+      configuration = paymentSheetConfiguration,
+      callback = onFlowControllerConfigure
+    );
+  }
+
   private fun configureFlowController() {
     val onFlowControllerConfigure = PaymentSheet.FlowController.ConfigCallback { _, _ ->
       val result = flowController?.getPaymentOption()?.let {
diff --git a/android/src/main/java/com/reactnativestripesdk/StripeSdkModule.kt b/android/src/main/java/com/reactnativestripesdk/StripeSdkModule.kt
index 1a85a6cf2..0f0a8cfd2 100644
--- a/android/src/main/java/com/reactnativestripesdk/StripeSdkModule.kt
+++ b/android/src/main/java/com/reactnativestripesdk/StripeSdkModule.kt
@@ -176,6 +176,16 @@ class StripeSdkModule(reactContext: ReactApplicationContext) : ReactContextBaseJ
     }
   }
 
+  @ReactMethod
+  fun updatePaymentSheet(params: ReadableMap, promise: Promise){
+    if (paymentSheetFragment == null) {
+      promise.resolve(PaymentSheetFragment.createMissingInitError())
+      return
+    }
+    val bundle = toBundleObject(params);
+    paymentSheetFragment?.updateIntentConfiguration(bundle,promise);
+  }
+
   @ReactMethod
   fun presentPaymentSheet(options: ReadableMap, promise: Promise) {
     if (paymentSheetFragment == null) {
diff --git a/example/server/index.ts b/example/server/index.ts
index 33c06e01b..463f25e3b 100644
--- a/example/server/index.ts
+++ b/example/server/index.ts
@@ -710,14 +710,15 @@ app.post('/payment-intent-for-payment-sheet', async (req, res) => {
 
   try {
     const paymentIntent = await stripe.paymentIntents.create({
-      amount: 5099,
-      currency: 'usd',
+      amount: req.body.amount || 5099,
+      currency: req.body.currency || 'usd',
       payment_method: req.body.paymentMethodId,
       customer: req.body.customerId,
     });
 
     return res.send({ clientSecret: paymentIntent.client_secret });
   } catch (e) {
+    console.log(e);
     return res.send({ error: e });
   }
 });
diff --git a/example/src/App.tsx b/example/src/App.tsx
index ecfb20733..529c9fd73 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -43,6 +43,7 @@ import CollectBankAccountScreen from './screens/CollectBankAccountScreen';
 import CashAppScreen from './screens/CashAppScreen';
 import PaymentSheetDeferredIntentScreen from './screens/PaymentSheetDeferredIntentScreen';
 import PaymentSheetDeferredIntentMultiStepScreen from './screens/PaymentSheetDeferredIntentMultiStepScreen';
+import PaymentSheetDeferredIntentMultiStepScreenWithUpdates from './screens/PaymentSheetDeferredIntentMultiStepScreenWithUpdates';
 import CustomerSheetScreen from './screens/CustomerSheetScreen';
 import RevolutPayScreen from './screens/RevolutPayScreen';
 
@@ -89,6 +90,7 @@ export type RootStackParamList = {
   CollectBankAccountScreen: undefined;
   PaymentSheetDeferredIntentScreen: undefined;
   PaymentSheetDeferredIntentMultiStepScreen: undefined;
+  PaymentSheetDeferredIntentMultiStepScreenWithUpdates: undefined;
   CustomerSheetScreen: undefined;
   RevolutPayScreen: undefined;
 };
@@ -165,6 +167,10 @@ export default function App() {
             name="PaymentSheetDeferredIntentMultiStepScreen"
             component={PaymentSheetDeferredIntentMultiStepScreen}
           />
+          <Stack.Screen
+            name="PaymentSheetDeferredIntentMultiStepScreenWithUpdates"
+            component={PaymentSheetDeferredIntentMultiStepScreenWithUpdates}
+          />
           <Stack.Screen
             name="PaymentsUICustomScreen"
             component={PaymentsUICustomScreen}
diff --git a/example/src/screens/HomeScreen.tsx b/example/src/screens/HomeScreen.tsx
index af9d36a57..e31b61c60 100644
--- a/example/src/screens/HomeScreen.tsx
+++ b/example/src/screens/HomeScreen.tsx
@@ -93,6 +93,16 @@ export default function HomeScreen() {
               }}
             />
           </View>
+          <View style={styles.buttonContainer}>
+            <Button
+              title="Prebuilt UI (multi-step) (deferred intent) with updates"
+              onPress={() => {
+                navigation.navigate(
+                  'PaymentSheetDeferredIntentMultiStepScreenWithUpdates'
+                );
+              }}
+            />
+          </View>
           <View style={styles.buttonContainer}>
             <Button
               title="Customer Sheet"
diff --git a/example/src/screens/PaymentSheetDeferredIntentMultiStepScreenWithUpdates.tsx b/example/src/screens/PaymentSheetDeferredIntentMultiStepScreenWithUpdates.tsx
new file mode 100644
index 000000000..e57ae78e6
--- /dev/null
+++ b/example/src/screens/PaymentSheetDeferredIntentMultiStepScreenWithUpdates.tsx
@@ -0,0 +1,311 @@
+import React, { useState } from 'react';
+import { Alert, StyleSheet, View, TextInput } from 'react-native';
+import {
+  useStripe,
+  // Address,
+  // BillingDetails,
+  PaymentMethod,
+  PaymentSheet,
+} from '@stripe/stripe-react-native';
+import { colors } from '../colors';
+import Button from '../components/Button';
+import PaymentScreen from '../components/PaymentScreen';
+import { API_URL } from '../Config';
+
+export default function PaymentSheetDeferredIntentMultiStepScreenWithUpdates() {
+  const {
+    initPaymentSheet,
+    presentPaymentSheet,
+    confirmPaymentSheetPayment,
+    updatePaymentSheet,
+  } = useStripe();
+  const [paymentSheetEnabled, setPaymentSheetEnabled] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [paymentMethodOption, setPaymentMethodOption] = useState<{
+    image: string;
+    label: string;
+  } | null>(null);
+
+  const [amount, setAmount] = useState(6099);
+
+  const fetchPaymentSheetParams = async () => {
+    const response = await fetch(`${API_URL}/payment-sheet`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    const { customer, ephemeralKey } = await response.json();
+
+    return {
+      customer,
+      ephemeralKey,
+    };
+  };
+
+  const initialisePaymentSheet = async () => {
+    setLoading(true);
+
+    try {
+      const { customer, ephemeralKey } = await fetchPaymentSheetParams();
+
+      const { error, paymentOption } = await initPaymentSheet({
+        customFlow: true,
+        customerId: customer,
+        customerEphemeralKeySecret: ephemeralKey,
+        merchantDisplayName: 'Example Inc.',
+        applePay: {
+          merchantCountryCode: 'US',
+        },
+        googlePay: {
+          merchantCountryCode: 'US',
+          testEnv: __DEV__,
+        },
+        returnURL: 'stripe-example://stripe-redirect',
+        billingDetailsCollectionConfiguration: {
+          attachDefaultsToPaymentMethod: true,
+          name: PaymentSheet.CollectionMode.ALWAYS,
+          address: PaymentSheet.AddressCollectionMode.NEVER,
+        },
+        intentConfiguration: {
+          confirmHandler: async (
+            paymentMethod: PaymentMethod.Result,
+            _shouldSavePaymentMethod: boolean,
+            intentCreationCallback: (
+              result: PaymentSheet.IntentCreationCallbackParams
+            ) => void
+          ) => {
+            const response = await fetch(
+              `${API_URL}/payment-intent-for-payment-sheet`,
+              {
+                method: 'POST',
+                headers: {
+                  'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                  amount: amount,
+                  currency: 'SEK',
+                  paymentMethodId: paymentMethod.id,
+                  customerId: customer,
+                }),
+              }
+            );
+            const { clientSecret, error: responseError } =
+              await response.json();
+
+            if (responseError) {
+              intentCreationCallback({
+                error: {
+                  code: 'Failed',
+                  message: responseError.raw.message,
+                  localizedMessage: responseError.raw.message,
+                },
+              });
+            } else {
+              intentCreationCallback({ clientSecret });
+            }
+          },
+          mode: {
+            amount: amount,
+            currencyCode: 'SEK',
+          },
+          paymentMethodTypes: ['card'],
+        },
+      });
+
+      if (!error) {
+        setPaymentSheetEnabled(true);
+      } else {
+        Alert.alert(`Error code: ${error.code}`, error.message);
+      }
+      if (paymentOption) {
+        setPaymentMethodOption(paymentOption);
+      }
+    } catch (error) {
+      console.log('error', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const updatePayment = async () => {
+    setLoading(true);
+
+    try {
+      const { customer } = await fetchPaymentSheetParams();
+
+      const { error, paymentOption } = await updatePaymentSheet({
+        confirmHandler: async (
+          paymentMethod: PaymentMethod.Result,
+          _shouldSavePaymentMethod: boolean,
+          intentCreationCallback: (
+            result: PaymentSheet.IntentCreationCallbackParams
+          ) => void
+        ) => {
+          const response = await fetch(
+            `${API_URL}/payment-intent-for-payment-sheet`,
+            {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json',
+              },
+              body: JSON.stringify({
+                amount: amount,
+                currency: 'SEK',
+                paymentMethodId: paymentMethod.id,
+                customerId: customer,
+              }),
+            }
+          );
+
+          const { clientSecret, error: responseError } = await response.json();
+
+          if (responseError) {
+            intentCreationCallback({
+              error: {
+                code: 'Failed',
+                message: responseError.raw.message,
+                localizedMessage: responseError.raw.message,
+              },
+            });
+          } else {
+            intentCreationCallback({ clientSecret });
+          }
+        },
+        mode: {
+          amount: amount,
+          currencyCode: 'SEK',
+        },
+      });
+
+      if (!error) {
+        setPaymentSheetEnabled(true);
+      } else {
+        Alert.alert(`Error code: ${error.code}`, error.message);
+      }
+      if (paymentOption) {
+        setPaymentMethodOption(paymentOption);
+      }
+    } catch (error) {
+      console.log('error', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const choosePaymentOption = async () => {
+    const { error, paymentOption } = await presentPaymentSheet();
+
+    if (error) {
+      Alert.alert(`Error code: ${error.code}`, error.message);
+    } else if (paymentOption) {
+      setPaymentMethodOption({
+        label: paymentOption.label,
+        image: paymentOption.image,
+      });
+    } else {
+      setPaymentMethodOption(null);
+    }
+  };
+
+  const onPressBuy = async () => {
+    setLoading(true);
+    const { error } = await confirmPaymentSheetPayment();
+
+    if (error) {
+      Alert.alert(`Error code: ${error.code}`, error.message);
+    } else {
+      Alert.alert('Success', 'The payment was confirmed successfully!');
+      setPaymentSheetEnabled(false);
+    }
+    setLoading(false);
+  };
+
+  const onUpdatePress = async () => {
+    setLoading(true);
+    await updatePayment();
+    setLoading(false);
+  };
+
+  return (
+    // In your app’s checkout, make a network request to the backend and initialize PaymentSheet.
+    // To reduce loading time, make this request before the Checkout button is tapped, e.g. when the screen is loaded.
+    <PaymentScreen onInit={initialisePaymentSheet}>
+      <Button
+        variant="primary"
+        loading={loading}
+        title={'Choose payment method'}
+        disabled={!paymentSheetEnabled}
+        onPress={choosePaymentOption}
+      />
+
+      <View style={styles.section}>
+        <TextInput
+          style={styles.input}
+          value={String(amount)}
+          onChangeText={(txt) => setAmount(parseInt(txt, 10) || 0)}
+        />
+      </View>
+
+      <View style={styles.section}>
+        <Button
+          variant="primary"
+          loading={loading}
+          disabled={!paymentSheetEnabled}
+          title="Update Payment"
+          onPress={onUpdatePress}
+        />
+      </View>
+
+      <View style={styles.section}>
+        <Button
+          variant="primary"
+          loading={loading}
+          disabled={!paymentMethodOption || !paymentSheetEnabled}
+          title={`Buy${
+            paymentMethodOption ? ` with ${paymentMethodOption.label}` : ''
+          }`}
+          onPress={onPressBuy}
+        />
+      </View>
+    </PaymentScreen>
+  );
+}
+
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  section: {
+    marginTop: 40,
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: colors.slate,
+    padding: 10,
+    borderRadius: 6,
+  },
+  title: {
+    fontSize: 18,
+    marginBottom: 20,
+    fontWeight: 'bold',
+  },
+  paymentMethodTitle: {
+    color: colors.slate,
+    fontWeight: 'bold',
+  },
+  image: {
+    width: 26,
+    height: 20,
+  },
+  text: {
+    color: colors.white,
+    fontSize: 16,
+    fontWeight: '600',
+    marginLeft: 12,
+  },
+});
diff --git a/ios/StripeSdk+PaymentSheet.swift b/ios/StripeSdk+PaymentSheet.swift
index c39247aef..9d666dda3 100644
--- a/ios/StripeSdk+PaymentSheet.swift
+++ b/ios/StripeSdk+PaymentSheet.swift
@@ -194,6 +194,42 @@ extension StripeSdk {
         }
     }
     
+    internal func updateIntentConfiguration(
+        params: NSDictionary,
+        resolve: @escaping RCTPromiseResolveBlock)
+    {
+        guard let modeParams =  params["mode"] as? NSDictionary else {
+            resolve(Errors.createError(ErrorType.Failed, "One of `paymentIntentClientSecret`, `setupIntentClientSecret`, or `intentConfiguration.mode` is required"))
+            return
+        }
+        if (params.object(forKey: "confirmHandler") == nil) {
+            resolve(Errors.createError(ErrorType.Failed, "You must provide `intentConfiguration.confirmHandler` if you are not passing an intent client secret"))
+            return
+        }
+        let captureMethodString = params["captureMethod"] as? String
+        let intentConfig = buildIntentConfiguration(
+            modeParams: modeParams,
+            paymentMethodTypes: params["paymentMethodTypes"] as? [String],
+            captureMethod: mapCaptureMethod(captureMethodString)
+        )
+        self.paymentSheetFlowController?.update(intentConfiguration: intentConfig){ [weak self] error in
+            if error != nil {
+                    
+            }
+            else {
+                var result: NSDictionary? = nil
+                    if let paymentOption = self?.paymentSheetFlowController?.paymentOption {
+                        result = [
+                            "label": paymentOption.label,
+                            "image": paymentOption.image.pngData()?.base64EncodedString() ?? ""
+                        ]
+                    }
+                    resolve(Mappers.createResult("paymentOption", result))
+                }
+            }
+    }
+    
+    
     private func mapCaptureMethod(_ captureMethod: String?) -> PaymentSheet.IntentConfiguration.CaptureMethod {
         if let captureMethod = captureMethod {
             switch captureMethod {
diff --git a/ios/StripeSdk.m b/ios/StripeSdk.m
index 99af1da76..ac7e0b817 100644
--- a/ios/StripeSdk.m
+++ b/ios/StripeSdk.m
@@ -106,6 +106,13 @@ @interface RCT_EXTERN_MODULE(StripeSdk, RCTEventEmitter)
                   rejecter: (RCTPromiseRejectBlock)reject
                   )
 
+RCT_EXTERN_METHOD(
+                  updatePaymentSheet:(NSDictionary *)params
+                  resolver: (RCTPromiseResolveBlock)resolve
+                  rejecter: (RCTPromiseRejectBlock)reject
+                  )
+
+
 RCT_EXTERN_METHOD(
                   intentCreationCallback:(NSDictionary *)result
                   resolver: (RCTPromiseResolveBlock)resolve
diff --git a/ios/StripeSdk.swift b/ios/StripeSdk.swift
index 6c8390680..0636d7cf7 100644
--- a/ios/StripeSdk.swift
+++ b/ios/StripeSdk.swift
@@ -14,7 +14,7 @@ class StripeSdk: RCTEventEmitter, STPBankSelectionViewControllerDelegate, UIAdap
     internal var paymentSheet: PaymentSheet?
     internal var paymentSheetFlowController: PaymentSheet.FlowController?
     var paymentSheetIntentCreationCallback: ((Result<String, Error>) -> Void)?
-    
+
     var urlScheme: String? = nil
     
     var confirmPaymentResolver: RCTPromiseResolveBlock? = nil
@@ -127,6 +127,14 @@ class StripeSdk: RCTEventEmitter, STPBankSelectionViewControllerDelegate, UIAdap
         
         preparePaymentSheetInstance(params: params, configuration: configuration, resolve: resolve)
     }
+
+    @objc(updatePaymentSheet:resolver:rejecter:)
+    func updatePaymentSheet(params: NSDictionary, resolver resolve: @escaping RCTPromiseResolveBlock,
+                          rejecter reject: @escaping RCTPromiseRejectBlock) -> Void  {
+        DispatchQueue.main.async {
+            self.updateIntentConfiguration(params: params, resolve: resolve)
+        }
+    }
     
     @objc(intentCreationCallback:resolver:rejecter:)
     func intentCreationCallback(result: NSDictionary, resolver resolve: @escaping RCTPromiseResolveBlock,
diff --git a/src/NativeStripeSdk.tsx b/src/NativeStripeSdk.tsx
index f1eedd590..b3d4480f5 100644
--- a/src/NativeStripeSdk.tsx
+++ b/src/NativeStripeSdk.tsx
@@ -65,6 +65,9 @@ type NativeStripeSdkType = {
   initPaymentSheet(
     params: PaymentSheet.SetupParams
   ): Promise<InitPaymentSheetResult>;
+  updatePaymentSheet(
+    params: PaymentSheet.IntentConfiguration
+  ): Promise<InitPaymentSheetResult>;
   intentCreationCallback(
     result: PaymentSheet.IntentCreationCallbackParams
   ): void;
diff --git a/src/functions.ts b/src/functions.ts
index b39da179a..271f07a83 100644
--- a/src/functions.ts
+++ b/src/functions.ts
@@ -416,6 +416,49 @@ export const initPaymentSheet = async (
   }
 };
 
+export const updatePaymentSheet = async (
+  params: PaymentSheet.IntentConfiguration
+): Promise<InitPaymentSheetResult> => {
+  let result;
+  const confirmHandler = params.confirmHandler;
+  if (confirmHandler) {
+    confirmHandlerCallback?.remove();
+    confirmHandlerCallback = eventEmitter.addListener(
+      'onConfirmHandlerCallback',
+      ({
+        paymentMethod,
+        shouldSavePaymentMethod,
+      }: {
+        paymentMethod: PaymentMethod.Result;
+        shouldSavePaymentMethod: boolean;
+      }) => {
+        confirmHandler(
+          paymentMethod,
+          shouldSavePaymentMethod,
+          NativeStripeSdk.intentCreationCallback
+        );
+      }
+    );
+  }
+
+  try {
+    result = await NativeStripeSdk.updatePaymentSheet(params);
+
+    if (result.error) {
+      return {
+        error: result.error,
+      };
+    }
+    return {
+      paymentOption: result.paymentOption,
+    };
+  } catch (error: any) {
+    return {
+      error,
+    };
+  }
+};
+
 export const presentPaymentSheet = async (
   options: PaymentSheet.PresentOptions = {}
 ): Promise<PresentPaymentSheetResult> => {
diff --git a/src/hooks/useStripe.tsx b/src/hooks/useStripe.tsx
index 4530fd8c4..b7a760f64 100644
--- a/src/hooks/useStripe.tsx
+++ b/src/hooks/useStripe.tsx
@@ -59,6 +59,7 @@ import {
   createPlatformPayToken,
   updatePlatformPaySheet,
   openPlatformPaySetup,
+  updatePaymentSheet,
 } from '../functions';
 
 /**
@@ -154,6 +155,15 @@ export function useStripe() {
     []
   );
 
+  const _updatePaymentSheet = useCallback(
+    async (
+      params: PaymentSheet.IntentConfiguration
+    ): Promise<InitPaymentSheetResult> => {
+      return updatePaymentSheet(params);
+    },
+    []
+  );
+
   const _presentPaymentSheet = useCallback(
     async (
       options?: PaymentSheet.PresentOptions
@@ -327,6 +337,7 @@ export function useStripe() {
     confirmPaymentSheetPayment: _confirmPaymentSheetPayment,
     presentPaymentSheet: _presentPaymentSheet,
     initPaymentSheet: _initPaymentSheet,
+    updatePaymentSheet: _updatePaymentSheet,
     createToken: _createToken,
     collectBankAccountForPayment: _collectBankAccountForPayment,
     collectBankAccountForSetup: _collectBankAccountForSetup,