Merge pull request #307 from levivm/develop

Added DE support for stripe error
This commit is contained in:
Levi Velázquez 2017-06-04 17:08:26 -05:00 committed by GitHub
commit 0f84373e19
5 changed files with 77 additions and 32 deletions

View file

@ -16,3 +16,5 @@ next:
* [opennebula_api] Improve testing, add ssh key functions * [opennebula_api] Improve testing, add ssh key functions
* [opennebula_api] Remove template views * [opennebula_api] Remove template views
* [datacenterlight] Allow user to have multiple ssh keys * [datacenterlight] Allow user to have multiple ssh keys
* [datacenterlight] Changed stripe.js v2 to v3
* [datacenterlight] Added support for stripe payment errors on current user language

View file

@ -1,5 +1,11 @@
$( document ).ready(function() { $( document ).ready(function() {
var stripe = Stripe(window.stripeKey);
var elements = stripe.elements({locale: window.current_lan});
var card = elements.create('card', options={hidePostalCode: true});
card.mount('#card-element');
$.ajaxSetup({ $.ajaxSetup({
beforeSend: function(xhr, settings) { beforeSend: function(xhr, settings) {
function getCookie(name) { function getCookie(name) {
@ -38,10 +44,8 @@ $( document ).ready(function() {
console.log("creditcard sdasd"); console.log("creditcard sdasd");
// if (hasCreditcard) { // if (hasCreditcard) {
$('#billing-form').submit(); $('#billing-form').submit();
console.log("has creditcard2");
// } // }
// $form.submit();
} }
@ -53,33 +57,55 @@ $( document ).ready(function() {
function payWithStripe(e) { function payWithStripe(e) {
e.preventDefault(); e.preventDefault();
/* Visual feedback */ function stripeTokenHandler(token) {
$form.find('[type=submit]').html('Validating <i class="fa fa-spinner fa-pulse"></i>'); // 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');
$('#id_token').val(token.id);
var PublishableKey = window.stripeKey; $('#billing-form').submit();
Stripe.setPublishableKey(PublishableKey); }
Stripe.card.createToken($form, function stripeResponseHandler(status, response) {
if (response.error) {
/* Visual feedback */ stripe.createToken(card).then(function(result) {
$form.find('[type=submit]').html('Try again'); if (result.error) {
/* Show Stripe errors on the form */ // Inform the user if there was an error
$form.find('.payment-errors').text(response.error.message); var errorElement = document.getElementById('card-errors');
$form.find('.payment-errors').closest('.row').show(); errorElement.textContent = result.error.message;
} else { } else {
/* Visual feedback */
$form.find('[type=submit]').html('Processing <i class="fa fa-spinner fa-pulse"></i>'); $form.find('[type=submit]').html('Processing <i class="fa fa-spinner fa-pulse"></i>');
/* Hide Stripe errors on the form */ // Send the token to your server
$form.find('.payment-errors').closest('.row').hide(); stripeTokenHandler(result.token);
$form.find('.payment-errors').text("");
// response contains id and card, which contains additional card details
var token = response.id;
// AJAX
//set token on a hidden input
$('#id_token').val(token);
$('#billing-form').submit();
} }
}); });
// /* Visual feedback */
// $form.find('[type=submit]').html('Validating <i class="fa fa-spinner fa-pulse"></i>');
// var PublishableKey = window.stripeKey;
// Stripe.setPublishableKey(PublishableKey);
// Stripe.card.createToken($form, function stripeResponseHandler(status, response) {
// if (response.error) {
// /* Visual feedback */
// $form.find('[type=submit]').html('Try again');
// /* Show Stripe errors on the form */
// $form.find('.payment-errors').text(response.error.message);
// $form.find('.payment-errors').closest('.row').show();
// } else {
// /* Visual feedback */
// $form.find('[type=submit]').html('Processing <i class="fa fa-spinner fa-pulse"></i>');
// /* Hide Stripe errors on the form */
// $form.find('.payment-errors').closest('.row').hide();
// $form.find('.payment-errors').text("");
// // response contains id and card, which contains additional card details
// var token = response.id;
// // AJAX
// //set token on a hidden input
// $('#id_token').val(token);
// $('#billing-form').submit();
// }
// });
} }
/* Form validation */ /* Form validation */
@ -131,7 +157,7 @@ $( document ).ready(function() {
} else { } else {
return false; return false;
} }
} };
// $form.find('[type=submit]').prop('disabled', true); // $form.find('[type=submit]').prop('disabled', true);
// var readyInterval = setInterval(function() { // var readyInterval = setInterval(function() {

View file

@ -184,8 +184,9 @@
<!-- Init JavaScript --> <!-- Init JavaScript -->
<script src="{% static 'hosting/js/initial.js' %}"></script> <script src="{% static 'hosting/js/initial.js' %}"></script>
<script src="https://js.stripe.com/v3/"></script>
<script src="https://js.stripe.com/v2/"></script>
<!-- Stripe Lib --> <!-- Stripe Lib -->
<script type="text/javascript" src="//js.stripe.com/v2/"></script>
<!-- Proccess payment lib --> <!-- Proccess payment lib -->
<script type="text/javascript" src="{% static 'hosting/js/payment.js' %}"></script> <script type="text/javascript" src="{% static 'hosting/js/payment.js' %}"></script>

View file

@ -64,7 +64,16 @@
<form role="form" id="payment-form" novalidate> <form role="form" id="payment-form" novalidate>
<div class="row"> <div class="row">
<div class="form-group">
<div id="card-element">
<!-- a Stripe Element will be inserted here. -->
</div>
</div>
</div>
<div id="card-errors" role="alert"></div>
<!-- <div class="row">
<div class="col-xs-9 col-md-12"> <div class="col-xs-9 col-md-12">
<div class="form-group"> <div class="form-group">
<label class="control-label" for="cardNumber">{%trans "CARD NUMBER"%}</label> <label class="control-label" for="cardNumber">{%trans "CARD NUMBER"%}</label>
@ -96,11 +105,10 @@
<input type="password" class="form-control" name="cvCode" placeholder="CV" required data-stripe="cvc" /> <input type="password" class="form-control" name="cvCode" placeholder="CV" required data-stripe="cvc" />
</div> </div>
</div> </div>
</div> </div> -->
<div class="row"> <div class="row">
<div class="col-xs-12"> <div class="col-xs-6 float-right">
<button class="btn btn-success btn-lg <button class="btn btn-success btn-sm btn-block" type="submit">Submit Payment</button>
btn-block" type="submit">{%trans "Submit Payment"%}</button>
</div> </div>
</div> </div>
<div class="row" style="display:none;"> <div class="row" style="display:none;">
@ -121,6 +129,7 @@
</form> </form>
{% endif %} {% endif %}
</div> </div>
</div> </div>
</div> </div>
@ -131,8 +140,14 @@
<!-- stripe key data --> <!-- stripe key data -->
{% if stripe_key %} {% if stripe_key %}
{% get_current_language as LANGUAGE_CODE %}
<script type="text/javascript"> <script type="text/javascript">
(function () {window.stripeKey = "{{stripe_key}}";})();
(function () {
window.stripeKey = "{{stripe_key}}";
window.current_lan = "{{LANGUAGE_CODE}}";
})();
</script> </script>
{%endif%} {%endif%}

View file

@ -10,6 +10,7 @@ def handleStripeError(f):
'response_object': None, 'response_object': None,
'error': None 'error': None
} }
common_message = "Currently its not possible to make payments." common_message = "Currently its not possible to make payments."
try: try:
response_object = f(*args, **kwargs) response_object = f(*args, **kwargs)