-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdonations.html
More file actions
170 lines (169 loc) · 10.9 KB
/
donations.html
File metadata and controls
170 lines (169 loc) · 10.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!doctype html>
<html>
<head>
<title>
Cramped
</title>
<base target="_blank">
<link rel="icon" href="images/favicon.ico">
<script src="https://epicenterprograms.github.io/standards/behavior/general.js"></script>
<script src="behavior.js"></script>
<link rel="stylesheet" href="https://epicenterprograms.github.io/standards/formatting/foundation.css">
<link rel="stylesheet" href="formatting.css">
</head>
<body>
<nav class="hidden-left-nav">
<iframe src="navigation.html"></iframe>
</nav>
<h1 class="main-title">
Donations
</h1>
<main>
<section>
When it comes down to it, there's no real reason for this page to be here, but it gives me practice with putting payment methods into a website, and at the same time, it presents you with an opportunity to show me how great you think this website is by needlessly throwing your money at it.
</section>
<section>
<form action="https://www.paypal.com/donate" method="post" target="_blank">
<input type="hidden" name="business" value="SKJMUWPUU8R8G">
<input type="hidden" name="no_recurring" value="0">
<input type="hidden" name="item_name" value="I'll take your money.">
<input type="hidden" name="currency_code" value="USD">
<input type="submit" value="Donate" alt="Donate">
<!--
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
-->
</form>
</section>
<section>
You can also <a href="https://www.paypal.com/donate/?business=SKJMUWPUU8R8G&no_recurring=0&item_name=I%27ll+take+your+money.¤cy_code=USD">click here</a> to donate.
</section>
<section>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
<input type="hidden" name="cmd" value="_s-xclick">
<table class="organizational">
<tr><td><input type="hidden" name="on0" value="What to buy me">What to buy me:</td></tr>
<tr>
<td>
<select name="os0">
<option value="A candy bar">A candy bar ($1)</option>
<option value="A meal">A meal ($10)</option>
<option value="A phone">A phone ($100)</option>
<option value="A Mac">A Mac ($1,000)</option>
<option value="A car">A car ($10,000)</option>
<option value="A house">A house ($100,000)</option>
<option value="My retirement">My retirement ($1,000,000)</option>
</select>
</td>
</tr>
</table>
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</section>
<section>
Better still, you can use a variety of payment methods directly on this website below.
</section>
<section>
<div id="smart-button-container">
<div style="text-align: center"><label for="description">What you're paying for </label><input type="text" name="descriptionInput" id="description" maxlength="127" value="Robert's happiness"></div>
<p id="descriptionError" style="visibility: hidden; color:red; text-align: center; margin: .1em;">Please enter a description</p>
<div style="text-align: center"><label for="amount">Amount you're donating </label><input name="amountInput" type="number" id="amount" value=""><span> USD</span></div>
<p id="priceLabelError" style="visibility: hidden; color:red; text-align: center; margin: .1em;">Please enter a price</p>
<div style="text-align: center; margin-top: 0.625rem;" id="paypal-button-container"></div>
<div id="invoiceidDiv" style="text-align: center; display: none;"><label for="invoiceid"> </label><input name="invoiceid" maxlength="127" type="text" id="invoiceid" value=""></div>
<p id="invoiceidError" style="visibility: hidden; color:red; text-align: center; display: none;">Please enter an Invoice ID</p>
</div>
<script src="https://www.paypal.com/sdk/js?client-id=sb&enable-funding=venmo¤cy=USD" data-sdk-integration-source="button-factory"></script>
<script>
function initPayPalButton() {
var description = document.querySelector("#smart-button-container #description");
var amount = document.querySelector("#smart-button-container #amount");
var descriptionError = document.querySelector("#smart-button-container #descriptionError");
var priceError = document.querySelector("#smart-button-container #priceLabelError");
var invoiceid = document.querySelector("#smart-button-container #invoiceid");
var invoiceidError = document.querySelector("#smart-button-container #invoiceidError");
var invoiceidDiv = document.querySelector("#smart-button-container #invoiceidDiv");
var elArr = [description, amount];
if (invoiceidDiv.firstChild.innerHTML.length > 1) {
invoiceidDiv.style.display = "block";
}
var purchase_units = [{ "amount": { "currency_code": "USD", "value": 1, "breakdown": { "item_total": { "currency_code": "USD", "value": 1 } } }, "items": [{ "name": "item name", "unit_amount": { "currency_code": "USD", "value": 1 }, "quantity": "1", "category": "DONATION" }] }];
function validate(event) {
return event.value.length > 0;
}
paypal.Buttons({
style: {
color: "blue",
shape: "pill",
label: "donate",
layout: "vertical",
},
onInit: function (data, actions) {
actions.disable();
if (invoiceidDiv.style.display === "block") {
elArr.push(invoiceid);
}
elArr.forEach(function (item) {
item.addEventListener("keyup", function (event) {
var result = elArr.every(validate);
if (result) {
actions.enable();
} else {
actions.disable();
}
});
});
},
onClick: function () {
if (description.value.length < 1) {
descriptionError.style.visibility = "visible";
} else {
descriptionError.style.visibility = "hidden";
}
if (amount.value.length < 1) {
priceError.style.visibility = "visible";
} else {
priceError.style.visibility = "hidden";
}
if (invoiceid.value.length < 1 && invoiceidDiv.style.display === "block") {
invoiceidError.style.visibility = "visible";
} else {
invoiceidError.style.visibility = "hidden";
}
purchase_units[0].description = description.value;
purchase_units[0].amount.value = amount.value;
purchase_units[0].amount.breakdown.item_total.value = amount.value;
purchase_units[0].items[0].unit_amount.value = amount.value;
if (invoiceid.value !== '') {
purchase_units[0].invoice_id = invoiceid.value;
}
},
createOrder: function (data, actions) {
return actions.order.create({
purchase_units: purchase_units,
});
},
onApprove: function (data, actions) {
return actions.order.capture().then(function (orderData) {
// Full available details
console.log("Capture result", orderData, JSON.stringify(orderData, null, 2));
// Show a success message within this page, e.g.
const element = document.getElementById("paypal-button-container");
element.innerHTML = "";
element.innerHTML = "<h3>Thank you for your payment!</h3>";
// Or go to another URL: actions.redirect('thank_you.html');
});
},
onError: function (err) {
console.error(err);
}
}).render("#paypal-button-container");
}
initPayPalButton();
</script>
</section>
</main>
</body>
</html>