Блог

Главная - Вопросы по программированию - Ошибка при попытке показать кнопку paypal при интеграции на стороне клиента

Ошибка при попытке показать кнопку paypal при интеграции на стороне клиента

#javascript #flask #paypal

#javascript #flask #paypal

Вопрос:

Я пытаюсь интегрировать paypal на веб-сайте электронной коммерции, выполняя интеграцию на стороне клиента, описанную в: https://developer.paypal.com/docs/checkout/integrate/#2-add-the-paypal-javascript-sdk-to-your-web-page

Один из первых шагов заключается в добавлении кнопки paypal на страницу:

  1. Я создал тестовый html-шаблон flask под названием payPalTest.html это расширяет базовый шаблон, называемый base.html и я создал выделенный маршрут / payPalTest

  2. в base.html Я добавил: <script src="https://www.paypal.com/sdk/js?client-id=sb"></script>

  3. в 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 при достижении URL-адреса:

 <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=Arimoamp;amp;family=Playfair Display Latoamp;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;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 не отображается, и на консоли я получаю:

Ошибка неперехваченной ссылки: paypal не определен в payPalTest:49

Примечание: веб-сайт создан с использованием Python Flask.

Комментарии:

1. Опубликуйте HTML-содержимое / payPalTest в том виде, в котором оно было передано / сохранено в вашем веб-браузере

2. Я добавил содержимое HTML, отображаемое в браузере при достижении / payPalTest

Ответ №1:

Скрипт PayPal JS

 <script src="https://www.paypal.com/sdk/js?client-id=..."></script>

Загружается после того, как вы пытаетесь отобразить кнопки, поэтому paypal объект не существует, когда кнопка пытается отобразить.

Вы должны убедиться, что скрипт загружается, прежде чем пытаться отобразить кнопки, т. Е. Он должен появиться первым на странице. Один из способов сделать это — загрузить ресурс из <head>