From 631c26b838363f28e4f85d024edade468f9c4982 Mon Sep 17 00:00:00 2001
From: nikospapcom <admin@nikospap.com>
Date: Tue, 6 May 2025 11:18:15 +0300
Subject: [PATCH] fix(clerk-js): Display generic payment icon in payment source
 row when payment method is not card

---
 .changeset/tame-foxes-add.md                                | 5 +++++
 .../src/ui/components/PaymentSources/PaymentSourceRow.tsx   | 6 +++---
 packages/clerk-js/src/ui/icons/generic-pay.svg              | 1 +
 packages/clerk-js/src/ui/icons/index.ts                     | 1 +
 4 files changed, 10 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/tame-foxes-add.md
 create mode 100644 packages/clerk-js/src/ui/icons/generic-pay.svg

diff --git a/.changeset/tame-foxes-add.md b/.changeset/tame-foxes-add.md
new file mode 100644
index 00000000000..44f48a4d70a
--- /dev/null
+++ b/.changeset/tame-foxes-add.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Display generic payment icon in payment source row when payment method is not card
diff --git a/packages/clerk-js/src/ui/components/PaymentSources/PaymentSourceRow.tsx b/packages/clerk-js/src/ui/components/PaymentSources/PaymentSourceRow.tsx
index bb9196a82b7..19a6a7f0f93 100644
--- a/packages/clerk-js/src/ui/components/PaymentSources/PaymentSourceRow.tsx
+++ b/packages/clerk-js/src/ui/components/PaymentSources/PaymentSourceRow.tsx
@@ -1,7 +1,7 @@
 import type { CommercePaymentSourceResource } from '@clerk/types';
 
 import { Badge, descriptors, Flex, Icon, localizationKeys, Text } from '../../customizables';
-import { ApplePay, CreditCard } from '../../icons';
+import { CreditCard, GenericPayment } from '../../icons';
 
 export const PaymentSourceRow = ({ paymentSource }: { paymentSource: CommercePaymentSourceResource }) => {
   return (
@@ -12,7 +12,7 @@ export const PaymentSourceRow = ({ paymentSource }: { paymentSource: CommercePay
       elementDescriptor={descriptors.paymentSourceRow}
     >
       <Icon
-        icon={paymentSource.walletType === 'apple_pay' ? ApplePay : CreditCard}
+        icon={paymentSource.paymentMethod === 'card' ? CreditCard : GenericPayment}
         sx={{ alignSelf: 'center' }}
         elementDescriptor={descriptors.paymentSourceRowIcon}
       />
@@ -29,7 +29,7 @@ export const PaymentSourceRow = ({ paymentSource }: { paymentSource: CommercePay
         truncate
         elementDescriptor={descriptors.paymentSourceRowValue}
       >
-        {paymentSource.paymentMethod === 'card' ? `⋯ ${paymentSource.last4}` : '-'}
+        {paymentSource.paymentMethod === 'card' ? `⋯ ${paymentSource.last4}` : null}
       </Text>
       {paymentSource.isDefault && (
         <Badge
diff --git a/packages/clerk-js/src/ui/icons/generic-pay.svg b/packages/clerk-js/src/ui/icons/generic-pay.svg
new file mode 100644
index 00000000000..9a8e1495b92
--- /dev/null
+++ b/packages/clerk-js/src/ui/icons/generic-pay.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.204 3.01A2 2 0 0 1 14 5v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 1.796-1.99L4 3h8l.204.01ZM4 7a.5.5 0 0 0-.5.5V8h1.396c.672 0 1.28.396 1.552 1.009.598 1.344 2.506 1.344 3.104 0A1.699 1.699 0 0 1 11.104 8H12.5v-.5A.5.5 0 0 0 12 7H4Zm0-2.5a.5.5 0 0 0-.5.5v.564c.096-.024.195-.043.296-.053L4 5.5h8l.204.01c.101.011.2.03.296.054V5a.5.5 0 0 0-.5-.5H4Z" fill="currentColor"/></svg>
\ No newline at end of file
diff --git a/packages/clerk-js/src/ui/icons/index.ts b/packages/clerk-js/src/ui/icons/index.ts
index 92c80362cbb..763d6c83a69 100644
--- a/packages/clerk-js/src/ui/icons/index.ts
+++ b/packages/clerk-js/src/ui/icons/index.ts
@@ -38,6 +38,7 @@ export { default as Eye } from './eye.svg';
 export { default as EyeSlash } from './eye-slash.svg';
 export { default as Fingerprint } from './fingerprint.svg';
 export { default as Folder } from './folder.svg';
+export { default as GenericPayment } from './generic-pay.svg';
 export { default as InformationCircle } from './information-circle.svg';
 export { default as LinkIcon } from './link.svg';
 export { default as LockClosedIcon } from './lock-closed.svg';