I need to add transaction functionality for a button on my website, how can I do it? After clicking on the button (I am using the Metamask extension for the Firefox browser), the Metamask interface should open, displaying the details of the transaction. I used the code below but saw that message in the browser console: "Uncaught (in promise) ReferenceError: Web3 is not defined". What could be the problem?
<!DOCTYPE html>
<html>
<head>
<script src=".2.1/jquery.min.js">
</script>
</head>
<body>
<div>
<button class="pay-button">Pay</button>
<div id="status"></div>
</div>
<script type="text/javascript">
window.addEventListener('load', async() => {
if (window.ethereum) {
window.web3 = new Web3(ethereum);
try {
await ethereum.enable();
initPayButton()
} catch (err) {
$('#status').html('User denied account access', err)
}
} else if (window.web3) {
window.web3 = new Web3(web3.currentProvider)
initPayButton()
} else {
$('#status').html('No Metamask (or other Web3 Provider) installed')
}
})
const initPayButton = () => {
$('.pay-button').click(() => {
// paymentAddress
const paymentAddress = '0x01910833896EEdf036A99b2CC34df6Da01BB15E3'
const amountEth = 1
web3.eth.sendTransaction({
to: paymentAddress,
value: web3.toWei(amountEth, 'ether')
}, (err, transactionId) => {
if (err) {
console.log('Payment failed', err)
$('#status').html('Payment failed')
} else {
console.log('Payment successful', transactionId)
$('#status').html('Payment successful')
}
})
})
}
</script>
</body>
</html>
I need to add transaction functionality for a button on my website, how can I do it? After clicking on the button (I am using the Metamask extension for the Firefox browser), the Metamask interface should open, displaying the details of the transaction. I used the code below but saw that message in the browser console: "Uncaught (in promise) ReferenceError: Web3 is not defined". What could be the problem?
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
</head>
<body>
<div>
<button class="pay-button">Pay</button>
<div id="status"></div>
</div>
<script type="text/javascript">
window.addEventListener('load', async() => {
if (window.ethereum) {
window.web3 = new Web3(ethereum);
try {
await ethereum.enable();
initPayButton()
} catch (err) {
$('#status').html('User denied account access', err)
}
} else if (window.web3) {
window.web3 = new Web3(web3.currentProvider)
initPayButton()
} else {
$('#status').html('No Metamask (or other Web3 Provider) installed')
}
})
const initPayButton = () => {
$('.pay-button').click(() => {
// paymentAddress
const paymentAddress = '0x01910833896EEdf036A99b2CC34df6Da01BB15E3'
const amountEth = 1
web3.eth.sendTransaction({
to: paymentAddress,
value: web3.toWei(amountEth, 'ether')
}, (err, transactionId) => {
if (err) {
console.log('Payment failed', err)
$('#status').html('Payment failed')
} else {
console.log('Payment successful', transactionId)
$('#status').html('Payment successful')
}
})
})
}
</script>
</body>
</html>
-
1
What Do You Mean “It Doesn’t Work”? Use the browser console (dev tools) (hit
F12orCtrl+Shift+J) and read any errors. – Sebastian Simon Commented Mar 12, 2021 at 21:00 - Thanks for the remendation - I see the following message: "Uncaught (in promise) ReferenceError: Web3 is not defined" – mental Commented Mar 12, 2021 at 21:07
3 Answers
Reset to default 2I am building a service that solves this. Usage is as simple as opening a popup:
const to = '0x9ebf6f16c0dad9f92eaaca8dbd40944e614338ae'
const value = 0.01 // ether
window.open(`https://pay.buildship.dev/to/${to}?value=${value}`,'payment','width=500, height=800');
If you encounter any issues or interested to ask some questions, you can contact me https://t.me/buildship
You have to import web3.js library adding this line:
<script src="https://cdn.jsdelivr/npm/web3@latest/dist/web3.min.js"></script>
Or you can install it by following these instructions: https://github./ChainSafe/web3.js
I found that in January Metamask updated their API and that's why the code isn't working.
Here you can find the migraition guide:
https://docs.metamask.io/guide/provider-migration.html