Fix buy widget showing payment method selection screen

Author: MananTank

packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx

@@ -100,7 +100,7 @@ export function DirectPayment({
           size="xl"
           token={uiOptions.paymentInfo.token}
           tokenAmount={uiOptions.paymentInfo.amount}
-          weight={700}
+          weight={600}
         />
         <Container flex="row" gap="3xs">
           <Text

packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx

@@ -194,7 +194,7 @@ export function TransactionPayment({
         }}
       >
         {/* USD Value */}
-        <Text color="primaryText" size="xl" weight={700}>
+        <Text color="primaryText" size="xl" weight={600}>
           {transactionDataQuery.data?.usdValueDisplay ||
             transactionDataQuery.data?.txCostDisplay}
         </Text>

packages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsx

@@ -46,7 +46,7 @@ export function WithHeader({
           <>
             {/* title */}
             {showTitle && (
-              <Text color="primaryText" size="lg" weight={700}>
+              <Text color="primaryText" size="lg" weight={600}>
                 {uiOptions.metadata?.title || defaultTitle}
               </Text>
             )}

packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx

@@ -125,9 +125,16 @@ export function PaymentSelection({
   const connectedWallets = useConnectedWallets();
   const activeWallet = useActiveWallet();
 
-  const [currentStep, setCurrentStep] = useState<Step>({
-    type: "walletSelection",
-  });
+  const initialStep =
+    paymentMethods.length === 1 && paymentMethods[0] === "card"
+      ? {
+          type: "fiatProviderSelection" as const,
+        }
+      : {
+          type: "walletSelection" as const,
+        };
+
+  const [currentStep, setCurrentStep] = useState<Step>(initialStep);
 
   useQuery({
     queryFn: () => {
@@ -226,6 +233,9 @@ export function PaymentSelection({
   };
 
   const getBackHandler = () => {
+    if (paymentMethods.length === 1 && paymentMethods[0] === "card") {
+      return onBack;
+    }
     switch (currentStep.type) {
       case "walletSelection":
         return onBack;

packages/thirdweb/src/react/web/ui/Bridge/payment-selection/WalletFiatSelection.tsx

@@ -38,10 +38,15 @@ export function WalletFiatSelection({
     <>
       {paymentMethods.includes("crypto") && (
         <>
-          <Text color="primaryText" size="md">
-            Pay with Crypto
-          </Text>
-          <Spacer y="md" />
+          {paymentMethods.length > 1 && (
+            <>
+              <Text color="primaryText" size="sm" weight={500}>
+                Pay with Crypto
+              </Text>
+              <Spacer y="sm" />
+            </>
+          )}
+
           {/* Connected Wallets */}
           {connectedWallets.length > 0 && (
             <>
@@ -134,13 +139,13 @@ export function WalletFiatSelection({
 
       {paymentMethods.includes("card") && (
         <>
-          <Spacer y="md" />
+          <Spacer y="lg" />
 
-          <Text color="primaryText" size="md">
+          <Text color="primaryText" size="sm" weight={500}>
             Pay with Card
           </Text>
 
-          <Spacer y="md" />
+          <Spacer y="sm" />
 
           <Button
             fullWidth

packages/thirdweb/src/stories/BuyWidget.stories.tsx

@@ -32,3 +32,25 @@ export function UnsupportedToken() {
     />
   );
 }
+
+export function OnlyCardSupported() {
+  return (
+    <BuyWidget
+      client={storyClient}
+      chain={base}
+      amount="0.1"
+      paymentMethods={["card"]}
+    />
+  );
+}
+
+export function OnlyCryptoSupported() {
+  return (
+    <BuyWidget
+      client={storyClient}
+      chain={base}
+      amount="0.1"
+      paymentMethods={["crypto"]}
+    />
+  );
+}