load stripe functions only when needed

This commit is contained in:
Joerg Lehmann 2020-04-23 19:29:08 +02:00
parent 28914b4337
commit 6e52aa9acd
1 changed files with 44 additions and 27 deletions

View File

@ -1,6 +1,3 @@
{{define "header_additions"}}
<script src="https://js.stripe.com/v3/"></script>
{{end}}
{{define "body_content"}} {{define "body_content"}}
{{ if ne .UserName "" }} {{ if ne .UserName "" }}
<div id="modal" class="modal"> <div id="modal" class="modal">
@ -281,6 +278,7 @@ function add_years(dt,n)
$(".abo_pay").click(function() { $(".abo_pay").click(function() {
console.log("pay..."); console.log("pay...");
loadStripeLibrary();
counter = 0; counter = 0;
charge_data = ''; charge_data = '';
abo_table = '<table class="table is-bordered is-fullwidth" >'; abo_table = '<table class="table is-bordered is-fullwidth" >';
@ -390,31 +388,50 @@ $("#modal-save").click(function() {
}); });
// Set your publishable key: remember to change this to your live publishable key in production function loadStripeLibrary() {
// See your keys here: https://dashboard.stripe.com/account/apikeys $.ajax({
var stripe = Stripe('pk_test_YkSGqH3Tk9WKK9HrlY63GhAg'); url: "https://js.stripe.com/v3/",
var elements = stripe.elements({ locale: "de" }); dataType: "script",
async: false, // <-- This is the key
success: function () {
// all good...
console.log("loadStripeLibrary called...");
SetupStripe();
},
error: function () {
throw new Error("Could not load script " + script);
}
});
}
// Set up Stripe.js and Elements to use in checkout form function SetupStripe() {
var style = { console.log("SetupStripe");
base: { // Set your publishable key: remember to change this to your live publishable key in production
color: "#32325d", // See your keys here: https://dashboard.stripe.com/account/apikeys
} stripe = Stripe('pk_test_YkSGqH3Tk9WKK9HrlY63GhAg');
}; elements = stripe.elements({ locale: "de" });
var card = elements.create("card", { style: style }); // Set up Stripe.js and Elements to use in checkout form
card.mount("#card-element"); style = {
$("#card-errors-article").hide(); base: {
color: "#32325d",
card.addEventListener('change', ({error}) => { }
if (error) { };
$("#card-errors").text(error.message);
$("#card-errors-article").show(); card = elements.create("card", { style: style });
} else { card.mount("#card-element");
$("#card-errors").text(""); $("#card-errors-article").hide();
$("#card-errors-article").hide();
} card.addEventListener('change', ({error}) => {
}); if (error) {
$("#card-errors").text(error.message);
$("#card-errors-article").show();
} else {
$("#card-errors").text("");
$("#card-errors-article").hide();
}
});
}
function ConfirmPayment(clientSecret) { function ConfirmPayment(clientSecret) {
stripe.confirmCardPayment(clientSecret, { stripe.confirmCardPayment(clientSecret, {