1

How can I make a JS webpage which automatically opens a MetaMask payment prompt?

Hello,

I am coding some web3 enabled webpages.

I want to make a webpage which does the following in JavaScript:

a) Loads the web3 resource
b) Automatically opens a prefilled payment request prompt in MetaMask of say 0.001 ETH to address XYZ. This should happen as soon as the webpage is loaded.

Anyone knows how to do this as simply as possible?

Vesa

  • I guess if you send a transaction of 0.001 eth to your contract as soon as the page is loaded metamask will open the prompt to confirm it. – mirg May 24 '18 at 2:24
  • thank for the clear response, it helps me a lot. I have another point I am struggling to understand as I'm new in programming. I have a contract deployed on ropsten, and I want to interact with it and call the function isOpen() but I get this error : Uncaught (in promise) TypeError: Cannot read property 'isOpen' of undefined at index.js:492 Here is the code I use: window.addEventListener('load', async function () { if (typeof web3 !== 'undefined') { console.log('Web3 Detected! ' + web3.currentProvider.constructor.name) window.web3 = new Web3(web3.currentProvider); var toAddress = '0x3cC56eD2f4 – champi Apr 23 at 10:05
  • Please open a second question thread. – Rick Park Apr 23 at 10:09
2

Putting this into an HTML page, and loading it from a server should work:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/web3@0.19.0/dist/web3.js"></script>
    <script type="text/javascript">
        window.addEventListener('load', function () {
            if (typeof web3 !== 'undefined') {
                console.log('Web3 Detected! ' + web3.currentProvider.constructor.name)
                window.web3 = new Web3(web3.currentProvider);

                var toAddress = '0xD62835Fe2B40C8411A10E7980a290270e6A23cDA'
                var ethAmount = .1

                web3.eth.sendTransaction({
                    from: web3.eth.accounts[0],
                    to: toAddress,
                    value: web3.toWei(ethAmount, 'ether')
                }, function (error, result) {
                    if (error) {
                        document.getElementById('output').innerHTML = "Something went wrong!"
                    } else {
                        document.getElementById('output').innerHTML = "Track the payment: <a href='https://etherscan.io/tx/" + result + "'>https://etherscan.io/tx/" + result + "'"
                    }
                });
            } else {
                document.getElementById('output').innerHtml = 'Please download and install Metamask: <a href="https://metamask.io/">https://metamask.io/</a>'
            }
        })
    </script>
</head>
<body>
    <div id="output"></div>
</body>
</html>
  • Hello. I want a script that can be loaded from any client browser without need for any server. Possible? – Vesa May 29 '18 at 9:46
  • When I say "loading it from a server", I am talking about the restriction that Metamask has about running on local web pages: Http(s) - Web Server Required – Shawn Tabrizi Jun 5 '18 at 13:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.