Add Rampnow as a fiat onramp provider

Add support for the new "rampnow" onramp provider across the codebase. Updates include: adding "rampnow" to Onramp types and API request body, adding it to the FiatProviders list and provider->onramp mapping, including it in the useBuyWithFiatQuotesForProviders hook, and adding the provider entry (icon/description) plus selection typing/handlers in the Bridge UI and payment types.

Author: 0xFirekeeper

packages/thirdweb/src/bridge/Onramp.ts

@@ -13,7 +13,7 @@ import type { TokenWithPrices } from "./types/Token.js";
 export { status } from "./OnrampStatus.js";
 
 type OnrampIntent = {
-  onramp: "stripe" | "coinbase" | "transak";
+  onramp: "stripe" | "coinbase" | "transak" | "rampnow";
   chainId: number;
   tokenAddress: ox__Address.Address;
   receiver: ox__Address.Address;
@@ -42,7 +42,7 @@ type OnrampPrepareQuoteResponseData = {
 
 // Explicit type for the API request body
 interface OnrampApiRequestBody {
-  onramp: "stripe" | "coinbase" | "transak";
+  onramp: "stripe" | "coinbase" | "transak" | "rampnow";
   chainId: number;
   tokenAddress: ox__Address.Address;
   receiver: ox__Address.Address;
@@ -272,8 +272,8 @@ export declare namespace prepare {
   export type Options = {
     /** Your thirdweb client */
     client: ThirdwebClient;
-    /** The onramp provider to use (e.g., "stripe", "coinbase", "transak") */
-    onramp: "stripe" | "coinbase" | "transak";
+    /** The onramp provider to use (e.g., "stripe", "coinbase", "transak", "rampnow") */
+    onramp: "stripe" | "coinbase" | "transak" | "rampnow";
     /** The destination chain ID */
     chainId: number;
     /** The destination token address */

packages/thirdweb/src/pay/buyWithFiat/getQuote.ts

@@ -290,12 +290,14 @@ export async function getBuyWithFiatQuote(
     // map preferred provider (FiatProvider) → onramp string expected by Onramp.prepare
     const mapProviderToOnramp = (
       provider?: FiatProvider,
-    ): "stripe" | "coinbase" | "transak" => {
+    ): "stripe" | "coinbase" | "transak" | "rampnow" => {
       switch (provider) {
         case "stripe":
           return "stripe";
         case "transak":
           return "transak";
+        case "rampnow":
+          return "rampnow";
         default: // default to coinbase when undefined or any other value
           return "coinbase";
       }

packages/thirdweb/src/pay/utils/commonTypes.ts

@@ -19,4 +19,4 @@ export type PayOnChainTransactionDetails = {
 
 export type FiatProvider = (typeof FiatProviders)[number];
 
-const FiatProviders = ["coinbase", "stripe", "transak"] as const;
+const FiatProviders = ["coinbase", "stripe", "transak", "rampnow"] as const;

packages/thirdweb/src/react/core/hooks/pay/useBuyWithFiatQuotesForProviders.ts

@@ -60,13 +60,13 @@ type UseBuyWithFiatQuotesForProvidersResult = {
 
 /**
  * @internal
- * Hook to get prepared onramp quotes from Coinbase, Stripe, and Transak providers.
+ * Hook to get prepared onramp quotes from Coinbase, Stripe, Transak, and Rampnow providers.
  */
 export function useBuyWithFiatQuotesForProviders(
   params?: UseBuyWithFiatQuotesForProvidersParams,
   queryOptions?: OnrampQuoteQueryOptions,
 ): UseBuyWithFiatQuotesForProvidersResult {
-  const providers = ["coinbase", "stripe", "transak"] as const;
+  const providers = ["coinbase", "stripe", "transak", "rampnow"] as const;
 
   const queries = useQueries({
     queries: providers.map((provider) => ({

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

@@ -21,7 +21,9 @@ import { Text } from "../../components/text.js";
 
 interface FiatProviderSelectionProps {
   client: ThirdwebClient;
-  onProviderSelected: (provider: "coinbase" | "stripe" | "transak") => void;
+  onProviderSelected: (
+    provider: "coinbase" | "stripe" | "transak" | "rampnow",
+  ) => void;
   toChainId: number;
   toTokenAddress: string;
   toAddress: string;
@@ -49,6 +51,12 @@ const PROVIDERS = [
     id: "transak" as const,
     name: "Transak",
   },
+  {
+    description: "Cards, bank transfers and more",
+    iconUri: "https://app.rampnow.io/favicon.ico",
+    id: "rampnow" as const,
+    name: "Rampnow",
+  },
 ];
 
 export function FiatProviderSelection({

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

@@ -184,7 +184,7 @@ export function PaymentSelection({
   };
 
   const handleOnrampProviderSelected = (
-    provider: "coinbase" | "stripe" | "transak",
+    provider: "coinbase" | "stripe" | "transak" | "rampnow",
   ) => {
     const recipientAddress =
       receiverAddress || payerWallet?.getAccount()?.address;

packages/thirdweb/src/react/web/ui/Bridge/types.ts

@@ -44,5 +44,5 @@ export type PaymentMethod =
       type: "fiat";
       payerWallet?: Wallet;
       currency: SupportedFiatCurrency;
-      onramp: "stripe" | "coinbase" | "transak";
+      onramp: "stripe" | "coinbase" | "transak" | "rampnow";
     };