diff --git a/cmd/api/handlers-api.go b/cmd/api/handlers-api.go
index 1ca3cad..3111b90 100644
--- a/cmd/api/handlers-api.go
+++ b/cmd/api/handlers-api.go
@@ -10,8 +10,12 @@ import (
 )
 
 type stripePayload struct {
-	Currency string `json:"currency"`
-	Amount   string `json:"amount"`
+	Currency      string `json:"currency"`
+	Amount        string `json:"amount"`
+	PaymentMethod string `json:"payment_method"`
+	Email         string `json:"email"`
+	LastFour      string `json:"last_four"`
+	Plan          string `json:"plan"`
 }
 
 type jsonResponse struct {
@@ -83,3 +87,32 @@ func (app *application) GetWidgetByID(w http.ResponseWriter, r *http.Request) {
 	w.Header().Set("Content-Type", "application/json")
 	w.Write(out)
 }
+
+func (app *application) CreateCustomerAndSubscribeToPlan(w http.ResponseWriter, r *http.Request) {
+	var data stripePayload
+
+	err := json.NewDecoder(r.Body).Decode(&data)
+	if err != nil {
+		app.errorLog.Println(err)
+		return
+	}
+
+	app.infoLog.Println(data.Email, data.LastFour, data.PaymentMethod, data.Plan)
+
+	okay := true
+	msg := ""
+
+	resp := jsonResponse{
+		OK:      okay,
+		Message: msg,
+	}
+
+	out, err := json.MarshalIndent(resp, "", "    ")
+	if err != nil {
+		app.errorLog.Println(err)
+		return
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	w.Write(out)
+}
diff --git a/cmd/api/routes-api.go b/cmd/api/routes-api.go
index d77d357..49bb804 100644
--- a/cmd/api/routes-api.go
+++ b/cmd/api/routes-api.go
@@ -20,5 +20,6 @@ func (app *application) routes() http.Handler {
 
 	mux.Post("/api/payment-intent", app.GetPaymentIntent)
 	mux.Get("/api/widget/{id}", app.GetWidgetByID)
+	mux.Post("/api/create-customer-and-subscribe-to-plan", app.CreateCustomerAndSubscribeToPlan)
 	return mux
 }
diff --git a/cmd/web/templates/bronze-plan.page.gohtml b/cmd/web/templates/bronze-plan.page.gohtml
index 85a2f4e..8069ac6 100644
--- a/cmd/web/templates/bronze-plan.page.gohtml
+++ b/cmd/web/templates/bronze-plan.page.gohtml
@@ -4,7 +4,7 @@ Bronze Plan
 {{ end }}
 {{ define "content" }}
 {{$widget := index .Data "widget"}}
-<h2 class="mt-3 text-center">Bronze Plan: {{formatCurrency $widget.Price}}</h2>
+<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"
@@ -62,10 +62,7 @@ Bronze Plan
         <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>
+    <a href="javascript:void(0)" id="pay-button" class="btn btn-primary">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>
@@ -90,13 +87,14 @@ Bronze Plan
 </form>
 {{ end }}
 {{ define "js" }}
+{{$widget := index .Data "widget"}}
 <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}});
+        val({{$widget.PlanID}}, {{.API}});
     })
 </script>
 {{ end }}