103 lines
2.7 KiB
HTML
103 lines
2.7 KiB
HTML
{{define "header_additions"}}
|
|
<script src="https://js.stripe.com/v3/"></script>
|
|
{{end}}
|
|
{{define "body_content"}}
|
|
<p class="title is-4">Checkout</p>
|
|
|
|
<p id="charge_data" hidden>0002CC01000003F7:2</p>
|
|
|
|
<div id="card-element">
|
|
<!-- Elements will create input elements here -->
|
|
</div>
|
|
|
|
<!-- We'll put the error messages in this element -->
|
|
<div id="card-errors" role="alert"></div>
|
|
|
|
<button id="submit">Pay</button>
|
|
|
|
<script type="text/javascript">
|
|
// Set your publishable key: remember to change this to your live publishable key in production
|
|
// See your keys here: https://dashboard.stripe.com/account/apikeys
|
|
var stripe = Stripe('pk_test_YkSGqH3Tk9WKK9HrlY63GhAg');
|
|
var elements = stripe.elements();
|
|
|
|
|
|
// Set up Stripe.js and Elements to use in checkout form
|
|
var style = {
|
|
base: {
|
|
color: "#32325d",
|
|
}
|
|
};
|
|
|
|
var card = elements.create("card", { style: style });
|
|
card.mount("#card-element");
|
|
|
|
|
|
card.addEventListener('change', ({error}) => {
|
|
const displayError = document.getElementById('card-errors');
|
|
if (error) {
|
|
displayError.textContent = error.message;
|
|
} else {
|
|
displayError.textContent = '';
|
|
}
|
|
});
|
|
|
|
|
|
var submitButton = document.getElementById('submit');
|
|
|
|
function GetClientSecret() {
|
|
var result = "";
|
|
$.ajax({
|
|
async: false,
|
|
url: "getstripepaymentintent",
|
|
type: "get", //send it through get method
|
|
dataType: "json",
|
|
data: {
|
|
charge_data: $("#charge_data").html()
|
|
},
|
|
success: function(response) {
|
|
console.log('pay success');
|
|
console.log(response.stripesessionid);
|
|
console.log('rc: '+response.rc);
|
|
if (response.rc == 0) {
|
|
result = response.stripeclientsecret;
|
|
}
|
|
},
|
|
error: function(xhr) {
|
|
console.log('getstripepaymentintent error');
|
|
//Do Something to handle error
|
|
}
|
|
});
|
|
|
|
return result;
|
|
}
|
|
|
|
submitButton.addEventListener('click', function(ev) {
|
|
var clientSecret = GetClientSecret();
|
|
stripe.confirmCardPayment(clientSecret, {
|
|
payment_method: {
|
|
card: card,
|
|
billing_details: {
|
|
name: 'Jenny Rosen'
|
|
}
|
|
}
|
|
}).then(function(result) {
|
|
if (result.error) {
|
|
// Show error to your customer (e.g., insufficient funds)
|
|
console.log(result.error.message);
|
|
} else {
|
|
// The payment has been processed!
|
|
if (result.paymentIntent.status === 'succeeded') {
|
|
// Show a success message to your customer
|
|
// There's a risk of the customer closing the window before callback
|
|
// execution. Set up a webhook or plugin to listen for the
|
|
// payment_intent.succeeded event that handles any business critical
|
|
// post-payment actions.
|
|
alert("Payment succeeded!!!");
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{{end}}
|