Integrate Off-Ramp using our SDKs

Build a working MoonPay crypto-to-fiat off-ramp integration with your test API key.

Sign in to your MoonPay dashboardand navigate to the Developers section to access your test API keys.
Personalize your widget using the options available on our off-ramp parameters page.
Don't forget to include the domain where the off-ramp will be displayed in your allowed domains list.

Our Web SDK is available for desktop use, while mobile users can opt for our React Native, iOS, or Android SDKs.

To integrate our Web SDK, simply add it as a script in your HTML file. After incorporating this script, your application will be set to initiate our JavaScript Web SDK, complete with customizable options for flow, environment, variant, as well as Buy, Sell, or Swap-related parameters.

<!--Adds the MoonPay SDK as a script to your HTML file-->
<script defer src="https://static.moonpay.com/web-sdk/v1/moonpay-web-sdk.min.js"></script> 

<!--Initialize the SDK in your application with the flow, environment, variant, and any parameters related to Buy, Sell or Swap.-->
<script>
    window.onload = function() {
        const moonpaySdk = window.MoonPayWebSdk.init({  
            flow: 'sell',
            environment: 'sandbox',
            variant: 'overlay',  
            params: {  
                apiKey: 'pk_test_key',
                theme: 'dark',
                quoteCurrencyCode: 'usd',
                baseCurrencyAmount: '.01',
                defaultBaseCurrencyCode: 'eth'
            },
            debug: true
        });
    }
</script>

Launch the MoonPay widget in Overlay, New Tab, New Window modes, or as an Embedded iFrame.

Open the MoonPay Sell widget

Legacy integration

To benefit from our latest features we strongly advise using our SDKs. However, if your technology stack is incompatible, you can opt for our legacy browser based widget URL integration.

You can use the below pre-written code to quickly get started on adding a 'Sell Crypto' button that opens the MoonPay widget in a new browser tab.

<!--Opens the MoonPay widget in a new browser tab-->
<body>
    <div class="container">
        <button onclick="window.open('https://sell-sandbox.moonpay.com/?apiKey=pk_test_123', '_blank')">Sell with MoonPay</button>
    </div>
</body>

.container {
    background-color: #392a54;
    padding: 20px;
    text-align: center;
}

button {
    background-color: #7d00fe;
    border: none;
    color: white;
    padding: 15px 50px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
    background-image: url('https://images.crunchbase.com/image/upload/c_lpad,h_170,w_170,f_auto,b_white,q_auto:eco,dpr_1/jglje7ar0xc6j5lvai6t');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
}

Here's an example. Give it a try!

Open the MoonPay widget in a New Tab

Integration Options

OPTION	BENEFITS	BEST FOR
Overlay Recommended	- Full parameter customization - Shows the widget on top of your website for a native UX.	Directs the user's attention towards completing their purchase while keeping them on your website or application.
Embedded iframe	- Full parameter customization - Allows customized placement of the MoonPay widget into a specific part of your page.	Users who want control of where the MoonPay widget is placed on their website or application.
New tab or new window	- Full parameter customization - Opens the MoonPay widget either in a new browser tab or new fixed window	Directs the user's attention towards completing their purchase while keeping them on your website or application.
Branded landing page	- Full parameter customization - Landing page customization - Full themeId customization	Users who want full customization of the landing page and MoonPay widget. e.g. https://www.moonpay.com/coingecko
No-code URL generation	- No code required (no SDK) - Minimal customization - Send users to a MoonPay hosted onramp https://buy.moonpay.com/ via a new browser tab or new browser window	Users who don't want to write any code and have limited resources.