javascript - 尝试在客户端集成中显示贝宝按钮时出错

问题描述

我正在尝试将 paypal 集成到电子商务网站上，使客户端集成如下所述： https ://developer.paypal.com/docs/checkout/integrate/#2-add-the-paypal-javascript-sdk-to-你的网页

第一步包括在页面上添加贝宝按钮：

我创建了一个名为 payPalTest.html 的测试烧瓶 html 模板，它扩展了名为 base.html 的基本模板，并创建了一个专用路由 /payPalTest
在 base.html 我添加了： <script src="https://www.paypal.com/sdk/js?client-id=sb"></script>
在 payPalTest.html 我添加了：

{% extends 'base.html' %}
    {% block payPalTest %}
    <div id="paypal-button-container"></div>
    <script>
    paypal.Buttons().render('#paypal-button-container');
    // This function displays Smart Payment Buttons on your web page.
    </script>
    {% endblock %}

这是 /payPalTest 在您到达该网址时的全部内容：

<html><head>
    <meta charset="utf-8">
    <title>imemoi: exclusive luxury bags</title>
    <!--Import Google Icon Font -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import Font awesome icons -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!--Import Google Font-->
    <link href="https://fonts.googleapis.com/css2?family=Arimo&amp;family=Playfair+Display+Lato&amp;display=swap" rel="stylesheet">
    <!--Import main.css and materialize.css-->
    <link type="text/css" rel="stylesheet" href="/static/css/materialize.min.css" media="screen,projection">
    <link type="text/css" rel="stylesheet" href="/static/css/main.css">
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="chrome-extension://mooikfkahbdckldjjndioackbalphokd/assets/prompt.js"></script></head>

<body>

    <!-- header-menu -->
    <div class="row no-margin-bottom">
        <div class="header-menu valign-wrapper center-align">
            <div class="col s12 m12 l3">
                <!--main logo-->
                <a href="/">
                    <img src="/static/images/logo_black.png" width="250" height="133">
                </a>
            </div>
            <div id="bags" class="col s12 m4 l3 clickable">BAGS</div>
            <div id="accessories" class="col s12 m4 l3 clickable">ACCESSORIES</div>
            <div id="living" class="col s12 m4 l3 clickable">LIVING</div>
        </div>
    </div>

<div id="paypal-button-container"></div>

<script>
  paypal.Buttons().render('#paypal-button-container');
  // This function displays Smart Payment Buttons on your web page.
</script>

    <!-- footer -->
    <div class="row">
        <div class="footer valign-wrapper center-align">
            <div id="imemoi" class="col offset-s2 s8 offset-s2 m2 l2 clickable">IMEMOI</div>
            <div id="press" class="col offset-s2 s8 offset-s2 m2 l2 clickable">PRESS</div>
            <div class="col offset-s2 s8 offset-s2 m4 l4 social-icons">
                <ul>
                    <li id="fb-icon"><i class="clickable fa fa-facebook"></i></li>
                    <li id="is-icon"><i class="clickable fa fa-instagram"></i></li>
                    <li id="pi-icon"><i class="clickable fa fa-pinterest"></i></li>
                </ul>
            </div>
            <div id="making-of" class="col offset-s2 s8 offset-s2 m4 l2 clickable">MAKING OF &amp; ENGAGEMENT</div>
            <div id="legal" class="col offset-s2 s8 offset-s2 offset-m2 m8 offset-m2 l2 clickable">LEGAL</div>
            <div id="contact-us" class="col offset-s2 s8 offset-s2 offset-m2 m8 offset-m2 offset-l2 l8 offset-l2 clickable contacts">CONTACT US</div>
            <div id="subscribe" class="col offset-s2 s8 offset-s2 offset-m2 m8 offset-m2 offset-l2 l8 offset-l2 clickable contacts">SUBCRIBE AND GET THE 15% OFF !!</div>
        </div>
    </div>
    <!--jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!--JavaScript at end of body for optimized loading-->
    <script type="text/javascript" src="/static/js/main.js"></script>
    <script type="text/javascript" src="/static/js/materialize.min.js"></script>
    <script src="https://www.paypal.com/sdk/js?client-id=AVooZr5SuB_fro4zOf7rII7A2Q2MYeCKr_vj532fbft449Mj5RTuGm_f7-6hT81ZbRhaoBx4ulX_TIVe"></script>


</body></html>

当我运行应用程序并到达路由http://127.0.0.1:5000/payPalTest时，payPal 按钮未显示，在控制台上我得到：

未捕获的 ReferenceError：paypal 未在 payPalTest:49 处定义

注意：网站是使用 Python Flask 制作的。

标签： javascriptflaskpaypal

javascript - 尝试在客户端集成中显示贝宝按钮时出错

问题描述

解决方案

推荐阅读