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.
Configuration
To enable on-ramping, pass the onRampConfig
prop to the CapsuleModal
component. The
onRampConfig
object has the following properties:
The on-chain asset you want users to purchase. Currently, supported assets are ETH
/ ETHEREUM
,
POLYGON
/ MATIC
, or USDC
.
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.
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
andasset
combination, or on-ramp initialization will fail. Refer to each provider’s latest documentation for information on supported assets.
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?