Replace MIT SAO payment system with Stripe Checkout

.gitignore

@@ -1,3 +1,5 @@
 *.swp
 _site
 .DS_Store
+.env
+node_modules

_pages/pay.md

@@ -3,14 +3,9 @@
     title: Pay MITOC
 ---
 
-<div class="alert alert-warning">
-  <p>Please be advised that we have been having <strong>issues processing payments from PayPal</strong>.</p>
-  <p>We recommend that you use a credit or debit card for online payment (we always accept personal checks in the office).</p>
-</div>
-
-This page can be used to pay money to MITOC using PayPal or a credit/debit card. Payments can also be made by check at the [MITOC office](/where-is-mitoc) during [office hours](/calendar). **All payments are final and non-refundable.**
+This page can be used to pay MITOC by credit or debit card. Payments can also be made by check at the [MITOC office](/where-is-mitoc) during [office hours](/calendar). **All payments are final and non-refundable.**
 
-If you are having trouble with the payment system, contact [mitoc-bursar@mit.edu](mailto:mitoc-bursar@mit.edu). The most common issue is that the billing address must exactly match what your bank has on file, so if your card is declined, double-check the address you entered.
+If you are having trouble with the payment system, contact [mitoc-bursar@mit.edu](mailto:mitoc-bursar@mit.edu). The most common issue is that the billing address must exactly match what your bank has on file.
 
 ### Financial Assistance
 We can provide need-blind financial assistance to any MIT undergrad, upon request. 
@@ -25,20 +20,10 @@ See the signup page [here](/join).
 ### Gear Rentals and Purchases
 
 <div style="width:300px;">
-  <form
-    action="https://shopmitprd.mit.edu/controller/index.php"
-    method="POST"
-    target="_blank"
-  >
-    <input type="hidden" name="merchant_id" value="mit_sao_mitoc" />
-    <input type="hidden" name="merchantDefinedData2" value="" />
+  <form id="gear_form">
     <div class="form-group">
-      <label for="merchantDefinedData1gear">Type of Payment</label>
-      <select
-        name="merchantDefinedData1"
-        id="merchantDefinedData1gear"
-        class="form-control"
-      >
+      <label for="gear-payment-type">Type of Payment</label>
+      <select name="payment_type" id="gear-payment-type" class="form-control">
         <option value="rental">Gear rental (not boats)</option>
         <option value="gear">Gear purchase</option>
         <option value="canoe">Canoe</option>
@@ -48,17 +33,12 @@ See the signup page [here](/join).
       </select>
     </div>
     <div class="form-group">
-      <label for="merchantDefinedData3gear">Renter Name</label>
-      <input
-        name="merchantDefinedData3"
-        id="merchantDefinedData3gear"
-        value=""
-        class="form-control"
-      />
+      <label for="gear-renter-name">Renter Name</label>
+      <input name="renter_name" id="gear-renter-name" class="form-control" />
     </div>
     <div class="form-group">
-      <label for="amount">Amount ($)</label>
-      <input name="amount" id="amount-gear" class="form-control" />
+      <label for="gear-amount">Amount ($)</label>
+      <input name="amount" id="gear-amount" class="form-control" />
     </div>
     <button type="submit" class="btn btn-primary">Pay</button>
   </form>
@@ -67,37 +47,21 @@ See the signup page [here](/join).
 ### Trip and Event Fees
 
 <div style="width:300px;">
-  <form
-    action="https://shopmitprd.mit.edu/controller/index.php"
-    method="POST"
-    id="trip_form"
-    target="_blank"
-  >
-    <input
-      type="hidden"
-      name="merchant_id"
-      id="merchant_id"
-      value="mit_sao_mitoc"
-    />
-    <input type="hidden" name="merchantDefinedData1" value="" />
+  <form id="trip_form">
     <div class="form-group">
-      <label for="merchantDefinedData2trip">Trip/Event</label>
-      <select
-        name="merchantDefinedData2"
-        id="merchantDefinedData2trip"
-        class="form-control"
-      >
-        <option>Select one</option>
+      <label for="trip-name">Trip/Event</label>
+      <select name="trip_name" id="trip-name" class="form-control">
+        <option value="">Select one</option>
         {% for fee in site.data.trip_fees %}
-          <option value="{{ fee.name }}">{{ fee.name }}</option>
+          <option value="{{ fee.name }}" data-price="{{ fee.price }}">{{ fee.name }}</option>
         {% endfor %}
       </select>
     </div>
     <div class="form-group">
-      <label for="merchantDefinedData4trip">Quantity</label>
+      <label for="trip-quantity">Quantity</label>
       <input
-        name="merchantDefinedData4"
-        id="merchantDefinedData4trip"
+        name="quantity"
+        id="trip-quantity"
         type="number"
         value="1"
         min="1"
@@ -106,25 +70,13 @@ See the signup page [here](/join).
       />
     </div>
     <div class="form-group">
-      <label for="merchantDefinedData3trip">Comments</label>
-      <input
-        name="merchantDefinedData3"
-        id="merchantDefinedData3trip"
-        value=""
-        class="form-control"
-      />
+      <label for="trip-comments">Comments</label>
+      <input name="comments" id="trip-comments" class="form-control" />
     </div>
     <div class="form-group">
-      <label for="amount">Amount ($)</label>
-      <input
-        name="amount"
-        id="amount"
-        value="0"
-        class="form-control"
-        readonly
-      />
+      <label for="trip-amount">Amount ($)</label>
+      <input name="amount" id="trip-amount" value="0.00" class="form-control" readonly />
     </div>
-
     <button type="submit" class="btn btn-primary">Pay</button>
   </form>
 </div>
@@ -136,68 +88,42 @@ Be sure to fill out the visitor log ([Camelot](https://docs.google.com/spreadshe
 Days spent on-site but not in the cabin (e.g. Yurt / Lean-to / camping) cost 0.5 person-days (i.e. half price of using the cabin.) Enter the total number of fractional days spent outside and full days spent inside in the form below.
 
 <div style="width:300px;">
-  <form
-    action="https://shopmitprd.mit.edu/controller/index.php"
-    method="POST"
-    id="cabin_form"
-    target="_blank"
-  >
-    <input
-      type="hidden"
-      name="merchant_id"
-      id="merchant_id-cabins"
-      value="mit_sao_mitoc"
-    />
+  <form id="cabin_form">
     <div class="form-group">
-      <label for="merchantDefinedData1cabin">Cabin</label>
-      <select
-        name="merchantDefinedData1"
-        id="merchantDefinedData1cabin"
-        class="form-control"
-      >
+      <label for="cabin-name">Cabin</label>
+      <select name="cabin" id="cabin-name" class="form-control">
         <option value="camelot">Camelot ($10/person/night)</option>
         <option value="intervale">Intervale ($10/person/night)</option>
       </select>
     </div>
     <div class="form-group">
-      <label for="merchantDefinedData2cabin">Number of Person-Nights</label>
+      <label for="cabin-person-nights">Number of Person-Nights</label>
       <input
-        name="merchantDefinedData2"
-        id="merchantDefinedData2cabin"
+        name="person_nights"
+        id="cabin-person-nights"
         type="number"
         value="1"
         min="0.5"
         step="0.5"
         class="form-control"
-        onkeyup="document.forms['cabin_form'].amount.value = document.forms['cabin_form'].merchantDefinedData2.value * 10.0;"
-        onchange="document.forms['cabin_form'].merchantDefinedData2.onkeyup();"
+        onkeyup="document.getElementById('cabin-amount').value = (this.value * 10.0).toFixed(2);"
+        onchange="this.onkeyup();"
       />
     </div>
     <div class="form-group">
-      <label for="merchantDefinedData3cabin">Keyholder Name</label>
-      <input
-        name="merchantDefinedData3"
-        id="merchantDefinedData3cabin"
-        value=""
-        class="form-control"
-      />
+      <label for="cabin-keyholder">Keyholder Name</label>
+      <input name="keyholder_name" id="cabin-keyholder" class="form-control" />
     </div>
     <div class="form-group">
-      <label for="amount">Amount ($)</label>
-      <input
-        name="amount"
-        id="amount-cabins"
-        value="10"
-        class="form-control"
-        readonly
-      />
+      <label for="cabin-amount">Amount ($)</label>
+      <input name="amount" id="cabin-amount" value="10.00" class="form-control" readonly />
     </div>
     <button type="submit" class="btn btn-primary">Pay</button>
   </form>
 </div>
 
 <script>
-    window.addEventListener('DOMContentLoaded', function() {
-      load_trip_fees();
-    });
+  window.addEventListener('DOMContentLoaded', function() {
+    init_payment_forms();
+  });
 </script>

_pages/pay/success.md

@@ -0,0 +1,10 @@
+---
+permalink: /pay/success
+title: Payment Received
+---
+
+Your payment was successful. A receipt has been sent to your email.
+
+Questions? Contact [mitoc-bursar@mit.edu](mailto:mitoc-bursar@mit.edu).
+
+<a href="/pay" class="btn btn-default">Back to payments</a>

docker-compose.yml

@@ -7,3 +7,22 @@ services:
       - .:/site
     ports:
       - "4000:4000"
+
+  functions:
+    image: node:18-alpine
+    working_dir: /app
+    volumes:
+      - .:/app
+    command: node docker/functions-server.js
+    env_file:
+      - .env
+
+  proxy:
+    image: nginx:alpine
+    volumes:
+      - ./docker/nginx.conf:/etc/nginx/nginx.conf:ro
+    ports:
+      - "8888:8888"
+    depends_on:
+      - jekyll
+      - functions

docker/functions-server.js

@@ -0,0 +1,26 @@
+const http = require('http');
+const handler = require('../netlify/functions/create-checkout-session');
+
+const server = http.createServer(async (req, res) => {
+  if (req.method !== 'POST') {
+    res.writeHead(405);
+    res.end('Method Not Allowed');
+    return;
+  }
+
+  let body = '';
+  req.on('data', chunk => body += chunk);
+  req.on('end', async () => {
+    const event = {
+      httpMethod: 'POST',
+      body,
+      headers: { origin: req.headers.origin || 'http://localhost:8888' },
+    };
+
+    const result = await handler.handler(event);
+    res.writeHead(result.statusCode, result.headers || {});
+    res.end(result.body);
+  });
+});
+
+server.listen(9999, () => console.log('Functions server on port 9999'));

docker/nginx.conf

@@ -0,0 +1,16 @@
+events {}
+
+http {
+  server {
+    listen 8888;
+
+    location /.netlify/functions/ {
+      proxy_pass http://functions:9999/;
+      proxy_set_header Origin http://localhost:8888;
+    }
+
+    location / {
+      proxy_pass http://jekyll:4000;
+    }
+  }
+}