fix(payments-next): Coupon updates cause Stripe Element state loss

Because:

* Updating a coupon would cause rerenders of the stripe PaymentElement in the case of the PaymentElement representing an existing payment method with expired card data
* We create a new client session each time a cart is fetched, and when we apply a coupon, the route is revalidated. This causes the cart to be refetched.
* The front end passes this updated client session secret key to the Elements wrapper, which triggers a refresh of the PaymentElement

this commit:

* Adds in an explicit key to ensure that changing carts in-browser always changes the stripe session
* Preserves the initial client session secret key on the front end for use in the Stripe Elements component, preventing unnecessary rerenders
* Uses a minimally-invasive approach to resolving this issue, as the issue could not be replicated locally. Stripe tooling around expired cards is not working as intended.

Closes #PAY-3157

Author: david1alvarez

libs/payments/ui/src/lib/client/components/StripeWrapper.tsx

@@ -106,6 +106,7 @@ interface StripeWrapperProps {
   amount: number;
   currency: string;
   cart: {
+    id: string;
     paymentInfo?: {
       type:
       | Stripe.PaymentMethod.Type
@@ -133,6 +134,11 @@ export function StripeWrapper({
   const config = useContext(ConfigContext);
   const [stripePromise] = useState(() => loadStripe(config.stripePublicApiKey));
 
+  // Re-use initial session secret to prevent unnecessary Stripe Elements remounts
+  const [initialSessionSecret] = useState(
+    cart.paymentInfo?.customerSessionClientSecret
+  );
+
   const normalizedCurrency = currency.toLowerCase();
   const minCharge = STRIPE_MINIMUM_CHARGE_AMOUNTS[normalizedCurrency];
   const isBelowMin = amount < minCharge;
@@ -144,7 +150,7 @@ export function StripeWrapper({
     amount: isBelowMin ? undefined : amount,
     currency: normalizedCurrency,
     externalPaymentMethodTypes: ['external_paypal'],
-    customerSessionClientSecret: cart.paymentInfo?.customerSessionClientSecret,
+    customerSessionClientSecret: initialSessionSecret,
   };
 
   // Remove external_paypal if the customer has an active subscription
@@ -158,7 +164,7 @@ export function StripeWrapper({
   }
 
   return (
-    <Elements stripe={stripePromise} options={options}>
+    <Elements stripe={stripePromise} options={options} key={cart.id}>
       {children}
     </Elements>
   );