Accept fiat payments

Enable the widget’s fiat onramp when users need to buy crypto before funding your app. Complete the shared widget quickstart and backend setup first; your proxy must forward the Swapped onramp routes.

Enable the onramp

import { DepositModal } from "@rhinestone/deposit-modal";
import "@rhinestone/deposit-modal/styles.css";

<DepositModal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  targetChain={8453}
  targetToken="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
  recipient="0xYOUR_RECIPIENT_ADDRESS"
  backendUrl={process.env.NEXT_PUBLIC_DEPOSIT_PROXY_URL}
  enableFiatOnramp
  onLifecycle={(event) => event.type === "complete" && console.log(event)}
/>

enableFiatOnramp adds the Cash funding option. The widget opens Swapped’s embedded checkout, where the user pays and completes KYC when required. You can run this flow without a connected wallet. When fiat is the only funding path you want to show, disable the other default rows:

<DepositModal
  // ...required props
  enableWallet={false}
  enableQrTransfer={false}
  enableFiatOnramp
/>

See payment methods and availability before restricting the methods shown.

Mobile apps

The native wrappers need an openUrl handler before they offer the card row. Present the provider in an in-app browser rather than a bare WebView; see mobile apps.

Track completion

Use callbacks and error handling for the open widget and webhooks for backend fulfillment. A completed provider order means Swapped sent the purchased crypto. It does not prove that Rhinestone delivered it to your configured destination. Track both stages through onramp and exchange orders. When the target is the same account, chain, and token as the purchased USDC on Base, no bridge events fire; the shared tracking guide covers that exception. Use the shared widget configuration, theming, and analytics guides for the rest of the integration.

​Enable the onramp

​Mobile apps

​Track completion

Enable the onramp

Mobile apps

Track completion