Pay with Card

Key: depositWithCash · Deposit method: onramp

The fiat on-ramp lets users fund with a card, Apple Pay, or bank transfer — no crypto required. Swapper's on-ramp partner converts cash to crypto, then that crypto is routed and swapped to your destination token.

What the user experiences

1. Chooses Pay with Card (labeled "Buy with Fiat" by default, or "Deposit with Fiat" if you set actionLabel: "deposit").

2. Enters an amount and picks a currency and payment method available in their region.

3. Completes payment with the provider (hosted, PCI-compliant).

4. The purchased crypto is delivered and swapped to your dstTokenAddr, which arrives at depositWalletAddress.

Availability of currencies and payment methods is determined by the provider and the user's geolocation.

Two settlement shapes

Where the purchased crypto lands determines how the deposit is reported:

• Straight to an external wallet — the on-ramp delivers directly. The deposit is fully done at completed.

• Into a Swapper smart wallet, then swept onward — when the destination needs a further swap/bridge, the on-ramp funds one of our smart wallets, and the onward swap is tracked as a separate smart_wallet deposit. Final delivery is marked by that second deposit's completion.

In the second case you receive two webhook events — one onramp, one smart_wallet — correlated on-chain. Don't double-count them. See Webhooks → Linking.

What your app receives

A transaction.completed webhook whose deposit.method is onramp, with providerData.type = "onramp":

{
  "type": "onramp",
  "transactionId": "a1b2c3d4-…",
  "fiatCurrency": "USD",
  "fiatAmount": "11.50",
  "paymentMethod": "CARD"
}

The on-ramp deposit also carries depositTxHash — the on-chain tx that delivered the crypto — which is the key used to link it to a follow-on smart-wallet swap.

In the browser you also get a transaction_success widget event with depositOption: "depositWithCash".

Mobile WebViews

If you embed the widget inside a native mobile WebView (e.g. Ionic/Capacitor), set webviewMode: true. The on-ramp step then renders a plain user-clickable link (instead of calling window.open(..., "_blank")), so iOS/Android WebViews can hand the payment URL to the system browser.

Enabling it

openSwapperModal({
  integratorId: "your-id",
  dstChainId: "8453",
  dstTokenAddr: "0x833…913",
  depositWalletAddress: "0x…",
  supportedDepositOptions: ["depositWithCash"], // show only the on-ramp
  actionLabel: "buy",
});