123 lines
3.4 KiB
HTML
123 lines
3.4 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<script src="http://code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
|
|
|
|
<!-- font awesome from BootstrapCDN -->
|
|
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
|
|
|
<script src="/public/js.cookie.js"></script>
|
|
<link href="/public/app.css" rel="stylesheet">
|
|
<script src="https://js.stripe.com/v3/"></script>
|
|
|
|
</head>
|
|
|
|
<body class="home">
|
|
<div class="container">
|
|
{{.Product.Name}}
|
|
<form method="POST" id="payment-form">
|
|
<div class="form-group">
|
|
{{range .Plans}}
|
|
<div class="form-check">
|
|
<input type="radio" name="plan" class="form-control" id="{{.ID}}" value="{{.ID}}">
|
|
<label class="form-check-label" for="{{.ID}}">
|
|
{{.Nickname}}({{.AmountDecimal}})
|
|
</label>
|
|
</div>
|
|
{{end}}
|
|
|
|
<div class="form-row">
|
|
<label for="card-element">
|
|
Credit or debit card
|
|
</label>
|
|
<div id="card-element">
|
|
<!-- A Stripe Element will be inserted here. -->
|
|
</div>
|
|
|
|
<!-- Used to display form errors. -->
|
|
<div id="card-errors" role="alert"></div>
|
|
</div>
|
|
|
|
<button>Submit Payment</button>
|
|
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
<script>
|
|
// Create a Stripe client.
|
|
var stripe = Stripe('pk_test_ghSfaAtzKpBNxyrRlgGPuVBu00v5d1ptjL');
|
|
|
|
// Create an instance of Elements.
|
|
var elements = stripe.elements();
|
|
|
|
// Custom styling can be passed to options when creating an Element.
|
|
// (Note that this demo uses a wider set of styles than the guide below.)
|
|
var style = {
|
|
base: {
|
|
color: '#32325d',
|
|
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
|
|
fontSmoothing: 'antialiased',
|
|
fontSize: '16px',
|
|
'::placeholder': {
|
|
color: '#aab7c4'
|
|
}
|
|
},
|
|
invalid: {
|
|
color: '#fa755a',
|
|
iconColor: '#fa755a'
|
|
}
|
|
};
|
|
|
|
// Create an instance of the card Element.
|
|
var card = elements.create('card', { style: style });
|
|
|
|
// Add an instance of the card Element into the `card-element` <div>.
|
|
card.mount('#card-element');
|
|
|
|
// Handle real-time validation errors from the card Element.
|
|
card.addEventListener('change', function (event) {
|
|
var displayError = document.getElementById('card-errors');
|
|
if (event.error) {
|
|
displayError.textContent = event.error.message;
|
|
} else {
|
|
displayError.textContent = '';
|
|
}
|
|
});
|
|
|
|
// Handle form submission.
|
|
var form = document.getElementById('payment-form');
|
|
form.addEventListener('submit', function (event) {
|
|
event.preventDefault();
|
|
|
|
stripe.createToken(card).then(function (result) {
|
|
if (result.error) {
|
|
// Inform the user if there was an error.
|
|
var errorElement = document.getElementById('card-errors');
|
|
errorElement.textContent = result.error.message;
|
|
} else {
|
|
// Send the token to your server.
|
|
stripeTokenHandler(result.token);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Submit the form with the token ID.
|
|
function stripeTokenHandler(token) {
|
|
// Insert the token ID into the form so it gets submitted to the server
|
|
var form = document.getElementById('payment-form');
|
|
var hiddenInput = document.createElement('input');
|
|
hiddenInput.setAttribute('type', 'hidden');
|
|
hiddenInput.setAttribute('name', 'stripeToken');
|
|
hiddenInput.setAttribute('value', token.id);
|
|
form.appendChild(hiddenInput);
|
|
|
|
// Submit the form
|
|
form.submit();
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |