Configuring Fiat On-Ramps

Enabling crypto purchase on-ramp flows for the Capsule Modal

The Capsule Modal currently supports crypto on-ramping from Stripe and Ramp. This guide will help you integrate these services to enable seamless crypto purchases within your application.

Enabling on-ramping in the Capsule Modal offers significant benefits for developers and their end users. By integrating on-ramp solutions like Stripe and Ramp, developers can enhance their dApps in the following ways:

  • Seamless Crypto Purchases: Simplifies the process for users to purchase crypto directly within the app, reducing friction and enhancing the overall user experience.

  • Increased User Engagement: Provides a user-friendly interface that helps onboard and engage users, reducing drop-off rates and improving retention.

  • Flexible Payment Options: Supports a wide range of payment methods, offering users more choices and convenience.

  • Compliance and Security: Built-in tools for fraud prevention and identity verification help meet regulatory requirements, ensuring secure transactions.

By enabling on-ramping, developers can provide their users with a streamlined, secure, and flexible way to purchase and use crypto within their dApps, significantly enhancing the overall user experience.


To enable on-ramping, pass the onRampConfig prop to the CapsuleModal component. The onRampConfig object has the following properties:

  • asset: The on-chain asset you want users to purchase. Currently, supported assets are ETH / ETHEREUM, POLYGON / MATIC, or USDC.

  • network: The destination network or blockchain for the purchased assets. Currently, supported networks are ETHEREUM (mainnet), BASE, ARBITRUM, OPTIMISM, and POLYGON.

  • You must ensure that your asset and network props are a valid combination, or on-ramp initialization will fail.

  • providers: An array of one or more on-ramp provider configuration objects. Each object should be in the form { id: 'STRIPE' | 'RAMP' }, with additional configuration properties if required.

    • For Ramp, you must obtain a production API key and include it as hostApiKey: { id: 'RAMP', hostApiKey: '...' }.

    • You must ensure each passed provider supports your chosen network and asset combination, or on-ramp initialization will fail. Refer to each provider's latest documentation for information on supported assets.

  • testMode?: If set to true, the specified on-ramp providers will run in their respective test modes, with no mainnet crypto assets exchanged. Providers' test payment methods will also be available. Ensure testMode is set to false or undefined when your app runs in production mode.

// All string props are case-insensitive.
    network: 'ETHEREUM'
      // Supported values: 'BASE', 'OPTIMISM', 'ARBITRUM', 'POLYGON'
    asset: "ETH",
      // Supported values: 'ETHEREUM', 'USDC', 'POLYGON', 'MATIC'
    providers: [
      { id: "STRIPE" },
        // Enables Stripe
        id: "RAMP",
        hostApiKey: "your-ramp-api-key",
        // Enables Ramp
    testMode: false,
      // Enable test mode by passing 'true'

Provider-Specific Setup


To obtain a Ramp API key, refer to the Ramp API Key Documentation.


To use the Stripe on-ramp, you need to add the Stripe script tags to the <head> tag of any pages where the modal will be instantiated:

  <title>Your Application</title>
  <script src=""></script>
  <script src=""></script>

Attention: If you encounter CSP policy issues related to Stripe scripts in production, ensure to configure your Content Security Policy (CSP) to allow scripts from and Consider adding the following meta tag to your HTML <head> to resolve the issue:

  content="script-src 'self';"

Test the changes in a local production build to confirm the problem is resolved before deploying.

For further details, refer to the official documentation of Stripe and Ramp.

Last updated