This is a super-simple method to add a minting interface in plain web2 websites (PHP, pure HTML etc). Don't worry if you don't have any skill, the script will do the magic for you.
Add an input and a button as showed below:
<input type="number" id="amount-input" value="1">
<button id="um-button" network="polygon" method="buyNFT" price="50" amount="amount-input" infura="INFURA_KEY" contract="0x324ecF8184D84AD7b8687b2130eC82ac0D3af3ab">CONNECT WALLET</button>
Here you can see what's needed to fit into your contract (ask your web3 dev):
polygon
buyNFT
0x324ecF8184D84AD7b8687b2130eC82ac0D3af3ab
Then add you ABI (ask your web3 dev) inserting it in a constant like:
const ABI = [
{
"inputs": [],
"name": "buyNFT",
"outputs": [],
"stateMutability": "payable",
"type": "function",
"payable": true
}
]
And, at the end include the magic:
<script src="https://github.com/turinglabsorg/universal-mint-button/raw/master/umb.min.js"></script>
That's it! You can now interact with your smart contract!
Want to understand how it works on background? Simply run:
npm run dev
or, if you want to build again:
npm run build
At the end of the process will be needed to fix some undefined
issues, you can add trailing ?
to be sure the code will not crash.