The Capsule Modal currently supports crypto on-ramping (buying crypto) via Stripe, MoonPay, and Ramp, and MoonPay , and off-ramping (selling crypto for fiat currency) via Ramp and MoonPay. This guide will help you integrate these services to enable seamless crypto purchases within your application.

Enabling on- and off-ramping in the Capsule Modal offers significant benefits for developers and their end users. By integrating fiat conversion providers, developers can enhance their dApps in the following ways:

  • Seamless Crypto Purchases: Simplifies the process for users to buy and sell 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.

​
Configuration

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

You can customize in which order the provider buttons appear in the Capsule Modal, as well as which assets are available to buy or sell from the provider interfaces.

When using 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

You must obtain a production Ramp API key for your own app and save it in the Capsule Developer Portal. For more information, please refer to the

Ramp API Key Documentation

.

​
Stripe

To use the Stripe widget, you must add Stripe script tags to the <head> tag of any pages where the modal will be instantiated:

index.html
<head>
  <title>Your Application</title>
  <script src="https://js.stripe.com/v3/"></script>
  <script src="https://crypto-js.stripe.com/crypto-onramp-outer.js"></script>
</head>

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

Was this page helpful?

Two-Factor AuthenticationNew: External Wallets