vinchent/udemy-go-web-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

move some common parts in common.js

Browse Source
This commit is contained in:
vinchent 2024-08-11 22:51:34 +02:00
parent 16e5845559
commit 85c1928c31
4 changed files with 111 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
cmd/web/templates/buy-once.page.gohtml
View File

@ -66,10 +66,7 @@ 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"
onclick="val({{.API}})">Charge Card</a>
<a href="javascript:void(0)" id="pay-button" class="btn btn-primary">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>
@ -95,6 +92,13 @@ Buy one widget
{{ end }}
{{ define "js" }}
<script src="https://js.stripe.com/v3/"></script>
<script src="/static/js/stripe.js"></script>
<script>stripeInit('{{.StripePubKey}}');</script>
<script type="module" src="/static/js/stripe.js"></script>
<script type="module">
import {stripeInit} from "/static/js/common.js";
import {val} from "/static/js/stripe.js"
stripeInit('{{.StripePubKey}}');
document.getElementById("pay-button").addEventListener("click", () => {
val({{.API}});
})
</script>
{{ end }}

24
cmd/web/templates/terminal.page.gohtml
View File

@ -49,10 +49,7 @@ 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"
onclick="val({{.API}})">Charge Card</a>
<a href="javascript:void(0)" id="pay-button" class="btn btn-primary">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>
@ -78,8 +75,10 @@ Virtual Terminal
{{ end }}
{{ define "js" }}
<script src="https://js.stripe.com/v3/"></script>
<script src="/static/js/stripe.js"></script>
<script>
<script type="module" src="/static/js/stripe.js"></script>
<script type="module">
import {stripeInit} from "/static/js/common.js";
import {val} from "/static/js/stripe.js"
stripeInit('{{.StripePubKey}}');
document.getElementById("charge_amount").addEventListener("change", (evt) => {
if (evt.target.value !== "") {
@ -88,13 +87,10 @@ Virtual Terminal
document.getElementById("amount").value = 0;
}
});
// function termVal() {
// const chargeAmount = document.getElementById("charge_amount");
// if (chargeAmount.value !== "") {
// document.getElementById("amount").value = parseInt((chargeAmount.value * 100), 10);
// } else {
// document.getElementById("amount").value = 0;
// }
// }
document.getElementById("pay-button").addEventListener("click", () => {
val({{.API}});
})
</script>
{{ end }}

63
static/js/common.js Normal file
View File

@ -0,0 +1,63 @@
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 = "";
}
});
})();
}

75
static/js/stripe.js
View File

@ -1,34 +1,14 @@
let card;
let stripe;
const cardMessages = document.getElementById("card-messages");
const payButton = document.getElementById("pay-button");
const processing = document.getElementById("processing-payment");
import {
hidePayButton,
showPayButton,
showCardError,
showCardSuccess,
stripe,
card,
processing,
} from './common.js';
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) {
export function val(api) {
let form = document.getElementById("charge_form");
if (form.checkValidity() === false) {
@ -69,7 +49,7 @@ 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);
@ -97,36 +77,3 @@ 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 = "";
}
});
})();
}