diff --git a/packages/thirdweb/src/react/core/hooks/pay/useBuyWithFiatQuotesForProviders.ts b/packages/thirdweb/src/react/core/hooks/pay/useBuyWithFiatQuotesForProviders.ts
index 62cec3c4558..3f858205a99 100644
--- a/packages/thirdweb/src/react/core/hooks/pay/useBuyWithFiatQuotesForProviders.ts
+++ b/packages/thirdweb/src/react/core/hooks/pay/useBuyWithFiatQuotesForProviders.ts
@@ -64,12 +64,16 @@ type UseBuyWithFiatQuotesForProvidersResult = {
*/
export function useBuyWithFiatQuotesForProviders(
params?: UseBuyWithFiatQuotesForProvidersParams,
+ providers?: ("coinbase" | "stripe" | "transak")[],
queryOptions?: OnrampQuoteQueryOptions,
): UseBuyWithFiatQuotesForProvidersResult {
- const providers = ["coinbase", "stripe", "transak"] as const;
+ const providersToQuery =
+ providers && providers.length > 0
+ ? providers
+ : (["coinbase", "stripe", "transak"] as const);
const queries = useQueries({
- queries: providers.map((provider) => ({
+ queries: providersToQuery.map((provider) => ({
...queryOptions,
enabled: !!params,
queryFn: async () => {
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx b/packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx
index 6f4be0889fb..decd06e5101 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx
@@ -223,6 +223,20 @@ export type BuyWidgetProps = {
* By default the token selection is editable. Set this to false to disable editing the token selection.
*/
tokenEditable?: boolean;
+
+ /**
+ * Array of onramp provider IDs to hide from the payment provider selection.
+ * @example
+ * ```tsx
+ *
+ * ```
+ */
+ hiddenOnrampProviders?: ("coinbase" | "stripe" | "transak")[];
};
/**
@@ -395,6 +409,7 @@ export function BuyWidget(props: BuyWidgetProps) {
? true
: props.showThirdwebBranding
}
+ hiddenOnrampProviders={props.hiddenOnrampProviders}
/>
);
@@ -558,6 +573,7 @@ function BridgeWidgetContent(
currency={props.currency}
supportedTokens={props.supportedTokens}
country={props.country}
+ hiddenOnrampProviders={props.hiddenOnrampProviders}
// others
destinationToken={screen.destinationToken}
destinationAmount={screen.destinationAmount}
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx b/packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx
index d8aca486f9f..5ba533e3b23 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx
@@ -197,6 +197,17 @@ export type BridgeWidgetProps = {
presetOptions?: [number, number, number];
/** Arbitrary data to be included in returned status and webhook events. */
purchaseData?: PurchaseData;
+ /**
+ * Array of onramp provider IDs to hide from the payment provider selection.
+ * @example
+ * ```tsx
+ *
+ * ```
+ */
+ hiddenOnrampProviders?: ("coinbase" | "stripe" | "transak")[];
};
connectOptions?: {
@@ -444,6 +455,7 @@ export function BridgeWidget(props: BridgeWidgetProps) {
purchaseData={props.buy?.purchaseData}
paymentMethods={["card"]}
connectOptions={props.connectOptions}
+ hiddenOnrampProviders={props.buy?.hiddenOnrampProviders}
style={{
border: "none",
}}
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx b/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx
index 1cbe3040fb0..f4546d31020 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx
@@ -28,6 +28,7 @@ interface FiatProviderSelectionProps {
toAmount?: string;
currency?: SupportedFiatCurrency;
country: string | undefined;
+ hiddenOnrampProviders?: ("coinbase" | "stripe" | "transak")[];
}
const PROVIDERS = [
@@ -60,17 +61,26 @@ export function FiatProviderSelection({
toAmount,
currency,
country,
+ hiddenOnrampProviders,
}: FiatProviderSelectionProps) {
- // Fetch quotes for all providers
- const quoteQueries = useBuyWithFiatQuotesForProviders({
- amount: toAmount || "0",
- chainId: toChainId,
- client,
- currency: currency || "USD",
- receiver: checksumAddress(toAddress),
- tokenAddress: checksumAddress(toTokenAddress),
- country,
- });
+ const visibleProviders = useMemo(() => {
+ return PROVIDERS.filter(
+ (provider) => !hiddenOnrampProviders?.includes(provider.id),
+ );
+ }, [hiddenOnrampProviders]);
+
+ const quoteQueries = useBuyWithFiatQuotesForProviders(
+ {
+ amount: toAmount || "0",
+ chainId: toChainId,
+ client,
+ currency: currency || "USD",
+ receiver: checksumAddress(toAddress),
+ tokenAddress: checksumAddress(toTokenAddress),
+ country,
+ },
+ visibleProviders.map((p) => p.id),
+ );
const quotes = useMemo(() => {
return quoteQueries.map((q) => q.data).filter((q) => !!q);
@@ -106,7 +116,7 @@ export function FiatProviderSelection({
quotes
.sort((a, b) => a.currencyAmount - b.currencyAmount)
.map((quote) => {
- const provider = PROVIDERS.find(
+ const provider = visibleProviders.find(
(p) => p.id === quote.intent.onramp,
);
if (!provider) {
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx b/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx
index 6f85d72654f..b70e8af161c 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx
@@ -90,6 +90,11 @@ type PaymentSelectionProps = {
country: string | undefined;
supportedTokens: SupportedTokens | undefined;
+
+ /**
+ * Array of onramp provider IDs to hide from the payment provider selection.
+ */
+ hiddenOnrampProviders?: ("coinbase" | "stripe" | "transak")[];
};
type Step =
@@ -113,6 +118,7 @@ export function PaymentSelection({
feePayer,
currency,
country,
+ hiddenOnrampProviders,
}: PaymentSelectionProps) {
const connectedWallets = useConnectedWallets();
const activeWallet = useActiveWallet();
@@ -308,6 +314,7 @@ export function PaymentSelection({
toChainId={destinationToken.chainId}
toTokenAddress={destinationToken.address}
currency={currency}
+ hiddenOnrampProviders={hiddenOnrampProviders}
/>
)}