73 lines
1.6 KiB
HTML
73 lines
1.6 KiB
HTML
{% extends 'uncloud/base.html' %}
|
|
|
|
{% block header %}
|
|
<script src="https://js.stripe.com/v3/"></script>
|
|
<style>
|
|
#content {
|
|
width: 400px;
|
|
margin: auto;
|
|
}
|
|
|
|
#callback-form {
|
|
display: none;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
<div id="content">
|
|
<h1>Registering Stripe Credit Card</h1>
|
|
|
|
<!-- Stripe form and messages -->
|
|
<span id="message"></span>
|
|
<form id="setup-form">
|
|
<div id="card-element"></div>
|
|
<button type='button' id="card-button">
|
|
Save
|
|
</button>
|
|
</form>
|
|
|
|
<!-- Dirty hack used for callback to API -->
|
|
<form id="callback-form" action="{{ callback }}" method="post"></form>
|
|
</div>
|
|
|
|
<!-- Enable Stripe from UI elements -->
|
|
<script>
|
|
var stripe = Stripe('{{ stripe_pk }}');
|
|
|
|
var elements = stripe.elements();
|
|
var cardElement = elements.create('card');
|
|
cardElement.mount('#card-element');
|
|
</script>
|
|
|
|
<!-- Handle card submission -->
|
|
<script>
|
|
var cardButton = document.getElementById('card-button');
|
|
var messageContainer = document.getElementById('message');
|
|
var clientSecret = '{{ client_secret }}';
|
|
|
|
cardButton.addEventListener('click', function(ev) {
|
|
|
|
stripe.confirmCardSetup(
|
|
clientSecret,
|
|
{
|
|
payment_method: {
|
|
card: cardElement,
|
|
billing_details: {
|
|
},
|
|
},
|
|
}
|
|
).then(function(result) {
|
|
if (result.error) {
|
|
var message = document.createTextNode('Error:' + result.error.message);
|
|
messageContainer.appendChild(message);
|
|
} else {
|
|
// Return to API on success.
|
|
document.getElementById("callback-form").submit();
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
{% endblock %}
|