Level 51
Anyone know how I could achieve this?
Dec 15, 2015
5
Level 51
JS to show order is processing
I have the following JS file to process the Stripe payment:
$(document).ready(function () {
Stripe.setPublishableKey("xxxxxxxxxxxxxxxxxxxxxxxxxx");
var stripeResponseHandler = function(status, response) {
var $form = $('#billing-form');
if (response.error) {
// Show the errors on the form
//$('.payment-errors').text(response.error.message).addClass('alert alert-danger');
$form.find('.payment-errors').text(response.error.message).addClass('alert alert-danger');
if (response.error.message) {
$form.find('#button').val('Order for Delivery').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="stripe-token" />').val(token));
// and re-submit
$form.get(0).submit();
}
};
jQuery(function($) {
$('#billing-form').submit(function(e) {
var $form = $(this);
// Disable the submit button to prevent repeated clicks
$form.find('#button').val('Please Wait...').prop('disabled', true);
Stripe.card.createToken($form, stripeResponseHandler);
// Prevent the form from submitting with the default action
return false;
});
});
});
How can I show a alert popup box to say something while the process is taking place, then redirect to the success page or not depending on the info received from Stripe.
Level 51
Anyone care to share ideas on how to achieve this?
Level 104
AFAIK it is possible to close the default javascript alert box. However,if you are using a Bootstrap modal, SweetAlert or something you've created yourself, then you can close it after the Stripe response has been received - how you close it might depend on the UI framework library you are using.
If (for example) you were using Bootstrap, you could open a modal when the submit button is first clicked and it will remain open throughout the Stripe AJAX call and form submitting to your server:
jQuery(function($) {
$('#billing-form').submit(function(e) {
$('#myModal').modal({
show: true
});
var $form = $(this);
// Disable the submit button to prevent repeated clicks
$form.find('#button').val('Please Wait...').prop('disabled', true);
Stripe.card.createToken($form, stripeResponseHandler);
// Prevent the form from submitting with the default action
return false;
});
});
You could choose to close it in the response handler if an error was returned.
$('#myModal').modal({
show: false
});
1 like
Level 8
Check out Laravel Spark and see how Taylor accomplishes this. I think he sets a trigger when the button pay button is pressed preventing the button from being pressed again and also changing the icon on the button to a spinning graphic. When Stripe send a 422 status code his Js picks this up and resets the trigger defaulting the submit button back to normal.
1 like
Level 51
Tried looking for it in Spark and can't find it, plus I think he's using VueJS for most of that.
So adding
$('#myModal').modal({
show: true
});
Works just fine.
Please or to participate in this conversation.