Stripe checkout with gwt not working

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);
        }

At a glance on the stripe docs, there should be a call to $wnd.handler.open (with args, etc), but it doesn't appear in your code. Additionally, can you share the log? And what is suppposed to call completePayment in your java code - nothing seems to reference it? — Colin Alworth
Thanks for the response. handlePaymentButtonClicked is registered as as the payment button click listener. When I click on the pay button, its getting called and the stripe form pops up. I fill in the details (email/cc/exp date) and then hit ok. And I get a successful token back, but the callback corresponding to token in handler.open or StripeCheckout.configure doesn't get called. "completePayment" isn't wired up yet, the idea is to call "completePayment" from within the callback. — user1010373
But the callback doesn't do that, and its very hard to say why without complete code. Instead of what you described, your callback is calling alert, and there is no call to handler.open anywhere in your code, so this shouldn't work at all. Its hard to help if you don't show what you have, and just showing the part you think we need to help would only work if you already knew what was wrong ;). — Colin Alworth
Still running into the same issue. Any ideas on how to go about debugging this. — user1010373

Bob Bob · Accepted Answer · 2015-03-22T00:53:17

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
    });

Stripe checkout with gwt not working

1 Answers