[SDK] Add enableCard prop to control fiat payment visibility

.changeset/dull-breads-start.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Adds paymentMethods prop to BuyWidget, CheckoutWidget, and TransactionWidget to control available payment options. Accepts an array of "crypto" and/or "card" values.

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

@@ -113,6 +113,12 @@ export interface BridgeOrchestratorProps {
    * Quick buy amounts
    */
   presetOptions: [number, number, number] | undefined;
+
+  /**
+   * Allowed payment methods
+   * @default ["crypto", "card"]
+   */
+  paymentMethods?: ("crypto" | "card")[];
 }
 
 export function BridgeOrchestrator({
@@ -127,6 +133,7 @@ export function BridgeOrchestrator({
   purchaseData,
   paymentLinkId,
   presetOptions,
+  paymentMethods = ["crypto", "card"],
 }: BridgeOrchestratorProps) {
   // Initialize adapters
   const adapters = useMemo(
@@ -271,6 +278,7 @@ export function BridgeOrchestrator({
             onError={handleError}
             onPaymentMethodSelected={handlePaymentMethodSelected}
             receiverAddress={state.context.receiverAddress}
+            paymentMethods={paymentMethods}
           />
         )}
 

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

@@ -160,6 +160,12 @@ export type BuyWidgetProps = {
    * @hidden
    */
   paymentLinkId?: string;
+
+  /**
+   * Allowed payment methods
+   * @default ["crypto", "card"]
+   */
+  paymentMethods?: ("crypto" | "card")[];
 };
 
 // Enhanced UIOptions to handle unsupported token state
@@ -382,6 +388,7 @@ export function BuyWidget(props: BuyWidgetProps) {
         purchaseData={props.purchaseData}
         receiverAddress={undefined}
         uiOptions={bridgeDataQuery.data.data}
+        paymentMethods={props.paymentMethods}
       />
     );
   }

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

@@ -166,6 +166,12 @@ export type CheckoutWidgetProps = {
    * @hidden
    */
   paymentLinkId?: string;
+
+  /**
+   * Allowed payment methods
+   * @default ["crypto", "card"]
+   */
+  paymentMethods?: ("crypto" | "card")[];
 };
 
 // Enhanced UIOptions to handle unsupported token state
@@ -345,6 +351,7 @@ export function CheckoutWidget(props: CheckoutWidgetProps) {
         purchaseData={props.purchaseData}
         receiverAddress={props.seller}
         uiOptions={bridgeDataQuery.data.data}
+        paymentMethods={props.paymentMethods}
       />
     );
   }

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

@@ -169,6 +169,12 @@ export type TransactionWidgetProps = {
    * @hidden
    */
   paymentLinkId?: string;
+
+  /**
+   * Allowed payment methods
+   * @default ["crypto", "card"]
+   */
+  paymentMethods?: ("crypto" | "card")[];
 };
 
 // Enhanced UIOptions to handle unsupported token state
@@ -404,6 +410,7 @@ export function TransactionWidget(props: TransactionWidgetProps) {
         purchaseData={props.purchaseData}
         receiverAddress={undefined}
         uiOptions={bridgeDataQuery.data.data}
+        paymentMethods={props.paymentMethods}
       />
     );
   }

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

@@ -71,6 +71,12 @@ export interface PaymentSelectionProps {
    * Whether to include the destination token in the payment methods
    */
   includeDestinationToken?: boolean;
+
+  /**
+   * Allowed payment methods
+   * @default ["crypto", "card"]
+   */
+  paymentMethods?: ("crypto" | "card")[];
 }
 
 type Step =
@@ -90,6 +96,7 @@ export function PaymentSelection({
   connectOptions,
   connectLocale,
   includeDestinationToken,
+  paymentMethods = ["crypto", "card"],
 }: PaymentSelectionProps) {
   const connectedWallets = useConnectedWallets();
   const activeWallet = useActiveWallet();
@@ -248,6 +255,7 @@ export function PaymentSelection({
             onConnectWallet={handleConnectWallet}
             onFiatSelected={handleFiatSelected}
             onWalletSelected={handleWalletSelected}
+            paymentMethods={paymentMethods}
           />
         )}
 

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

@@ -21,6 +21,7 @@ interface WalletFiatSelectionProps {
   onWalletSelected: (wallet: Wallet) => void;
   onFiatSelected: () => void;
   onConnectWallet: () => void;
+  paymentMethods?: ("crypto" | "card")[];
 }
 
 export function WalletFiatSelection({
@@ -29,6 +30,7 @@ export function WalletFiatSelection({
   onWalletSelected,
   onFiatSelected,
   onConnectWallet,
+  paymentMethods = ["crypto", "card"],
 }: WalletFiatSelectionProps) {
   const theme = useCustomTheme();
 
@@ -126,47 +128,50 @@ export function WalletFiatSelection({
         </Container>
       </Button>
 
-      <Spacer y="md" />
+      {paymentMethods.includes("card") && (
+        <>
+          <Spacer y="md" />
 
-      {/* Pay with Debit Card */}
-      <Text color="primaryText" size="md">
-        Pay with Fiat
-      </Text>
+          <Text color="primaryText" size="md">
+            Pay with Card
+          </Text>
 
-      <Spacer y="md" />
+          <Spacer y="md" />
 
-      <Button
-        fullWidth
-        onClick={onFiatSelected}
-        style={{
-          backgroundColor: theme.colors.tertiaryBg,
-          border: `1px solid ${theme.colors.borderColor}`,
-          borderRadius: radius.md,
-          height: "auto",
-          padding: `${spacing.sm} ${spacing.md}`,
-          textAlign: "left",
-        }}
-        variant="secondary"
-      >
-        <Container
-          flex="row"
-          gap="md"
-          style={{ alignItems: "center", width: "100%" }}
-        >
-          <CreditCardIcon
-            color={theme.colors.secondaryIconColor}
-            size={iconSize.lg}
-          />
-          <Container flex="column" gap="3xs" style={{ flex: 1 }}>
-            <Text color="primaryText" size="sm" style={{ fontWeight: 600 }}>
-              Pay with Card
-            </Text>
-            <Text color="secondaryText" size="xs">
-              Buy crypto and bridge in one step
-            </Text>
-          </Container>
-        </Container>
-      </Button>
+          <Button
+            fullWidth
+            onClick={onFiatSelected}
+            style={{
+              backgroundColor: theme.colors.tertiaryBg,
+              border: `1px solid ${theme.colors.borderColor}`,
+              borderRadius: radius.md,
+              height: "auto",
+              padding: `${spacing.sm} ${spacing.md}`,
+              textAlign: "left",
+            }}
+            variant="secondary"
+          >
+            <Container
+              flex="row"
+              gap="md"
+              style={{ alignItems: "center", width: "100%" }}
+            >
+              <CreditCardIcon
+                color={theme.colors.secondaryIconColor}
+                size={iconSize.lg}
+              />
+              <Container flex="column" gap="3xs" style={{ flex: 1 }}>
+                <Text color="primaryText" size="sm" style={{ fontWeight: 600 }}>
+                  Pay with Card
+                </Text>
+                <Text color="secondaryText" size="xs">
+                  Buy crypto and bridge in one step
+                </Text>
+              </Container>
+            </Container>
+          </Button>
+        </>
+      )}
     </>
   );
 }

packages/thirdweb/src/react/web/ui/PayEmbed.tsx

@@ -359,6 +359,7 @@ export function PayEmbed(props: PayEmbedProps) {
         onSuccess={() => props.payOptions?.onPurchaseSuccess?.()}
         theme={theme}
         title={metadata?.name || "Buy"}
+        paymentMethods={props.payOptions?.buyWithFiat === false ? ["crypto"] : ["crypto", "card"]}
         tokenAddress={
           props.payOptions.prefillBuy.token?.address as Address | undefined
         }
@@ -377,6 +378,7 @@ export function PayEmbed(props: PayEmbedProps) {
         name={metadata?.name || "Checkout"}
         onSuccess={() => props.payOptions?.onPurchaseSuccess?.()}
         seller={props.payOptions.paymentInfo.sellerAddress as Address}
+        paymentMethods={props.payOptions?.buyWithFiat === false ? ["crypto"] : ["crypto", "card"]}
         theme={theme}
         tokenAddress={
           props.payOptions.paymentInfo.token?.address as Address | undefined
@@ -393,6 +395,7 @@ export function PayEmbed(props: PayEmbedProps) {
         image={metadata?.image}
         onSuccess={() => props.payOptions?.onPurchaseSuccess?.()}
         theme={theme}
+        paymentMethods={props.payOptions?.buyWithFiat === false ? ["crypto"] : ["crypto", "card"]}
         title={metadata?.name}
         transaction={props.payOptions.transaction}
       />
@@ -513,10 +516,10 @@ export type PayEmbedConnectOptions = {
    * ```
    */
   autoConnect?:
-    | {
-        timeout: number;
-      }
-    | boolean;
+  | {
+    timeout: number;
+  }
+  | boolean;
 
   /**
    * Metadata of the app that will be passed to connected wallet. Setting this is highly recommended.