Skip to content

Instantly share code, notes, and snippets.

@ksaitor

ksaitor/ethereum-payment-metamask.html

Last active November 4, 2024 15:18
Show Gist options
  • Save ksaitor/6c832c106a8b9aee4f76a9145eb5d764 to your computer and use it in GitHub Desktop.
Save ksaitor/6c832c106a8b9aee4f76a9145eb5d764 to your computer and use it in GitHub Desktop.
Download ZIP
How to add Ethereum payments to your site with MetaMask
Raw
ethereum-payment-metamask.html
<!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
Copy link

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.

Copy link

ghost 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
Copy link

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

@agrapps
Copy link

agrapps commented Jul 3, 2021

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

@eoinmcnulty425
Copy link

It is saying I do not have metamask installed. Yet I do? I am using google chrome?

@ketlller
Copy link

Hi Bro/ Is there a way to do it with BUSD or USDT instead of ETH(BNB)?

@krisnfts
Copy link

krisnfts commented Dec 7, 2021

Hi! Thank you for the code! How can I do so it works also on mobile? Now when I open on mobile it says "no Metamask (or other Web3 Provider) installed". Seems like it doesn't detect the metamasks mobile App.
Thanks

@ra1yuga
Copy link

ra1yuga commented Jan 13, 2022

tried this on 13 jan 2022
didnt work
metamask says not connected to the site

can someone check and help

@El-JojA
Copy link

El-JojA commented Jan 19, 2022 •
edited
Loading

Tried this and I think it's a bit outdated. Here's how i tested it:

  1. Installed Metamask (I already had it)
  2. Created an address
  3. Changed to Ropsten Network in Metamask
  4. Installed http-server (npm install -g http-server)
  5. Added <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script> (https://github.com/ChainSafe/web3.js#in-the-browser)
  6. Changed web3.toWei() to web3.utils.toWei() (https://ethereum.stackexchange.com/questions/48068/error-web3-towei-is-not-a-function)
  7. Added from: MYROPSTENADDRESS in web3.eth.sendTransaction (I burned the string here since didn't what to spend too much time in the async ways of getting the addres from)
  8. Profit(?)

I've might have forgete something I did so I'm adding the result:
https://gist.github.com/El-JojA/2cca7b2e136aca4f28094d29707cc1c3

@Lakatoi
Copy link

Lakatoi commented Jan 22, 2022

Hello! Thank you very much for the code!!
I would like to add a data string on the transaction. Nevertheless, I cannot find the way to do it. Anybody can give me a hand to point me into the right direction?
Thanks!!

@4Jamo
Copy link

4Jamo commented Apr 9, 2022

Is there a way I can embed some Metamask code on my s]=Squarespace website so that I can allow Metamask payments - for example, can I copy and paste some code into the website to make a fully functioning wallet connect/Metamask button. I'm happy to pay someone some money if they can help me out.

@4Jamo
Copy link

4Jamo commented Apr 9, 2022

Is there a way I can embed some Metamask code on my s]=Squarespace website so that I can allow Metamask payments - for example, can I copy and paste some code into the website to make a fully functioning wallet connect/Metamask button. I'm happy to pay someone some money if they can help me out.

@stoll
Copy link

stoll commented May 8, 2022

Hey, 4Jamo!

I'm currently building EtherForms, a tool that will allow you to do exactly what you want, without coding skill requirements.

We were formed at ETHAmsterdam, and are currently building out our public launch.

Would be happy to help you 1:1 to get you setup! :)

You can join our Discord (link on website), and I'll be happy to assist you, free of charge.

@pruss68
Copy link

pruss68 commented Jul 31, 2022

Hi.
Thanks for the code. But it not working in mobile app. Have you any idea?

@yogeshsaroya
Copy link

How to take get payment in BUSD not in ETH ?

@vishrut66
Copy link

I also want to know. Is there a way to do it with BUSD or USDT instead of ETH(BNB)? please suggest some way to do it.

@yogeshsaroya
Copy link

I also want to know. Is there a way to do it with BUSD or USDT instead of ETH(BNB)? please suggest some way to do it.

Check here to take payment in BUSD or BNB

https://github.com/yogeshsaroya/metamask_payment/blob/main/take-payment-in-busd-or-bnb-using-web3js.html

@vishrut66
Copy link

thank you

@yogeshsaroya
Copy link

thank you

I will update this code with wallet model so it will work on safari or mobile as well. right now this code is only for chrome/firefox with metamask ext only

@BeycanDeveloper
Copy link

You can also choose to use CryptoPay, our all in one crypto payments solution for your WordPress sites.

Review the CryptoPay: https://beycanpress.com/cryptopay/

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