Stripe checkout with gwt not working - gwt

Question

I'm trying to integrate Strip checkout flow in my gwt application. As per the documentation on
https://stripe.com/docs/checkout#integration-custom
we make the configure call and then add a payment completion event handler. But for some reason, the javascript is unable to find the callback function (token)
Uncaught TypeError: undefined is not a function
checkout.js:2 TokenCallback.trigger
checkout.js:2 __bindcheckout.js:2 (anonymous function)
checkout.js:2 IframeView.closed
checkout.js:2 __bindcheckout.js:1 RPC.processMessage
checkout.js:1 __bindcheckout.js:1 RPC.message
checkout.js:1 (anonymous function)
The hooks for opened/closed are getting called though
public class StripePaymentHandler {
public static void initialize(final String apiKey) {
if (!isInjected()) {
ScriptInjector.fromUrl("https://checkout.stripe.com/checkout.js").setWindow(ScriptInjector.TOP_WINDOW)
.setCallback(new Callback() {
#Override
public void onFailure(Exception e) {
Window.alert("Failed to load stripe");
}
#Override
public void onSuccess(Void aVoid) {
doInitialize(apiKey);
}
}).inject();
}
}
public static native void doInitialize(String apiKey) /*-{
console.log('initializing Stripe: '+apiKey);
$wnd.callback = function(token) {
console.log(token);
alert(token);
}
$wnd.handler = $wnd.StripeCheckout.configure({
key: 'key',
image: '/images/logo.png',
token: $wnd.callback
});
}-*/;
public static void completePayment(StripeCheckoutToken token) {
Window.alert(token.getId());
}
public static native void handlePaymentButtonClicked(String description, double price) /*-{
$wnd.handler.open({
name: 'Ziplly',
description: description,
amount: price,
key: 'key',
token: function(token) {
console.log(token);
alert(token);
},
opened: function() {
alert('opened');
}
});
}-*/;
public static native boolean isInjected() /*-{
return typeof $wnd.Stripe !== "undefined";
}-*/;
}
I was able to verify that $wnd.handler does exist after the configure method call. I also tried putting the callback in handler.open method but no luck. Any help on this will be appreciated.
EDIT 2
Here's button handler code that calls handler.open(). This works just fine but the callback from configure method (token) never gets called instead I get the error I described above. Does that make sense?
#Override
public void onSuccess(CheckBuyerEligibilityForCouponResult result) {
PaymentProviderName providerName = result.getPaymentSetupResponse().getProviderName();
switch (providerName) {
case GOOGLE:
handleGooglePayment(result.getPaymentSetupResponse());
break;
case STRIPE:
StripePaymentHandler.handlePaymentButtonClicked("Coupon purchase", 20);
}

Answer 1

I had to add the ID of the button to the StripeCheckout.configure() method to solve this problem. Here's how it would look for you:
$wnd.handler = $wnd.StripeCheckout.configure(
$wnd.myButton.id,
{
key: 'key',
image: '/images/logo.png',
token: $wnd.callback
});