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 and 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 .

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>

Open the MoonPay Sell widget

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;
}

Open the MoonPay widget in a New Tab

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

No-code URL generation

Users who don't want to write any code and have limited resources.

Updated 3 months ago

Table of Contents
- - Launch the MoonPay widget in Overlay, New Tab, New Window modes, or as an Embedded iFrame.
- Legacy integration
  - Here's an example. Give it a try!
- Integration Options

PreviousIntegrate Off-Ramp using a URL NextConfigure the Off-Ramp user journey

<script defer src="https://static.moonpay.com/web-sdk/v1/moonpay-web-sdk.min.js"></script>  <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>

 <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; }