CODEWITHSUNDEEP
javascriptjqueryblockchainethereummetamask
mental
mental

Reputation: 83

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="https://cdnjs.cloudflare.com/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>

Upvotes: 4

Views: 10597

Answers (3)

caffeinum
caffeinum

Reputation: 431

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

buildship popup asking user to connect his wallet and pay

Upvotes: 2

gopeca
gopeca

Reputation: 1705

You have to import web3.js library adding this line:

<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

Or you can install it by following these instructions: https://github.com/ChainSafe/web3.js

Upvotes: 1

mental
mental

Reputation: 83

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

Upvotes: 0

Related Questions