getting stripe wired in

views/common/footer.php

@@ -29,5 +29,8 @@
         }, false);
     })();
 </script>
+<script type="application/javascript">
+    <?php include 'stripe.php'; ?>
+</script>
 </body>
 </html>

views/common/head.php

@@ -8,6 +8,7 @@
 
     <title>Dinner in the Woods 2019 - Tickets on sale March 15th!</title>
 
+    <script src="https://js.stripe.com/v3/"></script>
     <!-- Bootstrap core CSS -->
     <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">

views/common/stripe.php

@@ -0,0 +1,70 @@
+// Create a Stripe client.
+var stripe = Stripe('<?=$_SERVER['STRIPE_API_PUBLIC_KEY']?>');
+
+// Create an instance of Elements.
+var elements = stripe.elements();
+
+// Custom styling can be passed to options when creating an Element.
+// (Note that this demo uses a wider set of styles than the guide below.)
+var style = {
+base: {
+color: '#32325d',
+fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
+fontSmoothing: 'antialiased',
+fontSize: '16px',
+'::placeholder': {
+color: '#aab7c4'
+}
+},
+invalid: {
+color: '#fa755a',
+iconColor: '#fa755a'
+}
+};
+
+// Create an instance of the card Element.
+var card = elements.create('card', {style: style});
+
+// Add an instance of the card Element into the `card-element` <div>.
+    card.mount('#card-element');
+
+    // Handle real-time validation errors from the card Element.
+    card.addEventListener('change', function(event) {
+    var displayError = document.getElementById('card-errors');
+    if (event.error) {
+    displayError.textContent = event.error.message;
+    } else {
+    displayError.textContent = '';
+    }
+    });
+
+    // Handle form submission.
+    var form = document.getElementById('payment-form');
+    form.addEventListener('submit', function(event) {
+    event.preventDefault();
+
+    stripe.createToken(card).then(function(result) {
+    if (result.error) {
+    // Inform the user if there was an error.
+    var errorElement = document.getElementById('card-errors');
+    errorElement.textContent = result.error.message;
+    } else {
+    // Send the token to your server.
+    stripeTokenHandler(result.token);
+    }
+    });
+    });
+
+    // Submit the form with the token ID.
+    function stripeTokenHandler(token) {
+    // Insert the token ID into the form so it gets submitted to the server
+    var form = document.getElementById('payment-form');
+    var hiddenInput = document.createElement('input');
+    hiddenInput.setAttribute('type', 'hidden');
+    hiddenInput.setAttribute('name', 'stripeToken');
+    hiddenInput.setAttribute('value', token.id);
+    form.appendChild(hiddenInput);
+
+    // Submit the form
+    form.submit();
+    }