Javascript 如何重新呈现具有不同值的PayPal智能按钮？

我在我的网站上使用PayPal智能按钮，每次付款后，用户可以使用PayPal智能按钮进行另一次付款。问题是，一旦我创建了我的PayPal按钮，我就无法使用new orderID在其中设置新的createOrder

function initPayPal(orderID, publicKey) {
    var paymentID = $("#paypal-button-container").data("payment-id")
    var PAYPAL_SCRIPT =
        "https://www.paypal.com/sdk/js?client-id=" + publicKey + "&currency=EUR&intent=capture&commit=false&vault=true";
    var script = document.createElement("script");
    script.setAttribute("src", PAYPAL_SCRIPT);
    script.onload = function () {
        paypal
            .Buttons({
                style: {
                    shape: "rect",
                    color: "gold",
                    layout: "horizontal",
                    label: "paypal",
                    tagline: false,
                    height: 52,
                },
                createOrder: async function () {
                    $(".body-payments").hide();
                    $(".loader-payments").show();
                    const res = await fetch(
                        "/api/payment/paypal/" + paymentID + "/" + orderID,
                        {
                            method: "post",
                            headers: {
                                "content-type": "application/json",
                            },
                            credentials: "include",
                        }
                    );
                    const data = await res.json();
                    return data.id;
                },
                onApprove: async function (data) {
                    const res = await fetch(
                        "/api/payment/paypal/capture/" + paymentID + "/" + data.orderID,
                        {
                            method: "post",
                            headers: {
                                "content-type": "application/json",
                            },
                            credentials: "include",
                        }
                    );
                    if (localStorage.STBOrder) {
                        localStorage.removeItem("STBOrder");
                    }

                    $("#modalPayments").modal("hide");
                    $("#modalSuccess").modal("show");
                    $(".body-payments").show();
                    $(".loader-payments").hide();

                },
                onCancel: function (data) {
                    $(".body-payments").show();
                    $(".loader-payments").hide();
                },
            })
            .render("#paypal-button-container");
    };
    document.head.appendChild(script);
}

因此，在我的网站中，我有以下功能，如果还有一个待处理的订单，我会初始化PayPal按钮，或者在下新订单时调用它，我会得到一个新的orderID

function initPayPal(orderID, publicKey) {
    var paymentID = $("#paypal-button-container").data("payment-id")
    var PAYPAL_SCRIPT =
        "https://www.paypal.com/sdk/js?client-id=" + publicKey + "&currency=EUR&intent=capture&commit=false&vault=true";
    var script = document.createElement("script");
    script.setAttribute("src", PAYPAL_SCRIPT);
    script.onload = function () {
        paypal
            .Buttons({
                style: {
                    shape: "rect",
                    color: "gold",
                    layout: "horizontal",
                    label: "paypal",
                    tagline: false,
                    height: 52,
                },
                createOrder: async function () {
                    $(".body-payments").hide();
                    $(".loader-payments").show();
                    const res = await fetch(
                        "/api/payment/paypal/" + paymentID + "/" + orderID,
                        {
                            method: "post",
                            headers: {
                                "content-type": "application/json",
                            },
                            credentials: "include",
                        }
                    );
                    const data = await res.json();
                    return data.id;
                },
                onApprove: async function (data) {
                    const res = await fetch(
                        "/api/payment/paypal/capture/" + paymentID + "/" + data.orderID,
                        {
                            method: "post",
                            headers: {
                                "content-type": "application/json",
                            },
                            credentials: "include",
                        }
                    );
                    if (localStorage.STBOrder) {
                        localStorage.removeItem("STBOrder");
                    }

                    $("#modalPayments").modal("hide");
                    $("#modalSuccess").modal("show");
                    $(".body-payments").show();
                    $(".loader-payments").hide();

                },
                onCancel: function (data) {
                    $(".body-payments").show();
                    $(".loader-payments").hide();
                },
            })
            .render("#paypal-button-container");
    };
    document.head.appendChild(script);
}

---

客户端id是动态设置的，因为每个用户在自己的页面上都将通过自己的帐户获得付款。这里的问题是，按钮在第一次启动时一切正常，但如果我取消订单并再次调用此函数，它将创建另一个按钮，而不是将新值设置为现有（已渲染）按钮。

无需多次初始化按钮

初始化按钮一次（页面加载时）

然后，在createOrder内部，确保paymentID和orderID引用非局部变量，或者替换为函数调用，这些函数调用将在您希望它们返回正确值时返回正确值，例如，您的某种getOrderID（）和

$（“#paypal按钮容器”）。数据（“payment id”）

，以代替现有的局部变量

---

---

在不太可能的情况下，您确实需要多次呈现按钮，您可以在调用.render（）之前保存对

myButtons=paypal.buttons（{..}）

的引用，然后在保存对新按钮对象的引用并呈现新按钮对象之前保存对myButtons.close（）的引用。但是，这里应该没有理由这么做。

嗨，普雷斯顿，实际上我已经通过在paypal容器上执行

empty（）

解决了这个问题，所以当我重新创建

paypal.Button时，它不会被创建多次，这可能是一种方法吗？或者我应该像你提到的那样使用CUnition来获取orderID吗？你应该使用函数（或全局函数）并且只初始化按钮一次。没有必要也不建议重新创建按钮，但如果确实需要这样做，则干净的方法是保存一个引用，
.close（）
以一个作为orderID传递的函数结束