fix(stripe): show app name in express checkout (#949)

## Summary
- pass the branding app name to Stripe Express Checkout creation options
so Apple Pay shows the app name instead of the connected account
business name
- add focused coverage for app-name option construction

Author: nicfix

src/stripe/stripe-express-checkout-configuration.ts

@@ -1,4 +1,8 @@
 import type { StripeExpressCheckoutElementOptions } from "@stripe/stripe-js/dist/stripe-js/elements/express-checkout";
 
 export type StripeExpressCheckoutConfiguration =
-  Partial<StripeExpressCheckoutElementOptions>;
+  Partial<StripeExpressCheckoutElementOptions> & {
+    business?: {
+      name: string;
+    };
+  };

src/tests/ui/express-purchase-button/stripe-helpers.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, test } from "vitest";
+import { toExpressPurchaseOptions } from "../../../ui/express-purchase-button/stripe-helpers";
+import { Translator } from "../../../ui/localization/translator";
+import { rcPackage } from "../../../stories/fixtures";
+
+describe("toExpressPurchaseOptions", () => {
+  const translator = new Translator();
+  const purchaseOption = rcPackage.webBillingProduct.defaultPurchaseOption;
+  const managementUrl = "https://example.com/manage/subscriptions/123";
+
+  test("sets the business name when an app name is provided", () => {
+    const result = toExpressPurchaseOptions(
+      rcPackage,
+      purchaseOption,
+      managementUrl,
+      translator,
+      "Test App",
+    );
+
+    expect(result.business).toStrictEqual({ name: "Test App" });
+  });
+
+  test("does not set the business name when an app name is not provided", () => {
+    const result = toExpressPurchaseOptions(
+      rcPackage,
+      purchaseOption,
+      managementUrl,
+      translator,
+      null,
+    );
+
+    expect(result.business).toBeUndefined();
+  });
+});

src/ui/express-purchase-button/express-purchase-button.svelte

@@ -135,6 +135,7 @@
           rcPackage,
           purchaseOption,
           translator,
+          brandingInfo,
           walletButtonTheme,
         );
         expressCheckoutOptions = expOptions;
@@ -315,6 +316,7 @@
         rcPackage,
         purchaseOption,
         translator,
+        brandingInfo,
         walletButtonTheme,
       );
 

src/ui/express-purchase-button/stripe-helpers.ts

@@ -78,6 +78,7 @@ export const toExpressPurchaseOptions = (
   purchaseOption: PurchaseOption,
   managementUrl: string,
   translator: Translator,
+  appName?: string | null,
   walletButtonTheme?: WalletButtonTheme,
 ) => {
   const productDetails: Product = rcPackage.webBillingProduct;
@@ -126,6 +127,10 @@ export const toExpressPurchaseOptions = (
     };
   }
 
+  if (appName) {
+    options.business = { name: appName };
+  }
+
   return options;
 };
 
@@ -136,6 +141,7 @@ export const updateStripe = (
   rcPackage: Package,
   purchaseOption: PurchaseOption,
   translator: Translator,
+  brandingInfo: BrandingInfoResponse | null,
   walletButtonTheme?: WalletButtonTheme,
 ) => {
   if (!gatewayParams.elements_configuration) {
@@ -152,6 +158,7 @@ export const updateStripe = (
     purchaseOption,
     managementUrl,
     translator,
+    brandingInfo?.app_name,
     walletButtonTheme,
   );
   return { expOptions: options };
@@ -225,6 +232,7 @@ export const initStripe = async (
     purchaseOption,
     managementUrl,
     translator,
+    brandingInfo?.app_name,
     walletButtonTheme,
   );
 

src/ui/molecules/stripe-express-checkout-element.svelte

@@ -71,11 +71,9 @@
   const onClickCallback = async (
     event: StripeExpressCheckoutElementClickEvent,
   ) => {
-    const options = {
-      ...(expressCheckoutOptions ? expressCheckoutOptions : {}),
-    } as ClickResolveDetails;
+    const { business: _business, ...options } = expressCheckoutOptions ?? {};
     onClick && onClick(event);
-    event.resolve(options);
+    event.resolve(options as ClickResolveDetails);
   };
 
   const onLoadErrorCallback = async (event: {