1 files changed, 134 insertions, 0 deletions
diff --git a/pages/payments.php b/pages/payments.php
new file mode 100644
index 0000000..4315613
--- /dev/null
+++ b/pages/payments.php
@@ -0,0 +1,134 @@
+<!--PAYPAL-->
+<div id="smart-button-container" class="form">
+	<p id="invoiceidError" class="description">Please enter an Invoice ID</p>
+	<p id="descriptionError" class="description">Please enter a description</p>
+	<p id="priceLabelError" class="description">Please enter a price</p>
+
+	<div id="invoiceidDiv"><label for="invoiceid">Invoice ID</label>
+		<input name="invoiceid" maxlength="127" type="text" id="invoiceid" value="<?php echo $_GET['invoice'] ?? ''; ?> ">
+	</div>
+
+	<div><label for="description">Description of services </label>
+		<input type="text" name="descriptionInput" id="description" maxlength="127" value="<?php echo $_GET['desc'] ?? ''; ?> ">
+	</div>
+	<div><label for="amount">Amount (USD)</label>
+		<input name="amountInput" type="number" id="amount" value="<?php echo $_GET['amount'] ?? ''; ?>">
+	</div>
+	<div style="text-align: center; margin-top: 0.625rem;" id="paypal-button-container"></div>
+</div>
+
+<script src="https://www.paypal.com/sdk/js?client-id=sb&enable-funding=venmo&currency=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 = [];
+		purchase_units[0] = {};
+		purchase_units[0].amount = {};
+
+		function validate(event) {
+			return event.value.length > 0;
+		}
+
+		//		var result = elArr.every(validate);
+		//		if (result) {
+		//			actions.enable();
+		//		}
+
+		paypal.Buttons({
+			style: {
+				color: 'white',
+				shape: 'pill',
+				label: 'pay',
+				layout: 'horizontal',
+
+			},
+
+			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.display = "block";
+				} else {
+					descriptionError.style.display = "none";
+				}
+
+				if (amount.value.length < 1) {
+					priceError.style.display = "block";
+				} else {
+					priceError.style.display = "none";
+				}
+
+				if (invoiceid.value.length < 1 && invoiceidDiv.style.display === "block") {
+					invoiceidError.style.display = "block";
+				} else {
+					invoiceidError.style.display = "none";
+				}
+
+				purchase_units[0].description = description.value;
+				purchase_units[0].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.log(err);
+			}
+		}).render('#paypal-button-container');
+	}
+	initPayPalButton();
+</script>