wip address element

README.md

@@ -1,8 +1,21 @@
 # tree105
 
-Static site for Pembroke Troop 105 Christmas Tree Drive. 
+Static site for Pembroke Troop 105 Christmas Tree Drive.
 
-Depends on Hugo and uses a theme via a git submodule.  First time after cloning you may have to 
+
+## Local Testing
+
+
+## Stack
+
+This is a weird mash of a Hugo static site and a flask server. In 2022, it was just the Hugo piece with some
+javascript, and in 2023, in implementing Stripe, I made it a flask service and allowed the flask service to serve the static content too. So first, Hugo renders the markdown into HTML, and then Flask can render the HTML and any
+other templates into HTTP responses. Also and more importantly, Flask implements the API called by the
+payment and address forms as well as the webhooks that Stripe calls.
+
+### Hugo
+
+Depends on Hugo and uses a theme via a git submodule.  First time after cloning you may have to
 
 ```sh
 git submodule update --init --recursive
@@ -17,3 +30,14 @@ hugo version # or brew install hugo
 hugo server
 ```
 
+### Flask
+
+Start local Hugo and Flask servers:
+
+```sh
+hugo server &
+cd server
+python server.py
+```
+
+To stop, Ctrl-C to stop Flask and `kill %1` to stop Hugo (assuming it started as job 1).

content/pay-online/index.html

@@ -22,6 +22,9 @@ <h1>Stripe Payment</h1>
         <div id="link-authentication-element">
           <!-- Elements will create authentication element here -->
         </div>
+        <div id="address-element">
+          <!-- Elements will create address element here -->
+        </div>
         <div id="payment-element">
           <!-- Elements will create form elements here -->
         </div>

server/requirements.txt

@@ -1,3 +1,4 @@
 Flask==2.2.2
+Werkzeug==2.2.2
 python-dotenv==0.21.1
 stripe==5.1.1

server/server.py

@@ -9,10 +9,10 @@
 load_dotenv(find_dotenv())
 
 # For sample support and debugging, not required for production:
-stripe.set_app_info(
-    'stripe-samples/accept-a-payment/payment-element',
-    version='0.0.2',
-    url='https://github.com/stripe-samples')
+# stripe.set_app_info(
+#     'stripe-samples/accept-a-payment/payment-element',
+#     version='0.0.2',
+#     url='https://github.com/stripe-samples')
 
 stripe.api_version = '2020-08-27'
 stripe.api_key = os.getenv('STRIPE_SECRET_KEY')

static/js/stripe-payment.js

@@ -28,6 +28,8 @@ document.addEventListener('DOMContentLoaded', async () => {
   // Initialize Stripe Elements with the PaymentIntent's clientSecret,
   // then mount the payment element.
   const elements = stripe.elements({ clientSecret });
+  const addressElement = elements.create('address');
+  addressElement.mount('#address-element');
   const paymentElement = elements.create('payment');
   paymentElement.mount('#payment-element');
   // Create and mount the linkAuthentication Element to enable autofilling customer payment details
@@ -36,17 +38,18 @@ document.addEventListener('DOMContentLoaded', async () => {
   // If the customer's email is known when the page is loaded, you can
   // pass the email to the linkAuthenticationElement on mount:
   //
-  //   linkAuthenticationElement.mount("#link-authentication-element",  {
-  //     defaultValues: {
-  //       email: '[email protected]',
-  //     }
-  //   })
+  linkAuthenticationElement.mount("#link-authentication-element",  {
+    defaultValues: {
+      email: '[email protected]',
+    }
+  })
   // If you need access to the email address entered:
   //
-  //  linkAuthenticationElement.on('change', (event) => {
-  //    const email = event.value.email;
-  //    console.log({ email });
-  //  })
+  linkAuthenticationElement.on('change', (event) => {
+    const email = event.value.email;
+    console.log({ email });
+    console.log(event);
+  })
 
   // When the form is submitted...
   const form = document.getElementById('payment-form');