Switch to Stripe Checkout for easier checkout.
parent
ccfb8123a3
commit
a3a859ff9f
|
@ -4,19 +4,6 @@
|
||||||
|
|
||||||
{% block body-class %}{{ block.super }} static signup pro pro-signup{% endblock %}
|
{% block body-class %}{{ block.super }} static signup pro pro-signup{% endblock %}
|
||||||
|
|
||||||
{% block extra-scripts %}
|
|
||||||
<script type="text/javascript" src="https://js.stripe.com/v1/"></script>
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block js %}
|
|
||||||
{{ block.super }}
|
|
||||||
{% if debug %}
|
|
||||||
Stripe.setPublishableKey('pk_test_cgknmaWRMQeJt2adEdvH3T9l');
|
|
||||||
{% else %}
|
|
||||||
Stripe.setPublishableKey('pk_live_gUO2nCl7dhx6j0posz6gnbhA');
|
|
||||||
{% endif %}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block breadcrumb %}
|
{% block breadcrumb %}
|
||||||
<li><a href="/account/activate/">Activate</a></li>
|
<li><a href="/account/activate/">Activate</a></li>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
@ -34,67 +21,18 @@
|
||||||
<small style="font-size: 14px; color: #C0C0C0;">(fully refundable within 3 days of signup)</small>
|
<small style="font-size: 14px; color: #C0C0C0;">(fully refundable within 3 days of signup)</small>
|
||||||
</div>
|
</div>
|
||||||
<div class="payment-form">
|
<div class="payment-form">
|
||||||
<div class="payment-loading"><span>Please wait…</span></div>
|
|
||||||
<div class="payment-errors alert alert-error"></div>
|
<div class="payment-errors alert alert-error"></div>
|
||||||
<div class="control-group">
|
<script
|
||||||
<label class="control-label" for="number">Card number:</label>
|
src="https://checkout.stripe.com/checkout.js"
|
||||||
<div class="controls cards">
|
class="stripe-button"
|
||||||
<input type="text" class="input-xlarge" id="number" />
|
data-email="{{ request.user.email }}"
|
||||||
<img src="{{ STATIC_URL }}img/card-visa.png" alt="Visa" />
|
data-key="{% if debug %}pk_test_cgknmaWRMQeJt2adEdvH3T9l{% else %}pk_live_gUO2nCl7dhx6j0posz6gnbhA{% endif %}"
|
||||||
<img src="{{ STATIC_URL }}img/card-mastercard.png" alt="MasterCard" />
|
data-image="{{ STATIC_URL }}img/avatar.png"
|
||||||
<img src="{{ STATIC_URL }}img/card-discover.png" alt="Discover" />
|
data-name="Snipt"
|
||||||
<img src="{{ STATIC_URL }}img/card-american-express.png" alt="American Express" />
|
data-description="Full Snipt.net Account ($5.00)"
|
||||||
</div>
|
data-amount="500">
|
||||||
</div>
|
</script>
|
||||||
<div class="control-group">
|
|
||||||
<label class="control-label" for="exp-month">Expiration date:</label>
|
|
||||||
<div class="controls">
|
|
||||||
<select id="exp-month" class="span2 exp-month">
|
|
||||||
<option value="">----</option>
|
|
||||||
<option value="01">01 - January</option>
|
|
||||||
<option value="02">02 - February</option>
|
|
||||||
<option value="03">03 - March</option>
|
|
||||||
<option value="04">04 - April</option>
|
|
||||||
<option value="05">05 - May</option>
|
|
||||||
<option value="06">06 - June</option>
|
|
||||||
<option value="07">07 - July</option>
|
|
||||||
<option value="08">08 - August</option>
|
|
||||||
<option value="09">09 - September</option>
|
|
||||||
<option value="10">10 - October</option>
|
|
||||||
<option value="11">11 - November</option>
|
|
||||||
<option value="12">12 - December</option>
|
|
||||||
</select>
|
|
||||||
<select id="exp-year" class="span2">
|
|
||||||
<option value="">----</option>
|
|
||||||
<option value="2016">2016</option>
|
|
||||||
<option value="2017">2017</option>
|
|
||||||
<option value="2018">2018</option>
|
|
||||||
<option value="2019">2019</option>
|
|
||||||
<option value="2020">2020</option>
|
|
||||||
<option value="2021">2021</option>
|
|
||||||
<option value="2022">2022</option>
|
|
||||||
<option value="2023">2023</option>
|
|
||||||
<option value="2024">2024</option>
|
|
||||||
<option value="2025">2025</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="control-group">
|
|
||||||
<label class="control-label" for="cvc">Security code (CVC):</label>
|
|
||||||
<div class="controls">
|
|
||||||
<input type="text" class="input-min span1" id="cvc">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-actions">
|
|
||||||
{% csrf_token %}
|
{% csrf_token %}
|
||||||
<button type="submit" class="btn btn-success">Activate »</button>
|
|
||||||
<div class="security">
|
|
||||||
<a href="https://stripe.com/help/security">Secure</a> by default. Every Snipt page is secure.
|
|
||||||
</div>
|
|
||||||
<div class="stripe">
|
|
||||||
Your credit card is stored securely with <a href="https://stripe.com">Stripe</a> and we use <a href="https://stripe.com/docs/stripe.js">Stripe.js</a> for maximum security.
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="form-actions" style="color: #A2A2A2;">
|
<div class="form-actions" style="color: #A2A2A2;">
|
||||||
Prefer to pay with PayPal? Email <a href="mailto:support@snipt.net">support@snipt.net</a>.
|
Prefer to pay with PayPal? Email <a href="mailto:support@snipt.net">support@snipt.net</a>.
|
||||||
|
|
|
@ -22,10 +22,10 @@ def activate(request):
|
||||||
|
|
||||||
if request.method == 'POST':
|
if request.method == 'POST':
|
||||||
|
|
||||||
if 'token' not in request.POST:
|
if 'stripeToken' not in request.POST:
|
||||||
return HttpResponseBadRequest()
|
return HttpResponseBadRequest()
|
||||||
|
|
||||||
token = request.POST['token']
|
token = request.POST['stripeToken']
|
||||||
stripe.api_key = os.environ.get('STRIPE_SECRET_KEY',
|
stripe.api_key = os.environ.get('STRIPE_SECRET_KEY',
|
||||||
settings.STRIPE_SECRET_KEY)
|
settings.STRIPE_SECRET_KEY)
|
||||||
|
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -2294,6 +2294,8 @@ body.static {
|
||||||
}
|
}
|
||||||
div.form-actions {
|
div.form-actions {
|
||||||
margin-top: 27px;
|
margin-top: 27px;
|
||||||
|
padding-left: 0;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
fieldset {
|
fieldset {
|
||||||
padding-top: 27px;
|
padding-top: 27px;
|
||||||
|
@ -3207,7 +3209,8 @@ div.team-controller {
|
||||||
|
|
||||||
div.payment-form {
|
div.payment-form {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
width: 86%;
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.with-teams-search {
|
div.with-teams-search {
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 547 KiB |
|
@ -96,62 +96,6 @@
|
||||||
window.ui_halted = false;
|
window.ui_halted = false;
|
||||||
});
|
});
|
||||||
|
|
||||||
if (this.$body.hasClass('pro-signup')) {
|
|
||||||
var $form = $('form#pro-signup');
|
|
||||||
var $submit = $('button[type="submit"]', $form);
|
|
||||||
|
|
||||||
var $cardNumber = $('input#number');
|
|
||||||
var $expMonth = $('select#exp-month');
|
|
||||||
var $expYear = $('select#exp-year');
|
|
||||||
var $cvc = $('input#cvc');
|
|
||||||
|
|
||||||
$form.submit(function() {
|
|
||||||
|
|
||||||
$submit.attr('disabled', 'disabled');
|
|
||||||
|
|
||||||
var errors = false;
|
|
||||||
|
|
||||||
if (!Stripe.validateCardNumber($cardNumber.val())) {
|
|
||||||
$cardNumber.parents('div.control-group').addClass('error');
|
|
||||||
errors = true;
|
|
||||||
} else {
|
|
||||||
$cardNumber.parents('div.control-group').removeClass('error');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!Stripe.validateExpiry($expMonth.val(), $expYear.val())) {
|
|
||||||
$expMonth.parents('div.control-group').addClass('error');
|
|
||||||
errors = true;
|
|
||||||
} else {
|
|
||||||
$expMonth.parents('div.control-group').removeClass('error');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!Stripe.validateCVC($cvc.val())) {
|
|
||||||
$cvc.parents('div.control-group').addClass('error');
|
|
||||||
errors = true;
|
|
||||||
} else {
|
|
||||||
$cvc.parents('div.control-group').removeClass('error');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!errors) {
|
|
||||||
|
|
||||||
$('.payment-errors').hide();
|
|
||||||
$('.payment-loading').show();
|
|
||||||
|
|
||||||
Stripe.createToken({
|
|
||||||
number: $cardNumber.val(),
|
|
||||||
cvc: $cvc.val(),
|
|
||||||
exp_month: $expMonth.val(),
|
|
||||||
exp_year: $expYear.val()
|
|
||||||
}, that.stripeResponseHandler);
|
|
||||||
|
|
||||||
} else {
|
|
||||||
$submit.removeAttr('disabled');
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.$body.hasClass('login')) {
|
if (this.$body.hasClass('login')) {
|
||||||
$('input#id_username').focus();
|
$('input#id_username').focus();
|
||||||
}
|
}
|
||||||
|
@ -248,30 +192,6 @@
|
||||||
$('div.infield label', this.$body).inFieldLabels({
|
$('div.infield label', this.$body).inFieldLabels({
|
||||||
fadeDuration: 200
|
fadeDuration: 200
|
||||||
});
|
});
|
||||||
},
|
|
||||||
stripeResponseHandler: function(status, response) {
|
|
||||||
|
|
||||||
var $form = $('form#pro-signup');
|
|
||||||
|
|
||||||
if (response.error) {
|
|
||||||
$('button[type="submit"]', $form).removeAttr('disabled');
|
|
||||||
$('.payment-loading').hide();
|
|
||||||
$('.payment-errors').text(response.error.message).show();
|
|
||||||
} else {
|
|
||||||
var token = response.id;
|
|
||||||
|
|
||||||
// Kill all of the form details so none of it touches our server.
|
|
||||||
// Note, this is unnecessary, because the inputs themselves do not
|
|
||||||
// have a name attr, meaning they'll never get sent to begin with.
|
|
||||||
$('input#name').val('');
|
|
||||||
$('input#number').val('');
|
|
||||||
$('select#exp-month').val('');
|
|
||||||
$('select#exp-year').val('');
|
|
||||||
$('input#cvc').val('');
|
|
||||||
|
|
||||||
$form.append("<input type='hidden' name='token' value='" + token + "'/>");
|
|
||||||
$form.get(0).submit();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue