feat: CM-735 - Add parameter to disable fiat currencies on primary sa…

…les card payments (#1958)

packages/checkout/sdk/src/widgets/definitions/parameters/sale.ts

@@ -24,6 +24,8 @@ export type SaleWidgetParams = {
   language?: WidgetLanguage;
   /** The disabled payment types */
   excludePaymentTypes?: SalePaymentTypes[];
+  /** Fiat currencies excluded from on-ramp */
+  excludeFiatCurrencies?: string[];
   /** Preferred currency, replacing the backend's base currency */
   preferredCurrency?: string;
 };

packages/checkout/widgets-lib/src/components/Transak/TransakIframe.tsx

@@ -33,6 +33,7 @@ export function TransakIframe(props: TransakIframeProps) {
     estimatedGasLimit,
     exchangeScreenTitle,
     partnerOrderId,
+    excludeFiatCurrencies,
     onOpen,
     onInit,
     onOrderCreated,
@@ -74,6 +75,7 @@ export function TransakIframe(props: TransakIframeProps) {
       email,
       walletAddress,
       partnerOrderId,
+      excludeFiatCurrencies,
     },
     onError: onFailedToLoad,
   });

packages/checkout/widgets-lib/src/components/Transak/useTransakIframe.ts

@@ -15,6 +15,7 @@ export type TransakNFTCheckoutParams = {
   walletAddress: string;
   email: string;
   partnerOrderId?: string;
+  excludeFiatCurrencies?: string[];
 };
 
 type UseTransakIframeProps = {
@@ -62,6 +63,7 @@ export const useTransakIframe = (props: UseTransakIframeProps) => {
         nftData: nfts,
         estimatedGasLimit,
         cryptoCurrencyCode,
+        excludeFiatCurrencies,
         ...restWidgetParams
       } = transakParams;
 
@@ -112,6 +114,10 @@ export const useTransakIframe = (props: UseTransakIframeProps) => {
         ...restWidgetParams,
       });
 
+      if (excludeFiatCurrencies) {
+        queryParams.append('excludeFiatCurrencies', excludeFiatCurrencies.join(','));
+      }
+
       return `${baseWidgetUrl}${queryParams.toString()}`;
     } catch {
       onError?.();

packages/checkout/widgets-lib/src/widgets/sale/SaleWidget.tsx

@@ -39,7 +39,7 @@ import { EventTargetContext } from '../../context/event-target-context/EventTarg
 import { OrderSummary } from './views/OrderSummary';
 import { CreditCardWarningDrawer } from './components/CreditCardWarningDrawer';
 
-type OptionalWidgetParams = Pick<SaleWidgetParams, 'excludePaymentTypes'>;
+type OptionalWidgetParams = Pick<SaleWidgetParams, 'excludePaymentTypes' | 'excludeFiatCurrencies'>;
 type RequiredWidgetParams = Required<
 Omit<SaleWidgetParams, 'walletProviderName'>
 >;
@@ -61,6 +61,7 @@ export default function SaleWidget(props: SaleWidgetProps) {
     environmentId,
     collectionName,
     excludePaymentTypes,
+    excludeFiatCurrencies,
     preferredCurrency,
     hideExcludedPaymentTypes,
     waitFulfillmentSettlements = true,
@@ -128,6 +129,7 @@ export default function SaleWidget(props: SaleWidgetProps) {
           passport: checkout?.passport,
           collectionName,
           excludePaymentTypes,
+          excludeFiatCurrencies,
           preferredCurrency,
           waitFulfillmentSettlements,
           hideExcludedPaymentTypes,

packages/checkout/widgets-lib/src/widgets/sale/SaleWidgetRoot.tsx

@@ -131,6 +131,7 @@ export class Sale extends Base<WidgetType.SALE> {
                     environmentId={this.parameters.environmentId!}
                     collectionName={this.parameters.collectionName!}
                     excludePaymentTypes={this.parameters.excludePaymentTypes!}
+                    excludeFiatCurrencies={this.parameters.excludeFiatCurrencies!}
                     preferredCurrency={this.parameters.preferredCurrency!}
                     hideExcludedPaymentTypes={
                       this.properties?.config?.hideExcludedPaymentTypes ?? false

packages/checkout/widgets-lib/src/widgets/sale/components/WithCard.tsx

@@ -32,6 +32,7 @@ export function WithCard(props: WithCardProps) {
     goToErrorView,
     environment,
     orderQuote,
+    excludeFiatCurrencies,
   } = useSaleContext();
   const executeTxn = signResponse?.transactions.find((txn) => txn.methodCall.startsWith('execute'));
 
@@ -69,6 +70,7 @@ export function WithCard(props: WithCardProps) {
       cryptoCurrencyCode={signResponse.order.currency.name}
       estimatedGasLimit={executeTxn.gasEstimate}
       partnerOrderId={executeTxn.params.reference}
+      excludeFiatCurrencies={excludeFiatCurrencies}
       onInit={onInit}
       onOpen={onOpen}
       onOrderCreated={onOrderCreated}

packages/checkout/widgets-lib/src/widgets/sale/context/SaleContextProvider.tsx

@@ -46,6 +46,7 @@ type SaleContextProps = {
   checkout: ConnectLoaderState['checkout'];
   passport?: Passport;
   excludePaymentTypes: SalePaymentTypes[];
+  excludeFiatCurrencies?: string[];
   preferredCurrency?: string;
   waitFulfillmentSettlements: boolean;
   hideExcludedPaymentTypes: boolean;
@@ -157,6 +158,7 @@ export function SaleContextProvider(props: {
       passport,
       collectionName,
       excludePaymentTypes,
+      excludeFiatCurrencies,
       preferredCurrency,
       waitFulfillmentSettlements,
       hideExcludedPaymentTypes,
@@ -380,6 +382,7 @@ export function SaleContextProvider(props: {
       orderQuote,
       signTokenIds: tokenIds,
       excludePaymentTypes,
+      excludeFiatCurrencies,
       selectedCurrency,
       waitFulfillmentSettlements,
       hideExcludedPaymentTypes,
@@ -413,6 +416,7 @@ export function SaleContextProvider(props: {
       orderQuote,
       tokenIds,
       excludePaymentTypes,
+      excludeFiatCurrencies,
       selectedCurrency,
       waitFulfillmentSettlements,
       hideExcludedPaymentTypes,

packages/checkout/widgets-sample-app/src/App.tsx

@@ -30,7 +30,7 @@ function App() {
         <div>
           <a
             href={
-              "/sale?environmentId=249d9b0b-ee16-4dd5-91ee-96bece3b0473&collectionName=Iguanas&excludePaymentTypes=credit&multicurrency=true"
+              "/sale?environmentId=249d9b0b-ee16-4dd5-91ee-96bece3b0473&collectionName=Iguanas&excludePaymentTypes=credit"
             }
           >
             Sale Widget

packages/checkout/widgets-sample-app/src/components/ui/sale/sale.tsx

@@ -78,8 +78,8 @@ const useParams = () => {
     .get("excludePaymentTypes")
     ?.split(",") as SalePaymentTypes[];
 
-  const preferredCurrency =
-    (urlParams.get("preferredCurrency") as string) ?? undefined;
+  const preferredCurrency = (urlParams.get("preferredCurrency") as string) ?? undefined;
+  const excludeFiatCurrencies = (urlParams.get("excludeFiatCurrencies") as string) ?? undefined;
   const hideExcludedPaymentTypes = Boolean(
     urlParams.get("hideExcludedPaymentTypes")
   );
@@ -91,6 +91,7 @@ const useParams = () => {
     excludePaymentTypes,
     preferredCurrency,
     hideExcludedPaymentTypes,
+    excludeFiatCurrencies: excludeFiatCurrencies?.split(","),
   };
 };
 
@@ -131,6 +132,7 @@ export function SaleUI() {
     excludePaymentTypes,
     preferredCurrency,
     hideExcludedPaymentTypes,
+    excludeFiatCurrencies,
   } = params;
   const [passportConfig, setPassportConfig] = useState(
     JSON.stringify(defaultPassportConfig, null, 2)
@@ -199,6 +201,7 @@ export function SaleUI() {
       collectionName,
       items: defaultItems,
       excludePaymentTypes,
+      excludeFiatCurrencies,
       preferredCurrency,
     });
     saleWidget.addListener(SaleEventType.CLOSE_WIDGET, () => {
@@ -302,6 +305,7 @@ export function SaleUI() {
             items: defaultItems,
             excludePaymentTypes,
             preferredCurrency,
+            excludeFiatCurrencies,
           })
         }
       >