Skip to content

Commit ea9d6ab

Browse files
thejoshualewisthejoshualewis
committed
Initial setup for donation code
0 parents  commit ea9d6ab

File tree

3 files changed

+385
-0
lines changed

3 files changed

+385
-0
lines changed

‎README.md

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Donation Template
2+
3+
## Overview
4+
5+
This template is designed to allow a user to copy and paste into an existing website with minimal config to accept BitPay Donations.
6+
7+
# Requirements
8+
9+
This plugin requires the following:
10+
11+
* A BitPay merchant account ([Test](http://test.bitpay.com) and [Production](http://www.bitpay.com))
12+
13+
# Installation
14+
15+
To install, copy and paste into an existing page (including css references, jquery, etc). You may need to adjust file paths.
16+
17+
# Configuration
18+
19+
* Change the header/footer placeholder text as needed
20+
* If there is a **maximum donation amount**, update the Javascript in the `submitForm` function.
21+
* To add more/less pre-defined rows, copy and paste the existing row/columns, and update the values as needed.
22+
* you will also need to add/remove these values in the `$payment_arr` array, located in the `updateCSS` function.
23+
* Login to your BitPay dashboard ([Test](http://test.bitpay.com/dashboard) or [Production](http://www.bitpay.com/dashboard))
24+
* Click **Payment Tools** on the left
25+
* Click **Donation Buttons**
26+
* If you do not see this, you will need to contact our compliance team at [[email protected]](mailto:[email protected])
27+
* Click **Generate**
28+
* Scroll down and look for code that resembles the following
29+
* ```<input type="hidden" name="data" value = "<long string of characters">```
30+
* Copy that value into the source code of this repo
31+
* Edit the **redirectURL** value to redirect users after a payment is made
32+
33+
**Configuration** is now complete.
34+
35+
* *note*: if you are using the `test.bitpay.com` to verify functionality, the **form action** should point to `https://test.bitpay.com/checkout`. If you are in a live environment, it should be changed to `https://bitpay.com/checkout` with a **production** token.
36+
37+
38+
## License
39+
40+
[GNU General Public License version 3 (GPLv3)](https://github.com/opencart/opencart/blob/master/license.txt)
41+

‎favicon.ico

5.14 KB
Binary file not shown.

‎index.html

+344
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,344 @@
1+
<html>
2+
<head>
3+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
4+
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap" rel="stylesheet">
5+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
6+
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
7+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
8+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
9+
10+
<style>
11+
.payment-wrapper{
12+
width:100%;
13+
padding:20px;
14+
}
15+
.payment-cell{
16+
height:50px;
17+
margin:5px;
18+
padding-top:10px;
19+
background-color:#E6E9ED;
20+
color:#000;
21+
}
22+
23+
.payment-info{
24+
25+
padding-top:10px;
26+
}
27+
.emailStyle{
28+
width:90%;
29+
}
30+
31+
.wrapper{
32+
width:100%;
33+
margin-left:20px;
34+
margin-right:20px;
35+
}
36+
.customPayment{
37+
width:99%;
38+
height:30px;
39+
}
40+
.headerTop{
41+
color:#1C2445;
42+
}
43+
.headerBottom{
44+
color:#1C2445;
45+
}
46+
.donateButton{
47+
background-color: #1C2445 !important;
48+
border-color: #1C2445 !important;
49+
}
50+
.disclaimer{
51+
margin-top:20px;
52+
color:#1C2445;
53+
font-size:12px;
54+
55+
}
56+
.selectedPayment{
57+
background-color:#2E3476;
58+
color:#fff;
59+
}
60+
61+
/**bitpay form css**/
62+
.bitpay-donate { margin:20px 0;}
63+
.bitpay-donate fieldset {border:0;}
64+
.bitpay-donate .field-input { color: #666;background: #fff;border: 1px solid #eee;height: 30px;box-sizing: border-box;flex-grow: 1;}
65+
.bitpay-donate .field-input-wrapper { display: inline-flex;float: none;width: 80%; }
66+
.bitpay-donate input {padding:4px 10px;}
67+
.bitpay-donate select {padding:3px 10px;}
68+
.bitpay-donate .bitpay-donate-button {padding:12px 0;width: 188px;box-sizing: border-box;}
69+
.bitpay-donate ul, .bitpay-donate li {padding:0;margin:0;list-style:none;}
70+
.bitpay-donate li {padding:10px 0;}
71+
.bitpay-donate-field {clear:both;}
72+
.bitpay-donate-field label {float:left;width:100px;}
73+
.bitpay-donate-field div {float:left;}
74+
.bitpay-donate-field-email {width:80%;}
75+
.bitpay-donate-field-price {width:40%;}
76+
.bitpay-donate-field-currency {width:40%;}
77+
.bitpay-donate-button-wrapper {clear:both;margin:auto;text-align:center;}
78+
input.bitpay-donate-error {border:2px solid red;}
79+
80+
</style>
81+
</head>
82+
83+
<body>
84+
<div class="container">
85+
<div class="row">
86+
<div class="col-12">
87+
<p class="headerTop">Your contribution will benefit RECIPIENT.</p>
88+
</div>
89+
</div>
90+
<div class="row">
91+
<div class="col-3 payment-cell payment" id="payment_2800" onclick="updateVal('2800')">
92+
<p>$2,800</p>
93+
</div>
94+
<div class="col-3 payment-cell payment" id="payment_1000" onclick="updateVal('1000')">
95+
<p>$1,000</p>
96+
</div>
97+
<div class="col-3 payment-cell payment" id="payment_500" onclick="updateVal('500')">
98+
<p>$500</p>
99+
</div>
100+
</div>
101+
<div class="row">
102+
<div class="col-3 payment-cell payment" id="payment_100" onclick="updateVal('100')">
103+
<p>$100</p>
104+
</div>
105+
<div class="col-3 payment-cell payment" id="payment_50" onclick="updateVal('50')">
106+
<p>$50</p>
107+
</div>
108+
<div class="col-3 payment-cell payment" id="payment_other"><input type="text" class="customPayment" name="customPayment" id="customPayment" onfocus="updateCSS()" placeholder="Other (Maximum $2,800)" onkeyup="updateVal(this.value)">
109+
</div>
110+
</div>
111+
112+
<form class="bitpay-donate" action="https:/test.bitpay.com/checkout" id = "donateForm" method="post">
113+
<input name="action" type="hidden" value="checkout">
114+
<fieldset>
115+
<div class="row">
116+
<div class="col-12 payment-info">
117+
<label>Name:</label>
118+
<input type="text" class="inputField field-input" name="buyerName" id = "buyerName" placeholder="Name">
119+
</div>
120+
</div>
121+
122+
<div class="row">
123+
<div class="col-12 payment-info">
124+
<label>Address:</label>
125+
<input type="text" class="inputField field-input" name="buyerAddress1" id = "buyerAddress1" placeholder="Address">
126+
</div>
127+
</div>
128+
129+
<div class="row">
130+
<div class="col-12 payment-info">
131+
<label>City:</label>
132+
<input type="text" class="inputField field-input" name="buyerLocality" id = "buyerLocality" placeholder="City">
133+
</div>
134+
</div>
135+
136+
<div class="row">
137+
<div class="col-12 payment-info">
138+
<label>State:</label>
139+
<select class = "bitpay-donate-field-currency field-input" name="buyerRegion" id="buyerRegion">
140+
<option value="-" selected>--Select a state--</option>
141+
<option value="AL">Alabama</option>
142+
<option value="AK">Alaska</option>
143+
<option value="AZ">Arizona</option>
144+
<option value="AR">Arkansas</option>
145+
<option value="CA">California</option>
146+
<option value="CO">Colorado</option>
147+
<option value="CT">Connecticut</option>
148+
<option value="DE">Delaware</option>
149+
<option value="DC">District Of Columbia</option>
150+
<option value="FL">Florida</option>
151+
<option value="GA">Georgia</option>
152+
<option value="HI">Hawaii</option>
153+
<option value="ID">Idaho</option>
154+
<option value="IL">Illinois</option>
155+
<option value="IN">Indiana</option>
156+
<option value="IA">Iowa</option>
157+
<option value="KS">Kansas</option>
158+
<option value="KY">Kentucky</option>
159+
<option value="LA">Louisiana</option>
160+
<option value="ME">Maine</option>
161+
<option value="MD">Maryland</option>
162+
<option value="MA">Massachusetts</option>
163+
<option value="MI">Michigan</option>
164+
<option value="MN">Minnesota</option>
165+
<option value="MS">Mississippi</option>
166+
<option value="MO">Missouri</option>
167+
<option value="MT">Montana</option>
168+
<option value="NE">Nebraska</option>
169+
<option value="NV">Nevada</option>
170+
<option value="NH">New Hampshire</option>
171+
<option value="NJ">New Jersey</option>
172+
<option value="NM">New Mexico</option>
173+
<option value="NY">New York</option>
174+
<option value="NC">North Carolina</option>
175+
<option value="ND">North Dakota</option>
176+
<option value="OH">Ohio</option>
177+
<option value="OK">Oklahoma</option>
178+
<option value="OR">Oregon</option>
179+
<option value="PA">Pennsylvania</option>
180+
<option value="RI">Rhode Island</option>
181+
<option value="SC">South Carolina</option>
182+
<option value="SD">South Dakota</option>
183+
<option value="TN">Tennessee</option>
184+
<option value="TX">Texas</option>
185+
<option value="UT">Utah</option>
186+
<option value="VT">Vermont</option>
187+
<option value="VA">Virginia</option>
188+
<option value="WA">Washington</option>
189+
<option value="WV">West Virginia</option>
190+
<option value="WI">Wisconsin</option>
191+
<option value="WY">Wyoming</option>
192+
</select>
193+
</div>
194+
</div>
195+
196+
<div class="row">
197+
<div class="col-12 payment-info">
198+
<label>Zip:</label>
199+
<input type="text" class="inputField field-input" name="buyerPostalCode" id = "buyerPostalCode" placeholder="Zip Code">
200+
</div>
201+
</div>
202+
203+
<div class="row">
204+
<div class="col-12 payment-info">
205+
<label>Phone Number:</label>
206+
<input type="text" class="inputField field-input" name="buyerPhone" id = "buyerPhone" placeholder="Phone Number">
207+
</div>
208+
</div>
209+
210+
<div class="row">
211+
<div class = "col-12">
212+
<label>Email:</label>
213+
<input class="bitpay-donate-field-email field-input inputField" name="buyerEmail" id = "buyerEmail" type="email" placeholder="Email address" maxlength=50 autocapitalize=off autocorrect=off><br>
214+
</div>
215+
</div>
216+
<div class="row">
217+
<div class = "col-12">
218+
<label>Amount:</label>
219+
<input class="bitpay-donate-field-price field-input inputField" name="price" id = "price" type="number" placeholder="Amount"/>
220+
</div>
221+
</div>
222+
223+
<div class="row">
224+
<div class = "col-12">
225+
<label>Employer:</label>
226+
<input class="bitpay-donate-field-price field-input inputField" name="buyerEmployer" id = "buyerEmployer" placeholder="Employer"/>
227+
</div>
228+
</div>
229+
230+
<div class="row">
231+
<div class = "col-12">
232+
<label>Occupation:</label>
233+
<input class="bitpay-donate-field-price field-input inputField" name="buyerJobTitle" id = "buyerJobTitle" placeholder="Occupation"/>
234+
</div>
235+
</div>
236+
237+
238+
<input type = "hidden" name = "currency" value = "USD">
239+
<!-- change redirectURL to a url to send users after a payment-->
240+
<input type = "hidden" name = "redirectURL" value = "https://www.bitpay.com/">
241+
<input type = "hidden" name = "orderID" value = "">
242+
<input type = "hidden" name = "posData" id = "posData" value = "">
243+
244+
<!--change the value of itemDesc to a description to display to users, and/or for record keeping-->
245+
<input type = "hidden" name = "itemDesc" value = "Donation">
246+
<!-- production token | change the form action to bitpay.com- -->
247+
<!--
248+
<input type="hidden" name="data" value="--token goes here--">
249+
-->
250+
<!-- test - form action should be test.bitpay.com -->
251+
<input type="hidden" name="data" value="--token goes here--">
252+
</fieldset>
253+
</form>
254+
<div class="row">
255+
<div class="col-12">
256+
<p class="disclaimer">Contributions or gifts to RECIPIENT are not tax deductible. Contributions are limited to $10,000 per PAC per election cycle ($5,000 primary and $5,000 general) and $5,600 per individual per election cycle ($2,800 primary and $2,800 general). Contributions from the general treasury funds of corporations, labor unions, and national banks are prohibited.
257+
Federal contractors and foreign nationals who are not admitted for permanent residence in the United States are prohibited
258+
from making contributions. All contributions must be from personal funds and may not be reimbursed or paid by any other person.
259+
Federal law requires us to use our best efforts to collect and report the name, mailing address, occupation, and name of employer of individuals
260+
whose contributions exceed $200 in an election cycle.</p>
261+
</div>
262+
</div>
263+
<div class="bitpay-donate-button-wrapper">
264+
<input class="bitpay-donate-button" onclick = "submitForm();return false;" src="https://bitpay.com/cdn/merchant-resources/pay-with-bitpay-card-group.svg" onerror="this.onerror=null; this.src='https://test.bitpay.com/cdn/en_US/bp-btn-donate-currencies.svg'" type="image" alt="BitPay, the easy way to pay with bitcoins.">
265+
</div>
266+
</div>
267+
268+
<script type="text/javascript">
269+
270+
function submitForm(){
271+
//change maximumDonation as needed
272+
var maximumDonation = 2800
273+
var $price = $("#price").val()
274+
275+
var isValid = true;
276+
$(".inputField").each(function () {
277+
var element = $(this);
278+
if (element.val() == "") {
279+
isValid = false;
280+
}
281+
});
282+
if (!isValid || $("#buyerRegion").val() == "-") {
283+
alert('Please fill in all fields')
284+
return
285+
}
286+
287+
if($price > maximumDonation){
288+
alert("Your donation was larger than the allowed maximum of " + Number(maximumDonation).toFixed(2))
289+
return
290+
}
291+
if(isNaN($price) || $price == ''){
292+
alert('Please enter a donation amount')
293+
return
294+
}
295+
//submit since there are no errors
296+
297+
var buyerEmailField = document.querySelector('[name="buyerEmail"]');
298+
var orderIdField = document.querySelector('[name="orderID"]');
299+
300+
301+
var $posData = {}
302+
$posData.buyerAddress1 = $("#buyerAddress1").val()
303+
$posData.buyerLocality = $("#buyerLocality").val()
304+
$posData.buyerRegion = $("#buyerRegion").val()
305+
$posData.buyerPostalCode = $("#buyerPostalCode").val()
306+
$posData.buyerEmployer = $("#buyerEmployer").val()
307+
$posData.buyerJobTitle = $("#buyerJobTitle").val()
308+
$posData = JSON.stringify($posData)
309+
$("#posData").val($posData)
310+
311+
orderIdField.value = $("#buyerEmail").val()+ " | " + $("#buyerEmployer").val() +" | " + $("#buyerJobTitle").val()
312+
313+
document.getElementById("donateForm").submit()
314+
}
315+
function updateVal(val) {
316+
//monitors the clicks and/or the input field, handles css updatess
317+
$(".payment").each(function () {
318+
$(this).removeClass("selectedPayment");
319+
});
320+
321+
var $payment_arr = ['2800', '1000', '500', '100', '50']
322+
if ($payment_arr.includes(val)) {
323+
$("#payment_" + val).addClass('selectedPayment')
324+
} else {
325+
$("#payment_other").addClass('selectedPayment')
326+
}
327+
$("#price").val(val)
328+
329+
}
330+
function updateCSS() {
331+
//called when using the OTHER input field
332+
$(".payment").each(function () {
333+
$(this).removeClass("selectedPayment");
334+
});
335+
$("#payment_other").addClass('selectedPayment')
336+
337+
}
338+
339+
</script>
340+
341+
</body>
342+
343+
</html>
344+

0 commit comments

Comments
 (0)