udemy-go-web-2/cmd/web/templates/bronze-plan.page.gohtml

101 lines
3.6 KiB
Plaintext
Raw Normal View History

2024-08-11 20:08:55 +00:00
{{ 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>
2024-08-11 20:08:55 +00:00
<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="">
2024-08-12 17:10:27 +00:00
<input type="hidden" id="product_id" name="product_id" value="{{$widget.ID}}">
2024-08-11 20:08:55 +00:00
<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">Pay {{ formatCurrency $widget.Price }}/month</a>
2024-08-11 20:08:55 +00:00
<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" }}
{{$widget := index .Data "widget"}}
2024-08-11 20:08:55 +00:00
<script src="https://js.stripe.com/v3/"></script>
2024-08-11 20:58:06 +00:00
<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({{$widget.PlanID}}, {{.API}});
2024-08-11 20:58:06 +00:00
})
</script>
2024-08-11 20:08:55 +00:00
{{ end }}