dynamicweb/membership/templates/creditcard.html

108 lines
4.5 KiB
HTML
Raw Normal View History

2016-03-11 18:42:45 +00:00
<html>
<head>
2016-04-23 21:38:09 +00:00
{% load static %}
2016-03-03 21:55:23 +00:00
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
2016-03-11 18:42:45 +00:00
<script type="text/javascript"
2016-04-23 21:38:09 +00:00
src="{% static 'digitalglarus/bower_components/jquery/dist/jquery.min.js' %}"></script>
2016-03-11 18:42:45 +00:00
<script type="text/javascript"
2016-04-23 21:38:09 +00:00
src="{% static 'digitalglarus/bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script>
<link href="{% static 'digitalglarus/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'digitalglarus/bower_components/bootstrap/dist/css/bootstrap.css' %}"
rel="stylesheet" type="text/css">
2016-03-11 18:42:45 +00:00
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script type="text/javascript">
Stripe.setPublishableKey('{{ stripe_key }}');
var stripeResponseHandler = function (status, response) {
var $form = $('#payment-form');
if (response.error) {
debugger;
// Show the errors on the form
$form.find('.payment-errors').text(response.error.message);
$form.find('button').prop('disabled', false);
} else {
// token contains id, last4, and card type
var token = response.id;
// Insert the token into the form so it gets submitted to the server
$form.append($('<input type="hidden" name="stripeToken" />').val(token));
// and re-submit
$form.get(0).submit();
}
};
jQuery(function ($) {
$('#payment-form').submit(function (e) {
var $form = $(this);
m_y = $("#id_expiry_date").val().split("/")
// Disable the submit button to prevent repeated clicks
$form.find('button').prop('disabled', true);
Stripe.card.createToken({
number: $("#id_card_number").val(),
cvc: $("#id_ccv").val(),
2016-04-23 21:38:09 +00:00
exp_month: m_y[0],
exp_year: m_y[1]
2016-03-11 18:42:45 +00:00
}, stripeResponseHandler);
// Prevent the form from submitting with the default action
return false;
});
});
</script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"
rel="stylesheet" type="text/css">
{% load static %}
<link href="{% get_static_prefix %}membership.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="section">
<div class="container">
2016-03-03 21:55:23 +00:00
<div class="row">
2016-03-11 18:42:45 +00:00
<div class="col-md-2"></div>
<div class="col-md-8">
<h3 class="text-left text-muted">Payment details</h3>
<hr>
<div class="page-header text-muted" contenteditable="true">
<h5>{{ time }} coworking membership &nbsp;({{ price }} CHF)</h5>
<h5>&nbsp; +{{ free }} free working days included &nbsp;(0 CHF)</h5>
<div class="page-header text-muted">
<h5>Valid 01.01.2016 - 31.12.2016&nbsp;</h5>
<h5>Coworker Name&nbsp;: {{ name }}&nbsp;</h5>
</div>
</div>
<div class="page-header text-muted">
<h3 class="text-right">Total : {{ price }} CHF</h3>
</div>
<form id="payment-form" role="form" method="post">
<div class="payment-error"></div>
{% csrf_token %}
{% for field in form %}
<div class="form-group">
<label class="control-label">{{ field.label }}*</label>
{{ field }}
{% for error in field.errors %}
{{ error|striptags }}
{% endfor %}
</div>
{% endfor %}
<button type="submit" class="btn btn-block btn-primary">Submit</button>
</form>
<a class="btn btn-block btn-info">Cancel</a>
2016-03-03 21:55:23 +00:00
</div>
2016-03-11 18:42:45 +00:00
<div class="col-md-2"></div>
2016-03-03 21:55:23 +00:00
</div>
<div class="row">
2016-03-11 18:42:45 +00:00
<div class="col-md-11">
<br>
<p class="text-center text-muted">Have probelm? Contact
<a href="">help@digitalglarus.ch.</a>
<br>
<br>
</p>
</div>
2016-03-03 21:55:23 +00:00
</div>
</div>
2016-03-11 18:42:45 +00:00
</div>
2016-03-03 21:55:23 +00:00
2016-03-11 18:42:45 +00:00
</body>
</html>