时间戳

首页 > 解决方案 > 解码/调试 stripe.js：属性“Stripe”的值为 null 或未定义，而不是 Function 对象

javascript - 解码/调试 stripe.js：属性“Stripe”的值为 null 或未定义，而不是 Function 对象

问题描述

我在这里关注条带服务器集成指南。我的服务器创建一个条带会话，并返回：

<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>

注意：公钥和会话 ID 已被编辑

这在由 firefox/ie explorer 加载时工作正常，但是当使用wxWidgets Webview时，它使用 ie explorer 作为后端，它会抛出

属性“Stripe”的值为 null 或未定义，不是 Function 对象

wxpython webview 代码：

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())

由于某种原因，https://js.stripe.com/v3/Stripe上的第一个脚本在使用 ie explorer 模拟器调用时不会创建对象。我认为这是不受支持的用户代理的问题，因此我将条带脚本中的所有用户代理引用替换为

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

这没有用。我试图通读https://js.stripe.com/v3/以了解为什么 Stripe 未定义。我的 javascript 技能非常薄弱，而且它显然被缩小/混淆了，所以我很难理解如何以及为什么Stripe会被未定义。看起来它是动态声明的，但是模拟浏览器导致它未定义呢？

--------------更新 9-23-19----------------

在@duck 建议在加载条带脚本之前运行我的脚本可能存在问题后，我更改了 html 以排序重定向功能以在加载条带后运行：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Payments</title>
</head>
<body>

    <script type="text/javascript">
    function redirectToCheckout(evt){
        try {
            document.writeln('loading stripe.js')
            var stripe = Stripe('REDACTED');
            document.writeln('redirecting to checkout');
            stripe.redirectToCheckout({
                sessionId: 'REDACTED'
            }).then(function (result) {
            });
            document.writeln('done calling javascript');
        }
        catch(error) {
            document.writeln('error occurred: ' + error.message);
        }
    }
    //source: https://stackoverflow.com/questions/950087/how-do-i-include-a-javascript-file-in-another-javascript-file
    function loadScript(url, callback)
        {
            // Adding the script tag to the head as suggested before
            //document.writeln('loading stripe script');
            console.log('loading stripe script');
            var head = document.head;
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = url;

            // Then bind the event to the callback function.
            // There are several events for cross browser compatibility.
            script.onreadystatechange = callback;
            script.onload = callback;

            // Fire the loading
            head.appendChild(script);
        }

    function loadStripe(evt){
        loadScript('https://js.stripe.com/v3/', redirectToCheckout);
        }

    var onloadScript = loadStripe; 

    if(window.attachEvent) {
        window.attachEvent('onload', onloadScript);
    } else {
        if(window.onload) {
            var curronload = window.onload;
            var newonload = function(evt) {
                curronload(evt);
                onloadScript(evt);
            };
            window.onload = newonload;
        } else {
            window.onload = onloadScript;
        }
    }

    </script>

Page loaded
</body>
</html>

标签： javascriptwxpythonstripe-paymentswxwidgets

解决方案

推荐阅读