The Capsule Modal currently supports crypto on-ramping from Stripe, MoonPay, 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

Configure your on-ramp providers in the Capsule Developer Portal.

On the Capsule Modal, you can supply the prop onRampTestMode to indicate that each provider should run in its respective test mode. In test mode, no fiat value is exchanged and transactions are either simulated or execute on each chain’s testnet equivalent. Be careful not to run your providers in test mode in your production application.

​
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 AuthenticationNew: External Wallets