1. Install Map3 Supercharge SDK
Ensure you have the latest version of the SDK running on your clients by installing the script below.
<head>
<!-- other scripts and metadata !-->
<script defer src="https://api.map3.xyz/console/relay/gh/supercharge/master/dist/global/index.js"></script>
<link defer href="https://api.map3.xyz/console/relay/gh/supercharge/master/dist/index.css" rel="stylesheet"></link>
</head>
2. Initialize the Map3 Supercharge SDK
const initialize = () => {
const supercharge = initMap3Supercharge({
anonKey: '<YOUR_MAP3_ANON_KEY>',
options: {
callbacks: {
onAddressRequested: async (coin, network) => {
// generate a deposit address to display to the user
// we'll call this callback function before displaying
// an address or generating a payment for the user to sign.
const depositAddress = await getDepositAddress(coin, network);
return { address: depositAddress };
},
}
}
userId: '<YOUR_END_USER_ID>' // a user identifier (like an email or UUID)
});
supercharge.open()
}
document.addEventListener('DOMContentLoaded', initialize);
defer
script and styleSo the SDK does not block additional rendering of your app we recommend using the
defer
attribute.You will need to add an event listener on the document (
DOMContentLoaded
) before initializing the SDK. Below you'll find an example.
window.addEventListener('DOMContentLoaded', (event) => {
initialize()
});