Widget Setup

Please find your use case for Magik on this page

Using Magik in React JS App

If you are using ReactJS as your frontend UI, you can use our React SDK to quickly setup the Widget

You can use npm i --save @magiklabs/react-sdk or yarn add @magiklabs/react-sdk to add the sdk to your project.

After that you can use the following code to add the widget to your react app

TypeScript

 <MagikWidget
            onClose={handleClose}
            apiKey={API_KEY}
            tokens={[{
                address: '0x0d500b1d8e8ef31e21c99d1db9a6444d3adf1270',
               	depositAddress: '0x49c1657987D3355C9Cd862580B3cd96A9cFF763f',
                chainId: 'polygon-pos';  
            }]
            fiatAmount={'30'}
            defaultCountry={'IN'}
            userEmail={'[email protected]'}
            preferredPrimaryColor='#D480FF'
            partnerContext={{
						 'refId': 'your-order-id'
            }}
            widgetType='embedded'
        />

Events fired by the Widget:

Name	Type	Description
OnClose	function call	This event is fired when the widget is closed by the user.

See Widget Appearance section for details on parameters and Widget Parameter Reference for full Parameter Reference. Need more events on the frontend ? Tell us at [email protected]

Generating the URL

If you are using javascript or a server side language to generate our Url, here are a few things to keep in mind.

Base url is onramp.magiklabs.io. See below the rest of the important

{{base_url}}/?apiKey={{your-key}}
&tokens=[{%22address%22:%220x0d500b1d8e8ef31e21c99d1db9a6444d3adf1270%22,%22chainId%22:%22polygon-pos%22,%22depositAddress%22:null}]
&fiatAmount=30000
&userEmail={{email}}
&primaryColor={{hex_code_of_color}}
&widgetType=paymentLink
&defaultCountry={{isoCodelike_US}}

As you can see the tokens parameter is a bit more complex. This is so we can support accepting multiple tokens. The tokens parameter is a JSON String with the following parameter

JSON

[{
"address": "0xaddress",
"chainId": "polygon-pos",
"depositAddress": "0xaddress" or null
}]

You can provide the tokens you wish to get and depositAddress for each token.

If you do not know the user's depositAddress, pass null in it.

Be careful around encoding Url parameters. Most libraries automatically encode Url parameters such as # to %23, " to %22 and so forth.

If the url you create does not work, this could be because of double encoding or no encoding.

You can see the list of supported CryptoCurrencies in the Reference Section to find the right values for yourself.

Using Magik with Iframe Url (for non-react)

Magik can be integrated as an iframe in your application. If you are using the embedded option, keep in mind the min Width and height requirements (See Widget Appearance Section).

You can use the url

You can listen to these two events using the window.addEventListener('message', handleEvent)

• window.parent.postMessage('magikOnload');
• window.parent.postMessage('close');

Using Magik as a payment Link

To create a payment link for your customers, you can create an onramp.magiklabs.io link to your customers with the right parameters.

You need to add widgetType=paymentLink to create a payment link for your customers.

Using as APIs

If you want to use our APIs to add Magik, contact us at [email protected]