Saturday, 21 September 2019

Decoding/Debugging stripe.js: The value of the property 'Stripe' is null or undefined, not a Function object

I'm following the stripe server integration guide here. My server creates a stripe session, and returns:

<HTML lang=en><HEAD><TITLE>Payments</TITLE></HEAD>
<BODY>
<H1>Loading.....</H1>
loading stripe
<SCRIPT src="https://js.stripe.com/v3/"></SCRIPT>
done loading stripe
<SCRIPT type=text/javascript>
try {
    document.writeln('creating Stripe object');
    // error occurs here, Stripe is undefined
    var stripe = Stripe('<PUBLIC KEY GOES HERE>');
    document.writeln('redirecting to checkout');
    stripe.redirectToCheckout({
        sessionId: '<SESSION ID GOES HERE>'
    }).then(function (result) {
    });
    document.writeln('done calling javascript');
}
catch(error) {
    document.writeln('error occurred: ' + error.message);
}
</SCRIPT>
<H1>....DONE</H1></BODY></HTML>    

NOTE: the public key and session id have been redacted

This works fine when loaded by firefox/ie explorer, but when using wxWidgets Webview which uses ie explorer as it's backend it throws

The value of the property 'Stripe' is null or undefined, not a Function object

wxpython webview code:

import wx, traceback
from wx.html2 import WebView, EVT_WEBVIEW_ERROR, EVT_WEBVIEW_LOADED, EVT_WEBVIEW_NAVIGATING, EVT_WEBVIEW_NEWWINDOW, \
    WEBVIEWIE_EMU_IE11

html = """<HTML lang=en><HEAD><TITLE>Payments</TITLE></HEAD>
<BODY>
<H1>Loading.....</H1>
loading stripe
<SCRIPT src="https://js.stripe.com/v3/"></SCRIPT>
done loading stripe
<SCRIPT type=text/javascript>
try {
    document.writeln('creating Stripe object');
    // error occurs here, Stripe is undefined
    var stripe = Stripe('<PUBLIC KEY GOES HERE>');
    document.writeln('redirecting to checkout');
    stripe.redirectToCheckout({
        sessionId: '<SESSION ID GOES HERE>'
    }).then(function (result) {
    });
    document.writeln('done calling javascript');
}
catch(error) {
    document.writeln('error occurred: ' + error.message);
}
</SCRIPT>
<H1>....DONE</H1></BODY></HTML>  """


class Main(wx.Frame):
    def __init__(self):
        super().__init__(parent=None, size=(1000, 800))
        self._times_loaded = 0
        self.webview = WebView.New(self)  # type: WebView
        self.webview.Bind(EVT_WEBVIEW_ERROR, self.on_error)
        self.webview.Bind(EVT_WEBVIEW_LOADED, self.on_loaded)
        self.webview.Bind(EVT_WEBVIEW_NAVIGATING, self.on_navigate)
        self.webview.Bind(EVT_WEBVIEW_NEWWINDOW, self.on_new_window)
        # wx.CallAfter(self.load_gateway)
        wx.CallAfter(self.load_html)

        self.Show()

    # def load_gateway(self, evt=None):
    #     self.webview.LoadURL(url)

    def load_html(self):
        self.webview.SetPage(html, "www.stripe.com")

    def reset_page(self):
        self.webview.SetPage(self.webview.GetPageSource(), url)

    # def redirect_to_checkout(self):
    #     # stripe.
    #     session= stripe.checkout.session.Session.create(test_stripe_public_key)

    def on_error(self, evt):
        print(f"error occurred: {evt}")

    def on_navigate(self, evt):
        print("on navigate")

    def on_loaded(self, evt):
        print("loaded")
        self._times_loaded += 1

    def on_new_window(self, evt):
        print("new window event")


try:
    app = wx.App()
    frame = Main()
    app.MainLoop()
except:
    input(traceback.format_exc())

For some reason the first script at https://js.stripe.com/v3/ doesn't create the Stripe object when called with the ie explorer emulator. I assumed it was an issue with an unsupported user-agent so I replaced all user-Agent references in the stripe script with

Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko

which didn't work. I tried to read through https://js.stripe.com/v3/ to see why Stripe would be undefined. My javascript skills are pretty weak and it is clearly minified/obfuscated so I'm having a difficult time understanding how and why Stripe would be undefined. It looks like it's declared dynamically, but what about the emulated browser is causing it to be undefined?



from Decoding/Debugging stripe.js: The value of the property 'Stripe' is null or undefined, not a Function object

No comments:

Post a Comment