Question

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

因此，在我的网站上，我具有以下功能，如果还有待处理的订单，或者创建新订单并获得新的orderID时调用该功能，则会初始化PayPal按钮。

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

Answer 1

应该不需要多次初始化按钮。

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

然后在createOrder内，确保paymentID和orderID引用非本地变量，或者被替换为函数调用，这些函数调用将在您希望它们返回时返回正确的值，例如某种类型的getOrderID（）和$("#paypal-button-container").data("payment-id")来代替现有的本地变量

如果确实确实需要多次渲染按钮，则可以在调用.render（）---之后保存对myButtons = paypal.Buttons({..})的引用，然后再调用myButtons.close（）保存对新引用并呈现新按钮对象。但同样，这里没有理由这样做。

如何重新渲染具有不同值的PayPal智能按钮？

1 个答案: