Is there any way inside the Stripe Checkout close callback to determine how it got triggered?
So for example, I have the following code that gets triggered when someone clicks a checkout button:
// fade in our loading screen
$("#loading-screen").stop(true,true).fadeIn(200);
var handler = StripeCheckout.configure({
key: STRIPE_PUBLISHABLE_KEY,
image: STRIPE_ICON,
closed: function () {
// if user clicks close button, also hide the loading screen
$("#loading-screen").stop(true,true).fadeOut(200);
},
token: function(token) {
// post payment info back to the server via ajax
var data = {
action : 'checkout',
paymentToken: token.id
};
$.post(
ajaxurl,
data,
function (response) {
// after response from server, fade out loading screen and update page or trigger error
$("#loading-screen").stop(true,true).fadeOut(200);
if (response.success) {
$("#checkout-form").html(response.output);
} else {
alert("unknown error. try again later.");
}
},
"json"
);
}
The idea here is when I click the close button on the payment window, or once I get some sort of response from my server, the loading screen goes away.
However, it appears that the closed callback is getting triggered not only when someone hits the close button, but also after a payment successfully completes on Stripe's end, but before my ajax call completes.
As a result, the loading screen gets removed prior to the operation's completion, which is confusing users. Obviously things can be done to optimize the slow commands server-side, but I want to try to fix this on the client-side as well.
So basically, I need to find a way to distinguish between closing via the cancel button, and closing via a successful payment and unfortunately the Stripe Checkout Documentation doesn't provide a whole lot of details on that process.
Any suggestions?
Update:
I think I may have found a way to do it, but it's contingent on the token callback always happening before the closed callback.
Basically I just set a flag that indicates whether the token callback was triggered.
var token_triggered = false;
// fade in our loading screen
$("#loading-screen").stop(true,true).fadeIn(200);
var handler = StripeCheckout.configure({
key: STRIPE_PUBLISHABLE_KEY,
image: STRIPE_ICON,
closed: function () {
// if user clicks close button, also hide the loading screen
if (!token_triggered) {
$("#loading-screen").stop(true,true).fadeOut(200);
}
},
token: function(token) {
token_triggered = true;
// post payment info back to the server via ajax
var data = {
action : 'checkout',
paymentToken: token.id
};
$.post(
ajaxurl,
data,
function (response) {
// after response from server, fade out loading screen and update page or trigger error
$("#loading-screen").stop(true,true).fadeOut(200);
if (response.success) {
$("#checkout-form").html(response.output);
} else {
alert("unknown error. try again later.");
}
},
"json"
);
}
In the few tests I've done, it has seemed to work okay, but does anybody know if there are any guarantees that token will always trigger before closed?
Update #2:
Upon asking in the #stripe channel on freenode, I was told as of April 6, it appears Stripe has ensured that token always will fire prior to closed.
So I believe this solves my problem and allows me to distinguish between the two events.
Is there any way inside the Stripe Checkout close callback to determine how it got triggered?
So for example, I have the following code that gets triggered when someone clicks a checkout button:
// fade in our loading screen
$("#loading-screen").stop(true,true).fadeIn(200);
var handler = StripeCheckout.configure({
key: STRIPE_PUBLISHABLE_KEY,
image: STRIPE_ICON,
closed: function () {
// if user clicks close button, also hide the loading screen
$("#loading-screen").stop(true,true).fadeOut(200);
},
token: function(token) {
// post payment info back to the server via ajax
var data = {
action : 'checkout',
paymentToken: token.id
};
$.post(
ajaxurl,
data,
function (response) {
// after response from server, fade out loading screen and update page or trigger error
$("#loading-screen").stop(true,true).fadeOut(200);
if (response.success) {
$("#checkout-form").html(response.output);
} else {
alert("unknown error. try again later.");
}
},
"json"
);
}
The idea here is when I click the close button on the payment window, or once I get some sort of response from my server, the loading screen goes away.
However, it appears that the closed callback is getting triggered not only when someone hits the close button, but also after a payment successfully completes on Stripe's end, but before my ajax call completes.
As a result, the loading screen gets removed prior to the operation's completion, which is confusing users. Obviously things can be done to optimize the slow commands server-side, but I want to try to fix this on the client-side as well.
So basically, I need to find a way to distinguish between closing via the cancel button, and closing via a successful payment and unfortunately the Stripe Checkout Documentation doesn't provide a whole lot of details on that process.
Any suggestions?
Update:
I think I may have found a way to do it, but it's contingent on the token callback always happening before the closed callback.
Basically I just set a flag that indicates whether the token callback was triggered.
var token_triggered = false;
// fade in our loading screen
$("#loading-screen").stop(true,true).fadeIn(200);
var handler = StripeCheckout.configure({
key: STRIPE_PUBLISHABLE_KEY,
image: STRIPE_ICON,
closed: function () {
// if user clicks close button, also hide the loading screen
if (!token_triggered) {
$("#loading-screen").stop(true,true).fadeOut(200);
}
},
token: function(token) {
token_triggered = true;
// post payment info back to the server via ajax
var data = {
action : 'checkout',
paymentToken: token.id
};
$.post(
ajaxurl,
data,
function (response) {
// after response from server, fade out loading screen and update page or trigger error
$("#loading-screen").stop(true,true).fadeOut(200);
if (response.success) {
$("#checkout-form").html(response.output);
} else {
alert("unknown error. try again later.");
}
},
"json"
);
}
In the few tests I've done, it has seemed to work okay, but does anybody know if there are any guarantees that token will always trigger before closed?
Update #2:
Upon asking in the #stripe channel on freenode, I was told as of April 6, it appears Stripe has ensured that token always will fire prior to closed.
So I believe this solves my problem and allows me to distinguish between the two events.
Share Improve this question edited Jun 16, 2015 at 17:11 David Stinemetze asked Jun 16, 2015 at 16:46 David StinemetzeDavid Stinemetze 9,3203 gold badges23 silver badges34 bronze badges1 Answer
Reset to default 25As I indicated in my updates above, as of April 6, 2015 the token callback should always fire prior to the closed callback. This means we can set a flag to indicate whether or not the token callback was ever triggered, allowing us to distinguish between the events.
var token_triggered = false;
var handler = StripeCheckout.configure({
...
closed: function() {
if (!token_triggered) {
// close button click behavior goes here
} else {
// payment completion behavior goes here
}
},
token: function(token) {
token_triggered = true;
}
...
});