From 1521762e24e9df859ea75c1ea92695f0cd354fcc Mon Sep 17 00:00:00 2001
From: samuelea <batonenbois@gmail.com>
Date: Tue, 8 Jul 2025 19:56:46 -0400
Subject: [PATCH] message in credit card section

---
 .../PayWithCreditCard/index.tsx               | 24 ++++++++++++++++---
 packages/connect/src/styles.ts                | 10 --------
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/packages/checkout/src/views/Checkout/PaymentMethodSelect/PayWithCreditCard/index.tsx b/packages/checkout/src/views/Checkout/PaymentMethodSelect/PayWithCreditCard/index.tsx
index fe5a1e62e..77888da65 100644
--- a/packages/checkout/src/views/Checkout/PaymentMethodSelect/PayWithCreditCard/index.tsx
+++ b/packages/checkout/src/views/Checkout/PaymentMethodSelect/PayWithCreditCard/index.tsx
@@ -1,4 +1,4 @@
-import { Button, Spinner } from '@0xsequence/design-system'
+import { Button, Spinner, Text } from '@0xsequence/design-system'
 import { useClearCachedBalances, useGetContractInfo } from '@0xsequence/hooks'
 import { findSupportedNetwork } from '@0xsequence/network'
 import { useAccount } from 'wagmi'
@@ -111,9 +111,27 @@ export const PayWithCreditCardTab = () => {
       </div>
     )
   }
+
+  const getProviderName = () => {
+    switch (selectedPaymentProvider) {
+      case 'sardine':
+        return 'Sardine'
+      case 'transak':
+        return 'Transak'
+      case 'forte':
+        return 'Forte'
+      default:
+        return null
+    }
+  }
   return (
-    <div className="flex flex-col justify-center items-center gap-2 w-full h-full">
-      <Button className="w-full" shape="square" onClick={payWithSelectedProvider} label="Continue" variant="primary" />
+    <div className="flex flex-col gap-2 justify-between h-full">
+      <Text color="text50" variant="small">
+        Buy directly with your debit or credit card {getProviderName() ? `through ${getProviderName()}` : ''}
+      </Text>
+      <div className="flex flex-col justify-center items-center gap-2 w-full h-full">
+        <Button className="w-full" shape="square" onClick={payWithSelectedProvider} label="Continue" variant="primary" />
+      </div>
     </div>
   )
 }
diff --git a/packages/connect/src/styles.ts b/packages/connect/src/styles.ts
index a896b1b54..38f1e0b56 100644
--- a/packages/connect/src/styles.ts
+++ b/packages/connect/src/styles.ts
@@ -583,9 +583,6 @@ export const styles = String.raw`
   .w-\[148px\] {
     width: 148px;
   }
-  .w-\[200px\] {
-    width: 200px;
-  }
   .w-fit {
     width: fit-content;
   }
@@ -2014,13 +2011,6 @@ export const styles = String.raw`
       }
     }
   }
-  .focus-within\:\[\&\:has\(\:focus-visible\)\]\:ring-border-focus {
-    &:focus-within {
-      &:has(:focus-visible) {
-        --tw-ring-color: var(--seq-color-border-focus);
-      }
-    }
-  }
   .\[\&\>svg\]\:stroke-2 {
     &>svg {
       stroke-width: 2;