使用fundingSource隐藏PayPal按钮后跳转URL异常的解决求助

原本代码运行正常，尝试通过fundingSource隐藏PayPal按钮后，点击Bancontact或Ideal按钮时会跳转到错误的URL：https://www.paypal.com/checkoutnow?，实际需要跳转的是以latinumcheckout开头的URL，求解决办法。

按钮初始化代码 #

var FUNDING_SOURCES = [paypal.FUNDING.BANCONTACT, paypal.FUNDING.IDEAL];

FUNDING_SOURCES.forEach(function (fundingSource) {
  var button = paypal
    .Buttons({
      createOrder: function (data, actions) {
        return actions.order.create({
          shipping_type: "PICKUP",
          application_context: { shipping_preference: "NO_SHIPPING" },
          purchase_units: [
            {
              amount: {
                value: "88.44",
              },
            },
          ],
        });
      },
      onApprove: function (data, actions) {
        return actions.order.capture().then(function (orderData) {
          console.log(
            "Capture result",
            orderData,
            JSON.stringify(orderData, null, 2)
          );
          var transaction = orderData.purchase_units[0].payments.captures[0];
          alert(
            "Transaction " +
              transaction.status +
              ": " +
              transaction.id +
              "\n\nSee console for all available details"
          );
        });
      },
      fundingSource: fundingSource,
    })
    .render("#bancontact-button-container");
});

完整HTML代码 #

<html>

<head>
    <title>Testing Payments</title>
    <script
        src="https://www.paypal.com/sdk/js?client-id=test&components=buttons,payment-fields,marks,funding-eligibility&enable-funding=bancontact&currency=EUR"></script>
</head>

<body>
    <script>
        paypal.Marks({
            fundingSource: paypal.FUNDING.BANCONTACT
        }).render('#bancontact-mark')

        paypal.PaymentFields({
            fundingSource: paypal.FUNDING.BANCONTACT,
            style: {
                // style object (optional)
            },
            fields: {
                // fields prefil info (optional)
                name: {
                    value: "John Doe",
                },
            }
        }).render("#bancontact-container");

        paypal.Buttons({
            fundingSource: paypal.FUNDING.BANCONTACT,
            style: {
                label: "pay",
            },
            createOrder() {
                return fetch("/my-server/create-paypal-order", {
                    method: "post",
                    // use the "body" param to optionally pass additional order information
                    // like product skus and quantities
                    body: JSON.stringify({
                        cart: [
                            {
                                sku: "YOUR_PRODUCT_STOCK_KEEPING_UNIT",
                                quantity: "YOUR_PRODUCT_QUANTITY",
                            },
                        ],
                    }),
                })
                    .then((response) => response.json())
                    .then((order) => order.id);
            },
            onApprove(data) {
                return fetch(`"/my-server/capture-paypal-order`, {
                    method: "post",
                    body: JSON.stringify({
                        orderID: data.orderID
                    })
                })
                    .then((response) => response.json())
                    .then((orderData) => {
                        // Successful capture! For dev/demo purposes:
                        console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
                        const transaction = orderData.purchase_units[0].payments.captures[0];
                        console.log('Transaction Status:', transaction.status);
                        console.log('Transaction ID:', transaction.id);
                        // When ready to go live, remove the alert and show a success message within this page. For example:
                        // const element = document.getElementById('paypal-button-container');
                        // element.innerHTML = '<h3>Thank you for your payment!</h3>';
                        // Or go to another URL:  window.location.href = 'thank_you.html';
                    });
            },
            onCancel(data, actions) {
                console.log(`Order Canceled - ID: ${data.orderID}`);
            },
            onError(err) {
                console.error(err);
            }
        })
            .render("#bancontact-btn");

    </script>

    <div id="bancontact-mark">
    </div>
    <div id="bancontact-container">
    </div>
    <div id="bancontact-btn">
    </div>

</body>

</html>

• 补全SDK启用参数：当前SDK URL仅启用了Bancontact，需修改为enable-funding=bancontact,ideal，确保两种本地支付方式都被正确初始化。
• 优化订单创建配置：在createOrder的application_context中添加user_action: "PAY_NOW"，明确指定支付行为，避免跳转至通用的checkout页面。
• 简化支付组件配置：第二份代码中同时使用了PaymentFields和Buttons组件，若仅需引导用户使用本地支付，建议只保留对应支付方式的按钮组件，避免配置冲突。
• 切换测试环境：当前使用client-id=test的沙箱环境，部分本地支付的跳转逻辑可能受限，建议使用正式客户端ID测试，确认是否为环境导致的URL异常。
• 独立按钮渲染容器：确保每个支付按钮渲染到专属的DOM容器中，避免多个按钮共用容器引发的事件绑定异常。

内容的提问来源于stack exchange，提问作者Tom944