├── 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 | 
58 |
59 | 1_pay_mm_over.png
60 | 
61 |
62 | 2_pay_mm_over.png
63 | 
64 |
65 | 2_pay_mm_off.png
66 | 
67 |
68 | 3_pay_mm_off.png
69 | 
70 |
71 | 3_pay_mm_over.png
72 | 
73 |
74 | 4_pay_mm_over.png
75 | 
76 |
77 | 4_pay_mm_over
78 | 
79 |
80 | 3_pay_mm_over.png
81 | 
82 |
83 | 5_pay_mm_off.png
84 | 
85 |
86 | 5_pay_mm_over.png
87 | 
88 |
89 | 6_pay_mm_off.png
90 | 
91 |
92 | 6_pay_mm_over.png
93 | 
94 |
95 |
96 |
--------------------------------------------------------------------------------