-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpayments.html
135 lines (119 loc) · 4.71 KB
/
payments.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="Keywords"
content="website design, web design, web page design, calgary web design, calgary web designers, airdrie web designers, airdrie web design, Calgary, Airdrie, Crossfield, Carstairs, Alberta, web page designer" />
<meta name="Description"
content="Nose Creek Web Design provides website design services to Calgary, Airdrie, and surrounding areas. Mobile and responsive website design, WordPress, hosting, SEO, Google Maps. Build a vibrant online presence for your business." />
<link rel="shortcut icon" href="img/favicon.ico" />
<link rel="stylesheet" href="css/style.css">
<title>Nose Creek Web Design - Calgary, Airdrie Website Creation</title>
</head>
<body>
<header>
<div class="logo">
<img src="img/logo.png" width="50" height="50" />
<h1>Nose Creek Web Design</h1>
</div>
<nav>
<ul>
<li><a href="/#about">About</a></li>
<li><a href="/#portfolio">Portfolio</a></li>
<li><a href="/#contact" class="highlight">Contact</a></li>
</ul>
</nav>
</header>
<section class="payments">
<div>
<form onSubmit="(e) => e.preventDefault()">
<h5>Make a Payment</h5>
<input placeholder="Your Business Name" type="text" name="descriptionInput" id="description" maxlength="127" value="" required />
<input placeholder="Payment Amount in CAD" name="amountInput" type="number" id="amount" value="" required />
</form>
<div id="paypal-button-container"></div>
<script
src="https://www.paypal.com/sdk/js?client-id=AU5JRGQxKXYBsMmbh4Ts4XIaKdCDfz1SISSZCXi6u1zr6w0FrQzu2LMif8ZrsEbPXxCX0EioANOfmZjy¤cy=CAD"
data-sdk-integration-source="button-factory"></script>
<script>
function initPayPalButton() {
var description = document.querySelector('#description');
var amount = document.querySelector('#amount');
var elArr = [description, amount];
var purchase_units = [];
purchase_units[0] = {};
purchase_units[0].amount = {};
function validate(event) {
return event.value.length > 0;
}
paypal.Buttons({
style: {
color: 'blue',
shape: 'rect',
label: 'pay',
layout: 'vertical',
},
onInit: function (data, actions) {
actions.disable();
elArr.forEach(function (item) {
item.addEventListener('keyup', function (event) {
var result = elArr.every(validate);
if (result) {
actions.enable();
} else {
actions.disable();
}
});
});
},
onClick: function () {
purchase_units[0].description = description.value;
purchase_units[0].amount.value = amount.value;
},
createOrder: function (data, actions) {
return actions.order.create({
purchase_units: purchase_units,
});
},
onApprove: function (data, actions) {
return actions.order.capture().then(function (details) {
alert('Transaction completed by ' + details.payer.name.given_name + '!');
});
},
onError: function (err) {
console.log(err);
}
}).render('#paypal-button-container');
}
initPayPalButton();
</script>
</div>
<div>
<p>Cheques should be made payable to "Dustin Lammiman" and mailed to:</p>
<p>
50 Taraglen Rd NE<br />
Calgary, AB T3J 2N6
</p>
<p>Interac e-Transfers can be sent to <a href="mailto:payments@nosecreekweb.ca">payments@nosecreekweb.ca</a></p>
</div>
</section>
<footer>
<p>
Copyright © 2023 Nose Creek Web Design.
<span itemprop="telephone" class="contact-info">403-370-2313</span>. <span itemprop="address" itemscope
itemtype="http://schema.org/PostalAddress">
<span itemprop="addressLocality">Calgary</span>,
<span itemprop="addressRegion">AB</span>,
<span itemprop="addressCountry">Canada</span>.
</span>
</p>
<p>
<a href="https://github.com/nosecreek">GitHub</a> • <a href="payments.html">Make a Payment</a>
</p>
</footer>
<script src="js/script.js"></script>
<script data-goatcounter="https://nosecreekweb.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
</body>
</html>