├── images ├── 1_pay_mm_off.png ├── 1_pay_mm_over.png ├── 2_pay_mm_off.png ├── 2_pay_mm_over.png ├── 3_pay_mm_off.png ├── 3_pay_mm_over.png ├── 4_pay_mm_off.png ├── 4_pay_mm_over.png ├── 5_pay_mm_off.png ├── 5_pay_mm_over.png ├── 6_pay_mm_off.png └── 6_pay_mm_over.png ├── index.html └── README.md /images/1_pay_mm_off.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corymsmith/TipButton/master/images/1_pay_mm_off.png -------------------------------------------------------------------------------- /images/1_pay_mm_over.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corymsmith/TipButton/master/images/1_pay_mm_over.png -------------------------------------------------------------------------------- /images/2_pay_mm_off.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corymsmith/TipButton/master/images/2_pay_mm_off.png -------------------------------------------------------------------------------- /images/2_pay_mm_over.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corymsmith/TipButton/master/images/2_pay_mm_over.png -------------------------------------------------------------------------------- /images/3_pay_mm_off.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corymsmith/TipButton/master/images/3_pay_mm_off.png -------------------------------------------------------------------------------- /images/3_pay_mm_over.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corymsmith/TipButton/master/images/3_pay_mm_over.png -------------------------------------------------------------------------------- /images/4_pay_mm_off.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corymsmith/TipButton/master/images/4_pay_mm_off.png -------------------------------------------------------------------------------- /images/4_pay_mm_over.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corymsmith/TipButton/master/images/4_pay_mm_over.png -------------------------------------------------------------------------------- /images/5_pay_mm_off.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corymsmith/TipButton/master/images/5_pay_mm_off.png -------------------------------------------------------------------------------- /images/5_pay_mm_over.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corymsmith/TipButton/master/images/5_pay_mm_over.png -------------------------------------------------------------------------------- /images/6_pay_mm_off.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corymsmith/TipButton/master/images/6_pay_mm_off.png -------------------------------------------------------------------------------- /images/6_pay_mm_over.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corymsmith/TipButton/master/images/6_pay_mm_over.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | MetaMask Tip Button Example 5 | 6 | 25 | 26 | 27 | 28 | 29 | 30 |

MetaMask Tip Button Example

31 | View on Github 32 |
33 |
34 | 35 | 36 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Pay With MetaMask Buttons 2 | 3 | [Live example](https://metamask.github.io/TipButton/) 4 | 5 | A variety of MetaMask approved buttons for use on your own website to suggest that your users pay with MetaMask! 6 | 7 | Usage is very easy: 8 | 9 | ```html 10 |
11 | ``` 12 | 13 | ```css 14 | .tip-button { 15 | width: 304px; 16 | height: 89px; 17 | background-size: 100%; 18 | background-image: url('images/1_pay_mm_off.png'); 19 | cursor: pointer; 20 | } 21 | 22 | .tip-button:hover { 23 | background-image: url('images/1_pay_mm_over.png'); 24 | } 25 | 26 | .tip-button:active { 27 | background-image: url('images/1_pay_mm_off.png'); 28 | } 29 | ``` 30 | 31 | ```javascript 32 | var tipButton = document.querySelector('.tip-button') 33 | tipButton.addEventListener('click', function() { 34 | if (typeof web3 === 'undefined') { 35 | return renderMessage('You need to install MetaMask to use this feature. https://metamask.io') 36 | } 37 | 38 | var user_address = web3.eth.accounts[0] 39 | web3.eth.sendTransaction({ 40 | to: YOUR_ADDRESS, 41 | from: user_address, 42 | value: web3.toWei('1', 'ether'), 43 | }, function (err, transactionHash) { 44 | if (err) return renderMessage('Oh no!: ' + err.message) 45 | 46 | // If you get a transactionHash, you can assume it was sent, 47 | // or if you want to guarantee it was received, you can poll 48 | // for that transaction to be mined first. 49 | renderMessage('Thanks!') 50 | }) 51 | }) 52 | ``` 53 | 54 | ## The Images 55 | 56 | 1_pay_mm_off.png 57 | ![](images/1_pay_mm_off.png) 58 | 59 | 1_pay_mm_over.png 60 | ![](images/1_pay_mm_over.png) 61 | 62 | 2_pay_mm_over.png 63 | ![](images/2_pay_mm_over.png) 64 | 65 | 2_pay_mm_off.png 66 | ![](images/2_pay_mm_off.png) 67 | 68 | 3_pay_mm_off.png 69 | ![](images/3_pay_mm_off.png) 70 | 71 | 3_pay_mm_over.png 72 | ![](images/3_pay_mm_over.png) 73 | 74 | 4_pay_mm_over.png 75 | ![](images/4_pay_mm_off.png) 76 | 77 | 4_pay_mm_over 78 | ![](images/4_pay_mm_over.png) 79 | 80 | 3_pay_mm_over.png 81 | ![](images/3_pay_mm_over.png) 82 | 83 | 5_pay_mm_off.png 84 | ![](images/5_pay_mm_off.png) 85 | 86 | 5_pay_mm_over.png 87 | ![](images/5_pay_mm_over.png) 88 | 89 | 6_pay_mm_off.png 90 | ![](images/6_pay_mm_off.png) 91 | 92 | 6_pay_mm_over.png 93 | ![](images/6_pay_mm_over.png) 94 | 95 | 96 | --------------------------------------------------------------------------------