Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to add Ethereum payments to your site with MetaMask
<!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 is where funds will be send to
const paymentAddress = '0x192c96bfee59158441f26101b2db1af3b07feb40'
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>
@ICBA03

This comment has been minimized.

Copy link

@ICBA03 ICBA03 commented Feb 13, 2021

Hello. Thanks for this code! Can you please help me with resolving this problem of my code?

  <div>
    <button class="pay-button">Deposit</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('ERROR: No Web3 Provider installed!')
      }
    })

    const initPayButton = () => {
      $('.pay-button').click(() => {
        // paymentAddress is where funds will be send to
        const paymentAddress = '0x192c96bfee591584x0'
        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>

I receive this error: "You are accessing the MetaMask window.web3.currentProvider shim. This property is deprecated; use window.ethereum instead. For details, see: https://docs.metamask.io/guide/provider-migration.html#replacing-window-web3" and I don't know how to solve this.

@Sankhyasiddesh

This comment has been minimized.

Copy link

@Sankhyasiddesh Sankhyasiddesh commented May 30, 2021

You can add Metamask web3 legacy node package to fix this.
Add this script on the head,
<script src="https://unpkg.com/@metamask/legacy-web3@latest/dist/metamask.web3.min.js"></script>

or install as a dependency
npm install @metamask/legacy-web3

@StarLinktrooper

This comment has been minimized.

Copy link

@StarLinktrooper StarLinktrooper commented Jun 20, 2021

Is there a way to do it with DAI or USDT instead of ETH?

@agrapps

This comment has been minimized.

Copy link

@agrapps agrapps commented Jul 3, 2021

Also want to know if i can set other currency? like USDT, BNB, DAI, havent found any information about

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment