mirror of
https://github.com/simple-login/app.git
synced 2024-10-01 06:01:29 +02:00
183 lines
5.8 KiB
HTML
183 lines
5.8 KiB
HTML
{% extends 'default.html' %}
|
|
|
|
{% set active_page = "dashboard" %}
|
|
|
|
{% block title %}
|
|
Pricing
|
|
{% endblock %}
|
|
|
|
{% block head %}
|
|
<style type="text/css">
|
|
/**
|
|
* The CSS shown here will not be introduced in the Quickstart guide, but shows
|
|
* how you can use CSS to style your Element's container.
|
|
*/
|
|
.StripeElement {
|
|
box-sizing: border-box;
|
|
|
|
height: 40px;
|
|
|
|
padding: 10px 12px;
|
|
|
|
border: 1px solid transparent;
|
|
border-radius: 4px;
|
|
background-color: white;
|
|
|
|
box-shadow: 0 1px 3px 0 #e6ebf1;
|
|
-webkit-transition: box-shadow 150ms ease;
|
|
transition: box-shadow 150ms ease;
|
|
}
|
|
|
|
.StripeElement--focus {
|
|
box-shadow: 0 1px 3px 0 #cfd7df;
|
|
}
|
|
|
|
.StripeElement--invalid {
|
|
border-color: #fa755a;
|
|
}
|
|
|
|
.StripeElement--webkit-autofill {
|
|
background-color: #fefde5 !important;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block default_content %}
|
|
<script src="https://js.stripe.com/v3/"></script>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-6 col-lg-6">
|
|
<div class="card">
|
|
<div class="card-body text-center">
|
|
<div class="card-category">Premium</div>
|
|
<div class="display-4 my-6">$10/year</div>
|
|
<div class="display-5 my-6">or</div>
|
|
<div class="display-4 my-6">$1/month</div>
|
|
<ul class="list-unstyled leading-loose">
|
|
<li><i class="fe fe-check text-success mr-2" aria-hidden="true"></i> Infinite Emails</li>
|
|
<li><i class="fe fe-check text-success mr-2" aria-hidden="true"></i> Custom Alias</li>
|
|
<li><i class="fe fe-check text-success mr-2" aria-hidden="true"></i> Privacy protected</li>
|
|
<li><i class="fe fe-check text-success mr-2" aria-hidden="true"></i> Infinite Login</li>
|
|
<li><i class="fe fe-check text-success mr-2" aria-hidden="true"></i>
|
|
Support us and our application partners
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-6 col-lg-6">
|
|
<div class="display-6">
|
|
The payment is processed by <a href="https://stripe.com" target="_blank">Stripe</a>. <br>
|
|
Your card number is never stored on our server.
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<form method="post" id="payment-form">
|
|
<div class="form-group">
|
|
<label for="card-element" class="form-label">
|
|
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" class="text-danger"></div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="form-label">Plan</div>
|
|
<div class="custom-controls-stacked">
|
|
<label class="custom-control custom-radio custom-control-inline">
|
|
<input type="radio" class="custom-control-input" name="plan" value="yearly" checked>
|
|
<span class="custom-control-label">Yearly</span>
|
|
</label>
|
|
<label class="custom-control custom-radio custom-control-inline">
|
|
<input type="radio" class="custom-control-input" name="plan" value="monthly">
|
|
<span class="custom-control-label">Monthly</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-success">Upgrade</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Create a Stripe client.
|
|
var stripe = Stripe('{{ stripe_api }}');
|
|
|
|
// 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.
|
|
// the postal code is asked on Safari but not on other browsers ...
|
|
// Disable it explicitly
|
|
var card = elements.create('card', {hidePostalCode: true, 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>
|
|
{% endblock %} |