feat: support customMethodNames in payment sheet

src/components/common/CustomAccordionView.res

@@ -21,7 +21,7 @@ module SectionHeader = {
         {section.title === "loading"
           ? <CustomLoader height="18" width="18" />
           : <Icon
-              name=section.title width=18. height=18. fill={isExpanded ? primaryColor : iconColor}
+              name={section.icon->Option.getOr(section.title)} width=18. height=18. fill={isExpanded ? primaryColor : iconColor}
             />}
         <Space height=5. />
         {section.title === "loading"
@@ -90,6 +90,7 @@ let make = (
   let allSections = hocComponentArr->Array.mapWithIndex((hoc, index) => {
     AccordionView.key: index,
     title: hoc.name,
+    icon: hoc.iconName,
     isExpanded: expandedSections->Array.includes(index),
     componentHoc: hoc.componentHoc,
   })

src/components/common/CustomTabView.res

@@ -33,7 +33,7 @@ let make = (
             isLoading
               ? <CustomLoader height="18" width="18" />
               : <Icon
-                  name=hoc.name
+                  name=hoc.iconName
                   width=18.
                   height=18.
                   fill={indexInFocus === index ? primaryColor : iconColor}
@@ -68,7 +68,7 @@ let make = (
       let isScrollBarOnlyCards =
         hocComponentArr->Array.length == 1 &&
           switch hocComponentArr->Array.get(0) {
-          | Some({name}) => name == "Card"
+          | Some({iconName}) => iconName == "credit"
           | None => true
           }
 

src/hooks/AllApiDataModifier.res

@@ -5,6 +5,7 @@ type componentHoc = (
 
 type hoc = {
   name: string,
+  iconName: string,
   componentHoc: componentHoc,
 }
 
@@ -20,7 +21,17 @@ let useAccountPaymentMethodModifier = () => {
   )
   let samsungPayStatus = SamsungPay.useSamsungPayValidityHook()
 
-  React.useMemo3(() => {
+  React.useMemo4(() => {
+    let customMethodNames = nativeProp.configuration.customMethodNames
+
+    // Returns the merchant-defined alias name for a payment method, or the default display name.
+    let resolveDisplayName = (paymentMethodType, defaultName) => {
+      customMethodNames
+      ->Array.find((alias: SdkTypes.alias) => alias.paymentMethodName->String.toLowerCase === paymentMethodType->String.toLowerCase)
+      ->Option.map((alias: SdkTypes.alias) => alias.aliasName)
+      ->Option.getOr(defaultName)
+    }
+
     let (initialTabArr, initialElementArr) = if nativeProp.configuration.displayMergedSavedMethods {
       customerPaymentMethodData
       ->Option.map(customerPaymentMethods => {
@@ -35,7 +46,8 @@ let useAccountPaymentMethodModifier = () => {
             customerPaymentMethods->Array.length > 0
               ? [
                   {
-                    name: "Saved",
+                    name: resolveDisplayName("saved", "Saved"),
+                    iconName: "saved",
                     componentHoc: (~isScreenFocus, ~setConfirmButtonData) =>
                       <SavedPaymentSheet
                         isScreenFocus
@@ -150,14 +162,22 @@ let useAccountPaymentMethodModifier = () => {
                     />,
                   )
                 : tabArr->Array.push({
-                    name: paymentMethodData.payment_method_type->CommonUtils.getDisplayName,
+                    name: resolveDisplayName(
+                      paymentMethodData.payment_method_type,
+                      paymentMethodData.payment_method_type->CommonUtils.getDisplayName,
+                    ),
+                    iconName: paymentMethodData.payment_method_type,
                     componentHoc: (~isScreenFocus, ~setConfirmButtonData) =>
                       <PaymentMethod isScreenFocus paymentMethodData setConfirmButtonData />,
                   })
 
             | TabSheet | WidgetTabSheet =>
               tabArr->Array.push({
-                name: paymentMethodData.payment_method_type->CommonUtils.getDisplayName,
+                name: resolveDisplayName(
+                  paymentMethodData.payment_method_type,
+                  paymentMethodData.payment_method_type->CommonUtils.getDisplayName,
+                ),
+                iconName: paymentMethodData.payment_method_type,
                 componentHoc: (~isScreenFocus, ~setConfirmButtonData) =>
                   <PaymentMethod isScreenFocus paymentMethodData setConfirmButtonData />,
               })
@@ -179,6 +199,7 @@ let useAccountPaymentMethodModifier = () => {
     | None =>
       let loadingTabElement = {
         name: "loading",
+        iconName: "loading", /* sentinel — short-circuited before Icon render */
         componentHoc: (~isScreenFocus as _, ~setConfirmButtonData as _) => <>
           <Space height=20. />
           <CustomLoader />
@@ -216,7 +237,7 @@ let useAccountPaymentMethodModifier = () => {
       | _ => ([], [], [])
       }
     }
-  }, (accountPaymentMethodData, customerPaymentMethodData, sessionTokenData))
+  }, (accountPaymentMethodData, customerPaymentMethodData, sessionTokenData, nativeProp))
 }
 
 let useAddWebPaymentButton = () => {

src/types/SdkTypes.res

@@ -214,6 +214,12 @@ type placeholder = {
   cvv: string,
 }
 
+type alias = {
+  paymentMethodName: string,
+  aliasName: string,
+}
+type customMethodNames = array<alias>
+
 type configurationType = {
   allowsDelayedPaymentMethods: bool,
   appearance: appearance,
@@ -234,6 +240,7 @@ type configurationType = {
   enablePartialLoading: bool,
   displayMergedSavedMethods: bool,
   disableBranding: bool,
+  customMethodNames: customMethodNames,
 }
 
 type sdkState =
@@ -836,6 +843,42 @@ let parseConfigurationDict = (configObj, from) => {
     },
     displayMergedSavedMethods: getBool(configObj, "displayMergedSavedMethods", false),
     disableBranding: getBool(configObj, "disableBranding", false),
+    customMethodNames: {
+      // Android passes customMethodNames as a JSON string; iOS passes it as a native array.
+      // Handle both cases gracefully.
+      let rawValue = configObj->Dict.get("customMethodNames")
+      let jsonArr = switch rawValue {
+      | Some(v) =>
+        switch JSON.Decode.array(v) {
+        | Some(arr) => arr
+        | None =>
+          // Try to parse as a JSON string (Android bundle path)
+          switch JSON.Decode.string(v) {
+          | Some(str) =>
+            let parsedValue = switch try {
+              Some(JSON.parseExn(str))
+            } catch {
+            | _ => None
+            } {
+            | value => value
+            }
+            switch parsedValue->Option.flatMap(JSON.Decode.array) {
+            | Some(arr) => arr
+            | _ => []
+            }
+          | None => []
+          }
+        }
+      | None => []
+      }
+      jsonArr
+      ->Array.filterMap(JSON.Decode.object)
+      ->Array.map(json => {
+        paymentMethodName: getString(json, "paymentMethodName", ""),
+        aliasName: getString(json, "aliasName", ""),
+      })
+      ->Array.filter(alias => alias.paymentMethodName !== "" && alias.aliasName !== "")
+    },
   }
   configuration
 }