Skip to content

A set of tip button images for use with MetaMask

Notifications You must be signed in to change notification settings

daeplatform/TipButton

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 

Repository files navigation

Pay With MetaMask Buttons

Live example

A variety of MetaMask approved buttons for use on your own website to suggest that your users pay with MetaMask!

Usage is very easy:

<div class="tip-button"></div>
.tip-button {
  width: 304px;
  height: 89px;
  background-size: 100%;
  background-image: url('images/1_pay_mm_off.png');
  cursor: pointer;
}

.tip-button:hover {
  background-image: url('images/1_pay_mm_over.png');
}

.tip-button:active {
  background-image: url('images/1_pay_mm_off.png');
}
var tipButton = document.querySelector('.tip-button')
tipButton.addEventListener('click', function() {
  if (typeof web3 === 'undefined') {
    return renderMessage('You need to install MetaMask to use this feature.  https://metamask.io')
  }

  var user_address = web3.eth.accounts[0]
  web3.eth.sendTransaction({
    to: YOUR_ADDRESS,
    from: user_address,
    value: web3.toWei('1', 'ether'),
  }, function (err, transactionHash) {
    if (err) return renderMessage('Oh no!: ' + err.message)

    // If you get a transactionHash, you can assume it was sent,
    // or if you want to guarantee it was received, you can poll
    // for that transaction to be mined first.
    renderMessage('Thanks!')
  })
})

The Images

1_pay_mm_off.png

1_pay_mm_over.png

2_pay_mm_over.png

2_pay_mm_off.png

3_pay_mm_off.png

3_pay_mm_over.png

4_pay_mm_over.png

4_pay_mm_over

3_pay_mm_over.png

5_pay_mm_off.png

5_pay_mm_over.png

6_pay_mm_off.png

6_pay_mm_over.png

About

A set of tip button images for use with MetaMask

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 100.0%