[SDK] Update enableCard prop to paymentMethods array

Replace boolean enableCard prop with paymentMethods array that accepts ["crypto", "card"] literals. This provides more flexibility for controlling available payment options in BuyWidget, CheckoutWidget, and TransactionWidget.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: gregfromstl

.changeset/dull-breads-start.md

@@ -2,4 +2,4 @@
 "thirdweb": patch
 ---
 
-Adds enableCard prop to BuyWidget, CheckoutWidget, and TransactionWidget
+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

@@ -115,9 +115,10 @@ export interface BridgeOrchestratorProps {
   presetOptions: [number, number, number] | undefined;
 
   /**
-   * Whether to enable the "Buy with card" (fiat payment) option
+   * Allowed payment methods
+   * @default ["crypto", "card"]
    */
-  enableCard?: boolean;
+  paymentMethods?: ("crypto" | "card")[];
 }
 
 export function BridgeOrchestrator({
@@ -132,7 +133,7 @@ export function BridgeOrchestrator({
   purchaseData,
   paymentLinkId,
   presetOptions,
-  enableCard,
+  paymentMethods = ["crypto", "card"],
 }: BridgeOrchestratorProps) {
   // Initialize adapters
   const adapters = useMemo(
@@ -277,7 +278,7 @@ export function BridgeOrchestrator({
             onError={handleError}
             onPaymentMethodSelected={handlePaymentMethodSelected}
             receiverAddress={state.context.receiverAddress}
-            enableCard={enableCard}
+            paymentMethods={paymentMethods}
           />
         )}
 

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

@@ -162,10 +162,10 @@ export type BuyWidgetProps = {
   paymentLinkId?: string;
 
   /**
-   * Whether to enable the "Buy with card" (fiat payment) option.
-   * @default true
+   * Allowed payment methods
+   * @default ["crypto", "card"]
    */
-  enableCard?: boolean;
+  paymentMethods?: ("crypto" | "card")[];
 };
 
 // Enhanced UIOptions to handle unsupported token state
@@ -388,7 +388,7 @@ export function BuyWidget(props: BuyWidgetProps) {
         purchaseData={props.purchaseData}
         receiverAddress={undefined}
         uiOptions={bridgeDataQuery.data.data}
-        enableCard={props.enableCard}
+        paymentMethods={props.paymentMethods}
       />
     );
   }

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

@@ -168,10 +168,10 @@ export type CheckoutWidgetProps = {
   paymentLinkId?: string;
 
   /**
-   * Whether to enable the "Buy with card" (fiat payment) option.
-   * @default true
+   * Allowed payment methods
+   * @default ["crypto", "card"]
    */
-  enableCard?: boolean;
+  paymentMethods?: ("crypto" | "card")[];
 };
 
 // Enhanced UIOptions to handle unsupported token state
@@ -351,7 +351,7 @@ export function CheckoutWidget(props: CheckoutWidgetProps) {
         purchaseData={props.purchaseData}
         receiverAddress={props.seller}
         uiOptions={bridgeDataQuery.data.data}
-        enableCard={props.enableCard}
+        paymentMethods={props.paymentMethods}
       />
     );
   }

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

@@ -171,10 +171,10 @@ export type TransactionWidgetProps = {
   paymentLinkId?: string;
 
   /**
-   * Whether to enable the "Buy with card" (fiat payment) option.
-   * @default true
+   * Allowed payment methods
+   * @default ["crypto", "card"]
    */
-  enableCard?: boolean;
+  paymentMethods?: ("crypto" | "card")[];
 };
 
 // Enhanced UIOptions to handle unsupported token state
@@ -410,7 +410,7 @@ export function TransactionWidget(props: TransactionWidgetProps) {
         purchaseData={props.purchaseData}
         receiverAddress={undefined}
         uiOptions={bridgeDataQuery.data.data}
-        enableCard={props.enableCard}
+        paymentMethods={props.paymentMethods}
       />
     );
   }

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

@@ -73,9 +73,10 @@ export interface PaymentSelectionProps {
   includeDestinationToken?: boolean;
 
   /**
-   * Whether to enable the "Buy with card" (fiat payment) option
+   * Allowed payment methods
+   * @default ["crypto", "card"]
    */
-  enableCard?: boolean;
+  paymentMethods?: ("crypto" | "card")[];
 }
 
 type Step =
@@ -95,7 +96,7 @@ export function PaymentSelection({
   connectOptions,
   connectLocale,
   includeDestinationToken,
-  enableCard,
+  paymentMethods = ["crypto", "card"],
 }: PaymentSelectionProps) {
   const connectedWallets = useConnectedWallets();
   const activeWallet = useActiveWallet();
@@ -254,7 +255,7 @@ export function PaymentSelection({
             onConnectWallet={handleConnectWallet}
             onFiatSelected={handleFiatSelected}
             onWalletSelected={handleWalletSelected}
-            enableCard={enableCard}
+            paymentMethods={paymentMethods}
           />
         )}
 

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

@@ -21,7 +21,7 @@ interface WalletFiatSelectionProps {
   onWalletSelected: (wallet: Wallet) => void;
   onFiatSelected: () => void;
   onConnectWallet: () => void;
-  enableCard?: boolean;
+  paymentMethods?: ("crypto" | "card")[];
 }
 
 export function WalletFiatSelection({
@@ -30,7 +30,7 @@ export function WalletFiatSelection({
   onWalletSelected,
   onFiatSelected,
   onConnectWallet,
-  enableCard = true,
+  paymentMethods = ["crypto", "card"],
 }: WalletFiatSelectionProps) {
   const theme = useCustomTheme();
 
@@ -128,7 +128,7 @@ export function WalletFiatSelection({
         </Container>
       </Button>
 
-      {enableCard && (
+      {paymentMethods.includes("card") && (
         <>
           <Spacer y="md" />
 

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

@@ -359,7 +359,7 @@ export function PayEmbed(props: PayEmbedProps) {
         onSuccess={() => props.payOptions?.onPurchaseSuccess?.()}
         theme={theme}
         title={metadata?.name || "Buy"}
-        enableCard={props.payOptions?.buyWithFiat === false ? false : true}
+        paymentMethods={props.payOptions?.buyWithFiat === false ? ["crypto"] : ["crypto", "card"]}
         tokenAddress={
           props.payOptions.prefillBuy.token?.address as Address | undefined
         }
@@ -378,7 +378,7 @@ export function PayEmbed(props: PayEmbedProps) {
         name={metadata?.name || "Checkout"}
         onSuccess={() => props.payOptions?.onPurchaseSuccess?.()}
         seller={props.payOptions.paymentInfo.sellerAddress as Address}
-        enableCard={props.payOptions?.buyWithFiat === false ? false : true}
+        paymentMethods={props.payOptions?.buyWithFiat === false ? ["crypto"] : ["crypto", "card"]}
         theme={theme}
         tokenAddress={
           props.payOptions.paymentInfo.token?.address as Address | undefined
@@ -395,7 +395,7 @@ export function PayEmbed(props: PayEmbedProps) {
         image={metadata?.image}
         onSuccess={() => props.payOptions?.onPurchaseSuccess?.()}
         theme={theme}
-        enableCard={props.payOptions?.buyWithFiat === false ? false : true}
+        paymentMethods={props.payOptions?.buyWithFiat === false ? ["crypto"] : ["crypto", "card"]}
         title={metadata?.name}
         transaction={props.payOptions.transaction}
       />