Skip to content

Commit

Permalink
messages from stripe frame to outer form
Browse files Browse the repository at this point in the history
  • Loading branch information
@TomConner
TomConner committed Nov 19, 2023
1 parent bcd3895 commit fdf1fa8
Show file tree
Hide file tree
Showing 3 changed files with 209 additions and 169 deletions.
10 changes: 8 additions & 2 deletions generator/content/register/stripe-payment.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
// ------- UI helpers -------

function say(message) {
console.log(`stripe payment: ${message}`)
}

// ------- UI helpers -------

function showMessage(messageText) {
const messageContainer = document.querySelector("#payment-message");

Expand All @@ -16,6 +16,11 @@ function showMessage(messageText) {
}, 4000);
}

publishMessage = (message) => {
window.parent.postMessage(message, window.location.origin);
}


// Show a spinner on payment submission
function setLoading(isLoading) {
if (isLoading) {
Expand All @@ -31,6 +36,7 @@ function setLoading(isLoading) {
}

document.addEventListener('DOMContentLoaded', async () => {

// Load the publishable key from the server. The publishable key
// is set in your .env file.
const {publishableKey} = await fetch(`/api/v1/config`).then((r) => r.json());
Expand Down
182 changes: 15 additions & 167 deletions generator/layouts/shortcodes/register-form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,16 +121,18 @@
<section id="register">
<form id="order-form">
<label class="tree" for="rcomment">Comment</label>
<input type="textarea" name="rcomment" placeholder="Anything we need to know"></input>
<input type="textarea" id="rcomment" name="rcomment" placeholder="Anything we need to know"></input>

<label class="tree" for="rnumtrees">Number of Trees</label>
<input type="number" name="rnumtrees" min=0 id="rnumtrees" required></input>
<input type="number" min=0 name="rnumtrees" id="rnumtrees" required></input>

<p id="tree-messages">If you have an artificial tree, or no tree, but would like to support Pembroke Troop 105's Scouting program, indicate 0 trees and an additional donation amount.</p>
<label class="tree" for="rextra">Additional Donation Amount</label>
<input type="number" min=0 name="rextra" id="rextra" required></input>
<p></p>
<label>Amount to pay: $ <span id="amount"></span></label>
<label for="amount">Amount to pay: $</label>
<input type="text" id="amount" disabled>

<p></p>
<!--
<label for="rpmethod">Payment Method</label>
Expand All @@ -156,174 +158,20 @@
</p>
</form>
</section>
<script src="js/register-form.js"></script>

<style>
iframe {
width: 100%;
height: 5000px; /* You can adjust this as needed */
border: none;
}
</style>

<!-- Stripe: Address and Payment-->

<section id="stripe">
<iframe src="/register"></iframe>
<style>
#stripe-frame {
width: 100%;
height: 5000px; /* You can adjust this as needed */
border: none;
}
</style>
<iframe id="stripe-frame" src="/register"></iframe>
</section>

<script>


// function urlencodeFormData(fd){
// var s = '';
// function encode(s){ return encodeURIComponent(s).replace(/%20/g,'+'); }
// for(var pair of fd.entries()){
// if(typeof pair[1]=='string'){
// s += (s?'&':'') + encode(pair[0])+'='+encode(pair[1]);
// }
// }
// return s;
// }

// function displayPaymentInstructions() {
// if (intend_pay_venmo) {
// messageVenmo.hidden = false;
// window.location.assign('venmoinstructions');
// } else if (intend_pay_card) {
// messageVenmo.hidden = true;
// message2.innerText = "";
// message1.innerText = `Please continue to payment of $${amount}. You can use your PayPal or a credit/debit card.`;
// } else {
// messageVenmo.hidden = true;
// window.location.assign('registered');
// }
// }

// function formSubmit(event) {
// var url = "https://tree105-reg-mcme3i32aq-uc.a.run.app";
// var request = new XMLHttpRequest();
// request.open('POST', url, true);
// message1 = document.getElementById("message1")
// message2 = document.getElementById("message2")
// intend_pay_card = document.getElementById("card").checked;
// intend_pay_venmo = document.getElementById("venmo").checked;
// amount = parseInt(document.getElementById("amount").innerText);

// request.onload = function() { // request successful
// // we can use server response to our request now
// console.log(request.responseText);
// displayPaymentInstructions();
// };

// request.onerror = function() {
// console.log(request.responseText);
// // request failed
// message1.innerText =
// "Registration failed. Please try again later or contact [email protected]";
// };

// message1.innerText = "Processing";
// request.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
// request.send(urlencodeFormData(new FormData(event.target)));
// event.preventDefault();

// if (intend_pay_card) {
// renderPaypalButtons(amount);
// }
// }

function onChangeNumTrees() {
value = document.getElementById("rnumtrees").value;
count = value == "" ? 0 : parseInt(value);
value = document.getElementById("rextra").value
extra = value == "" ? 0 : parseInt(value);
console.log(`${count} trees, ${extra} extra`);
amount = (count * 15) + extra;
document.getElementById("amount").innerText = amount;
lookup_code = localStorage.getItem("lookup");
fetch(`/api/v1/pickups/${lookup_code}`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
numtrees: count,
extra: extra,
}),
})
.then((response) => response.json())
.then((pickup) => {
console.log(pickup);
});
}

function loadOrderForm() {
// document.getElementById("registerform").addEventListener("submit", formSubmit);
document.getElementById("rnumtrees").addEventListener("input", onChangeNumTrees);
document.getElementById("rextra").addEventListener("input", onChangeNumTrees);
//document.getElementById("cashcheck").checked = true;
document.getElementById("rnumtrees").value = 1;
document.getElementById("rextra").value = 0;
onChangeNumTrees();
// document.getElementById("registerform").addEventListener("input", (event) => {
// message1 = document.getElementById("message1")
// isvalid = document.getElementById("registerform").checkValidity();
// MSG_INVALID = "Please complete the form.";
// button = document.getElementById("submit");
// document.getElementById("paypal-button-container").innerHTML = "";
// if (document.getElementById("cashcheck").checked) {
// button.value = "Register";
// message1.innerText = isvalid ? "Press button to register your tree(s) for pickup." : MSG_INVALID;
// } else if (document.getElementById("venmo").checked) {
// button.value = "Continue to Venmo payment";
// message1.innerText = isvalid ? "Press button to register and pay by Venmo." : MSG_INVALID;
// } else if (document.getElementById("card").checked) {
// button.value = "Continue to card payment";
// message1.innerText = isvalid ? "Press button to register and pay by credit/debit card." : MSG_INVALID;
// } else {
// button.value = "Submit";
// }
// });
// console.log('ready');
}

function lookup() {
session_start = localStorage.getItem("session_start");
if (session_start == null) {
session_start = Date.now();
sessionStorage.setItem("session_start", session_start);
}
lookup_code = localStorage.getItem("lookup")
if (lookup_code != null) {
console.log(`lookup code from localStorage is ${lookup_code}`);
fetch(`/api/v1/pickups/${lookup_code}`)
.then((response) => response.json())
.then((pickup) => {
console.log(pickup);
// document.getElementById("rnumtrees").value = pickup.numtrees;
// document.getElementById("rextra").value = pickup.extra;
// document.getElementById("rcomment").value = pickup.comment;
// onChangeNumTrees();
});
} else {
// post to /api/v1/pickups
fetch('/api/v1/pickups', {method: "POST"})
.then((response) => response.text())
.then((text) => {
lookup_code = text;
console.log(`new lookup code is ${lookup_code}`);
localStorage.setItem("lookup", lookup_code);
// document.getElementById("rnumtrees").value = pickup.numtrees;
// document.getElementById("rextra").value = pickup.extra;
// document.getElementById("rcomment").value = pickup.comment;
// onChangeNumTrees();
});
}
lookup_code = localStorage.getItem("lookup");
document.getElementById("lookup-code").innerText = `Lookup code: ${lookup_code}`;
loadOrderForm();
}

window.addEventListener("load", (event) => {
lookup();
});
</script>
Loading

0 comments on commit fdf1fa8

Please sign in to comment.