时间戳

首页 > 解决方案 > 需要帮助将 Stripe 内联 Javascript 移动到项目的 .js 文件

javascript - 需要帮助将 Stripe 内联 Javascript 移动到项目的 .js 文件

问题描述

我只是在将我所有的 javascript 移到我项目中它自己的文件的过程中。我已经移动了所有脚本，但由于某种原因，Stripe 出现了问题。当我在拥有其他所有内容时移动该功能时，结帐不会像往常一样加载。

这是我的代码，因为它是内联的 buy.html -

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<button class="w3-button w3-center w3-blue w3-padding-large" type="button" id="checkout-button">
{% csrf_token %}Buy Now
</button>

..........

<script type="text/javascript">
    const csrftoken = document.querySelector('[name=csrfmiddlewaretoken').value;
    // Create an instance of the Stripe object with your publishable API key
    var stripe = Stripe("{{ STRIPE_PUBLIC_KEY }}");
    var checkoutButton = document.getElementById("checkout-button");

    checkoutButton.addEventListener("click", function () {
        fetch("{% url 'create-checkout-session' product.id %}", {
            method: "POST",
            headers: {
                'X-CSRFToken': csrftoken
            }
        })
            .then(function (response) {
                return response.json();
            })
            .then(function (session) {
                return stripe.redirectToCheckout({ sessionId: session.id });
            })
            .then(function (result) {
                // If redirectToCheckout fails due to a browser or network
                // error, you should display the localized error message to your
                // customer using error.message.
                if (result.error) {
                    alert(result.error.message);
                }
            })
            .catch(function (error) {
                console.error("Error:", error);
            });
    });
</script>

我试图像这样拆分它，但它不起作用 -

购买.html

<body onload="payment()">
<script src = "{% static 'vendors/js/base.js' %}"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<button class="w3-button w3-center w3-blue w3-padding-large" type="button" id="checkout-button">
{% csrf_token %}Buy Now
</button>

脚本.js -

function payment() {
    const csrftoken = document.querySelector('[name=csrfmiddlewaretoken').value;

    var stripe = Stripe("{{ STRIPE_PUBLIC_KEY }}");
    var checkoutButton = document.getElementById("checkout-button");

    checkoutButton.addEventListener("click", function () {
        fetch("{% url 'create-checkout-session' product.id %}", {
            method: "POST",
            headers: {
                'X-CSRFToken': csrftoken
            }
        })
            .then(function (response) {
                return response.json();
            })
            .then(function (session) {
                return stripe.redirectToCheckout({ sessionId: session.id });
            })
            .then(function (result) {
                if (result.error) {
                    alert(result.error.message);
                }
            })
            .catch(function (error) {
                console.error("Error:", error);
            });
    };

有人可以告诉我哪里出错了吗？

标签： javascripthtmljquerystripe-payments

解决方案

推荐阅读