Switch to Stripe Checkout for easier checkout.
Nick Sergeant
parent
ccfb8123a3
commit
a3a859ff9f
|
|
@ -4,19 +4,6 @@
|
|||
|
||||
{% 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 %}
|
||||
<li><a href="/account/activate/">Activate</a></li>
|
||||
{% endblock %}
|
||||
|
|
@ -34,67 +21,18 @@
|
|||
<small style="font-size: 14px; color: #C0C0C0;">(fully refundable within 3 days of signup)</small>
|
||||
</div>
|
||||
<div class="payment-form">
|
||||
<div class="payment-loading"><span>Please wait…</span></div>
|
||||
<div class="payment-errors alert alert-error"></div>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="number">Card number:</label>
|
||||
<div class="controls cards">
|
||||
<input type="text" class="input-xlarge" id="number" />
|
||||
<img src="{{ STATIC_URL }}img/card-visa.png" alt="Visa" />
|
||||
<img src="{{ STATIC_URL }}img/card-mastercard.png" alt="MasterCard" />
|
||||
<img src="{{ STATIC_URL }}img/card-discover.png" alt="Discover" />
|
||||
<img src="{{ STATIC_URL }}img/card-american-express.png" alt="American Express" />
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<script
|
||||
src="https://checkout.stripe.com/checkout.js"
|
||||
class="stripe-button"
|
||||
data-email="{{ request.user.email }}"
|
||||
data-key="{% if debug %}pk_test_cgknmaWRMQeJt2adEdvH3T9l{% else %}pk_live_gUO2nCl7dhx6j0posz6gnbhA{% endif %}"
|
||||
data-image="{{ STATIC_URL }}img/avatar.png"
|
||||
data-name="Snipt"
|
||||
data-description="Full Snipt.net Account ($5.00)"
|
||||
data-amount="500">
|
||||
</script>
|
||||
{% 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 class="form-actions" style="color: #A2A2A2;">
|
||||
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 'token' not in request.POST:
|
||||
if 'stripeToken' not in request.POST:
|
||||
return HttpResponseBadRequest()
|
||||
|
||||
token = request.POST['token']
|
||||
token = request.POST['stripeToken']
|
||||
stripe.api_key = os.environ.get('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 {
|
||||
margin-top: 27px;
|
||||
padding-left: 0;
|
||||
text-align: center;
|
||||
}
|
||||
fieldset {
|
||||
padding-top: 27px;
|
||||
|
|
@ -3207,7 +3209,8 @@ div.team-controller {
|
|||
|
||||
div.payment-form {
|
||||
margin: 0 auto;
|
||||
width: 86%;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div.with-teams-search {
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 547 KiB |
|
|
@ -96,62 +96,6 @@
|
|||
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')) {
|
||||
$('input#id_username').focus();
|
||||
}
|
||||
|
|
@ -248,30 +192,6 @@
|
|||
$('div.infield label', this.$body).inFieldLabels({
|
||||
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