javascript - Add a button for payment via Metamask on the website

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>

<!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>

Share Improve this question edited Mar 12, 2021 at 21:12 j08691 208k32 gold badges269 silver badges280 bronze badges asked Mar 12, 2021 at 20:53 mental 831 gold badge3 silver badges9 bronze badges

1 What Do You Mean “It Doesn’t Work”? Use the browser console (dev tools) (hit F12 or Ctrl+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

Add a ment |

3 Answers 3

Sorted by: Reset to default 2

I 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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Add a button for payment via Metamask on the website - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)