cmd/web/handlers.go

@@ -260,20 +260,3 @@ func (app *application) ChargeOnce(w http.ResponseWriter, r *http.Request) {
 		app.errorLog.Println(err)
 	}
 }
-
-func (app *application) BronzePlan(w http.ResponseWriter, r *http.Request) {
-	widget, err := app.DB.GetWidget(2)
-	if err != nil {
-		app.errorLog.Println(err)
-		return
-	}
-
-	data := make(map[string]interface{})
-	data["widget"] = widget
-
-	if err := app.renderTemplate(w, r, "bronze-plan", &templateData{
-		Data: data,
-	}); err != nil {
-		app.errorLog.Println(err)
-	}
-}

cmd/web/routes.go

@@ -19,8 +19,6 @@ func (app *application) routes() http.Handler {
 	mux.Get("/receipt", app.Receipt)
 	mux.Post("/payment-succeeded", app.PaymentSucceeded)
 
-	mux.Get("/plans/bronze", app.BronzePlan)
-
 	fileServer := http.FileServer(http.Dir("./static"))
 	mux.Handle("/static/*", http.StripPrefix("/static", fileServer))
 

cmd/web/templates/base.layout.gohtml

@@ -46,7 +46,7 @@
                                     <a class="dropdown-item" href="/widget/1">Buy one widget</a>
                                 </li>
                                 <li>
-                                    <a class="dropdown-item" href="/plans/bronze">Subscription</a>
+                                    <a class="dropdown-item" href="#">Subscription</a>
                                 </li>
                             </ul>
                         </li>

cmd/web/templates/bronze-plan.page.gohtml

@@ -1,102 +0,0 @@
-{{ template "base" . }}
-{{ define "title" }}
-Bronze Plan
-{{ end }}
-{{ define "content" }}
-{{$widget := index .Data "widget"}}
-<h2 class="mt-3 text-center">Bronze Plan: {{formatCurrency $widget.Price}}</h2>
-<hr>
-<div class="alert alert-danger text-center d-none" id="card-messages"></div>
-<form action="/payment-succeeded-temp"
-      method="post"
-      name="charge_form"
-      id="charge_form"
-      class="d-blick needs-validation charge-form"
-      autocomplete="off"
-      novalidate="">
-    <input type="hidden" name="product_id" value="{{$widget.ID}}">
-    <input type="hidden" id="amount" name="amount" value="{{$widget.Price}}">
-    <p class="mt-2 mb-3 text-center">{{$widget.Description}}</p>
-    <hr>
-    <div class="mb-3">
-        <label for="first-name" class="form-label">First Name</label>
-        <input type="text"
-               id="first-name"
-               name="first_name"
-               autocomplete="first-name-new"
-               required=""
-               class="form-control">
-    </div>
-    <div class="mb-3">
-        <label for="last-name" class="form-label">Last Name</label>
-        <input type="text"
-               id="last-name"
-               name="last_name"
-               autocomplete="last-name-new"
-               required=""
-               class="form-control">
-    </div>
-    <div class="mb-3">
-        <label for="cardholder-email" class="form-label">Email</label>
-        <input type="text"
-               id="cardholder-email"
-               name="cardholder_email"
-               autocomplete="cardholder-email-new"
-               required=""
-               class="form-control">
-        <div class="mb-3">
-            <label for="cardholder-name" class="form-label">Name on card</label>
-            <input type="text"
-                   id="cardholder-name"
-                   name="cardholder_name"
-                   autocomplete="cardholder-name-new"
-                   required=""
-                   class="form-control">
-        </div>
-    </div>
-    <!-- card number will be built by stripe -->
-    <div class="mb-3">
-        <label for="card-element" class="form-label">Credit Card</label>
-        <div class="form-control" id="card-element"></div>
-        <div class="alert-danger text-center" id="card-errors" role="alert"></div>
-        <div class="alert-success text-center" id="card-success" role="alert"></div>
-    </div>
-    <hr>
-    <a href="javascript:void(0)"
-       id="pay-button"
-       class="btn btn-primary"
-        onclick="val({{.API}})">Pay {{formatCurrency $widget.Price}}/month</a>
-    <div class="text-center d-none" id="processing-payment">
-        <div class="spinner-border text-primary" role="status">
-            <span class="visually-hidden">Loading...</span>
-        </div>
-    </div>
-    <input id="payment_intent"
-           type="hidden"
-           name="payment_intent"
-           value="payment_intent">
-    <input id="payment_method"
-           type="hidden"
-           name="payment_method"
-           value="payment_method">
-    <input id="payment_amount"
-           type="hidden"
-           name="payment_amount"
-           value="payment_amount">
-    <input id="payment_currency"
-           type="hidden"
-           name="payment_currency"
-           value="payment_currency">
-</form>
-{{ end }}
-{{ define "js" }}
-<script src="https://js.stripe.com/v3/"></script>
-<script type="module">
-    import {stripeInit} from "/static/js/common.js";
-    import {val} from "/static/js/stripe-plan.js"
-    stripeInit('{{.StripePubKey}}');
-    document.getElementById("pay-button").addEventListener("click", () => {
-        val({{.API}});
-    })
-</script>
-{{ end }}

cmd/web/templates/buy-once.page.gohtml

@@ -66,7 +66,10 @@ Buy one widget
         <div class="alert-success text-center" id="card-success" role="alert"></div>
     </div>
     <hr>
-    <a href="javascript:void(0)" id="pay-button" class="btn btn-primary">Charge Card</a>
+    <a href="javascript:void(0)"
+       id="pay-button"
+       class="btn btn-primary"
+       onclick="val({{.API}})">Charge Card</a>
     <div class="text-center d-none" id="processing-payment">
         <div class="spinner-border text-primary" role="status">
             <span class="visually-hidden">Loading...</span>
@@ -92,12 +95,6 @@ Buy one widget
 {{ end }}
 {{ define "js" }}
 <script src="https://js.stripe.com/v3/"></script>
-<script type="module">
+<script src="/static/js/stripe.js"></script>
-    import {stripeInit} from "/static/js/common.js";
+<script>stripeInit('{{.StripePubKey}}');</script>
-    import {val} from "/static/js/stripe.js"
-    stripeInit('{{.StripePubKey}}');
-    document.getElementById("pay-button").addEventListener("click", () => {
-        val({{.API}});
-    })
-</script>
 {{ end }}

cmd/web/templates/terminal.page.gohtml

@@ -49,7 +49,10 @@ Virtual Terminal
         <div class="alert-success text-center" id="card-success" role="alert"></div>
     </div>
     <hr>
-    <a href="javascript:void(0)" id="pay-button" class="btn btn-primary">Charge Card</a>
+    <a href="javascript:void(0)"
+       id="pay-button"
+       class="btn btn-primary"
+       onclick="val({{.API}})">Charge Card</a>
     <div class="text-center d-none" id="processing-payment">
         <div class="spinner-border text-primary" role="status">
             <span class="visually-hidden">Loading...</span>
@@ -75,9 +78,8 @@ Virtual Terminal
 {{ end }}
 {{ define "js" }}
 <script src="https://js.stripe.com/v3/"></script>
-<script type="module">
+<script src="/static/js/stripe.js"></script>
-    import {stripeInit} from "/static/js/common.js";
+<script>
-    import {val} from "/static/js/stripe.js"
     stripeInit('{{.StripePubKey}}');
     document.getElementById("charge_amount").addEventListener("change", (evt) => {
         if (evt.target.value !== "") {
@@ -86,10 +88,13 @@ Virtual Terminal
             document.getElementById("amount").value = 0;
         }
     });
-
+    // function termVal() {
-    document.getElementById("pay-button").addEventListener("click", () => {
+    //     const chargeAmount = document.getElementById("charge_amount");
-        val({{.API}});
+    //     if (chargeAmount.value !== "") {
-    })
+    //         document.getElementById("amount").value = parseInt((chargeAmount.value * 100), 10);
-
+    //     } else {
+    //         document.getElementById("amount").value = 0;
+    //     }
+    // }
 </script>
 {{ end }}

cmd/web/templates/virtual-terminal-receipt.page.gohtml

@@ -15,3 +15,4 @@ Payment Succedded!
 <p>Bank Return Code: {{ $txn.BankReturnCode }}</p>
 <p>Expiry Date: {{ $txn.ExpiryMonth }}/{{$txn.ExpiryYear}}</p>
 {{ end }}
+

internal/models/models.go

@@ -33,8 +33,6 @@ type Widget struct {
 	CreatedAt      time.Time `json:"-"`
 	UpdatedAt      time.Time `json:"-"`
 	Image          string    `json:"image"`
-	IsRecurring    bool      `json:"is_recurring"`
-	PlanID         string    `json:"plan_id"`
 }
 
 // Order is the type for all orders
@@ -111,7 +109,6 @@ func (m *DBModel) GetWidget(id int) (Widget, error) {
 
 	query := `SELECT id, name, description, inventory_level, price,
                      coalesce(image, ''),
-                     is_recurring, plan_id,
                      created_at, updated_at
               FROM widgets WHERE id = ?;`
 
@@ -123,8 +120,6 @@ func (m *DBModel) GetWidget(id int) (Widget, error) {
 		&widget.InventoryLevel,
 		&widget.Price,
 		&widget.Image,
-		&widget.IsRecurring,
-		&widget.PlanID,
 		&widget.CreatedAt,
 		&widget.UpdatedAt,
 	)

migrations/20240811195423_add_cols_to_widgets.down.fizz

@@ -1,2 +0,0 @@
-drop_column("widgets", "is_recurring")
-drop_column("widgets", "plan_id")

migrations/20240811195423_add_cols_to_widgets.up.fizz

@@ -1,2 +0,0 @@
-add_column("widgets", "is_recurring", "bool", {"default": 0})
-add_column("widgets", "plan_id", "string", {"default": ""})

static/js/common.js

@@ -1,63 +0,0 @@
-export let card;
-export let stripe;
-const cardMessages = document.getElementById("card-messages");
-const payButton = document.getElementById("pay-button");
-export const processing = document.getElementById("processing-payment");
-
-export function hidePayButton() {
-    payButton.classList.add("d-none");
-    processing.classList.remove("d-none");
-}
-
-export function showPayButton() {
-    payButton.classList.remove("d-none");
-    processing.classList.add("d-none");
-}
-
-export function showCardError(msg) {
-    cardMessages.classList.add("alert-danger");
-    cardMessages.classList.remove("alert-success");
-    cardMessages.classList.remove("d-none");
-    cardMessages.innerText = msg;
-}
-
-export function showCardSuccess() {
-    cardMessages.classList.add("alert-success");
-    cardMessages.classList.remove("alert-danger");
-    cardMessages.classList.remove("d-none");
-    cardMessages.innerText = "Trasaction successful";
-}
-
-export function stripeInit(pubKey) {
-    stripe = Stripe(pubKey);
-
-    (function () {
-        // create stripe & elements
-        const elements = stripe.elements();
-        const style = {
-            base: {
-                fontSize: '16px',
-                lineHeight: '24px',
-            }
-        };
-
-        // create card entry
-        card = elements.create('card', {
-            style: style,
-            hidePostalCode: true,
-        });
-        card.mount("#card-element");
-
-        // check for input errors
-        card.addEventListener('change', function (event) {
-            var displayError = document.getElementById("card-errors");
-            if (event.error) {
-                displayError.classList.remove('d-none');
-                displayError.textContent = event.error.message;
-            } else {
-                displayError.classList.add('d-none');
-                displayError.textContent = "";
-            }
-        });
-    })();
-}

static/js/stripe-plan.js

@@ -1,40 +0,0 @@
-import {
-    hidePayButton,
-    showPayButton,
-    showCardError,
-    showCardSuccess,
-    stripe,
-    card,
-    processing,
-} from './common.js';
-
-export function val() {
-    let form = document.getElementById("charge_form");
-
-    if (form.checkValidity() === false) {
-        this.event.preventDefault();
-        this.event.stopPropagation();
-        form.classList.add("was-validated");
-        return;
-    }
-    form.classList.add("was-validated");
-    hidePayButton();
-
-    let amountToCharge = document.getElementById("amount").value;
-
-    stripe.createPaymentMethod({
-        type: 'card',
-        card: card,
-        billing_details: {
-            email: document.getElementById("cardholder-email").value,
-        },
-    }).then(stripePaymentMethodHandler);
-}
-
-function stripePaymentMethodHandler(result) {
-    if (result.error) {
-        showCardError(result.error.message);
-    } else {
-        // create a customer and subscribe to plan
-    }
-}

static/js/stripe.js

@@ -1,14 +1,34 @@
-import {
+let card;
-    hidePayButton,
+let stripe;
-    showPayButton,
+const cardMessages = document.getElementById("card-messages");
-    showCardError,
+const payButton = document.getElementById("pay-button");
-    showCardSuccess,
+const processing = document.getElementById("processing-payment");
-    stripe,
-    card,
-    processing,
-} from './common.js';
 
-export function val(api) {
+function hidePayButton() {
+    payButton.classList.add("d-none");
+    processing.classList.remove("d-none");
+}
+
+function showPayButton() {
+    payButton.classList.remove("d-none");
+    processing.classList.add("d-none");
+}
+
+function showCardError(msg) {
+    cardMessages.classList.add("alert-danger");
+    cardMessages.classList.remove("alert-success");
+    cardMessages.classList.remove("d-none");
+    cardMessages.innerText = msg;
+}
+
+function showCardSuccess() {
+    cardMessages.classList.add("alert-success");
+    cardMessages.classList.remove("alert-danger");
+    cardMessages.classList.remove("d-none");
+    cardMessages.innerText = "Trasaction successful";
+}
+
+function val(api) {
     let form = document.getElementById("charge_form");
 
     if (form.checkValidity() === false) {
@@ -49,7 +69,7 @@ export function val(api) {
                             name: document.getElementById("cardholder-name").value,
                         }
                     }
-                }).then(function (result) {
+                }).then(function(result) {
                         if (result.error) {
                             // card declined, or sth went wrong with the card
                             showCardError(result.error.message);
@@ -77,3 +97,36 @@ export function val(api) {
         });
 }
 
+function stripeInit(pubKey) {
+    stripe = Stripe(pubKey);
+
+    (function () {
+        // create stripe & elements
+        const elements = stripe.elements();
+        const style = {
+            base: {
+                fontSize: '16px',
+                lineHeight: '24px',
+            }
+        };
+
+        // create card entry
+        card = elements.create('card', {
+            style:style,
+            hidePostalCode: true,
+        });
+        card.mount("#card-element");
+
+        // check for input errors
+        card.addEventListener('change', function(event) {
+            var displayError = document.getElementById("card-errors");
+            if (event.error) {
+                displayError.classList.remove('d-none');
+                displayError.textContent = event.error.message;
+            } else {
+                displayError.classList.add('d-none');
+                displayError.textContent = "";
+            }
+        });
+    })();
+}