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.

​
Configuration

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

asset
string
required

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

network
string
required

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
array
required

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
boolean

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.

​
Provider-Specific Setup

​
Ramp

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

​
Stripe

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:

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 https://js.stripe.com and https://crypto-js.stripe.com. Consider adding the following meta tag to your HTML <head> to resolve the issue:

<meta
  http-equiv="Content-Security-Policy"
  content="
      default-src 'self'; 
      script-src 'self' 'unsafe-eval' https://js.stripe.com https://crypto-js.stripe.com; 
      connect-src 'self' https://r.stripe.com wss://www.walletlink.org https://api.web3modal.com https://rpc.walletconnect.com https://mainnet.era.zksync.io https://api.usecapsule.com https://api.coingecko.com wss://relay.walletconnect.com wss://relay.walletconnect.org; 
      worker-src 'self' blob:; 
      frame-src 'self' https://crypto-js.stripe.com https://js.stripe.com; 
      img-src 'self' data: https://api.web3modal.com blob:; 
      font-src 'self' https://fonts.googleapis.com https://fonts.gstatic.com; 
      style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
    " />

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.

Was this page helpful?

Two-Factor AuthenticationCapsule Webinars and Talks