WordPress站点PayPal智能按钮无法登录及切换正式按钮问题

问题背景 #

在WordPress站点部署PayPal智能按钮后，调整了输入框样式，出现输入邮箱后无法登录其他PayPal账户、无报错直接返回初始界面的问题。排查后确认当前使用的是Sandbox测试按钮，需切换为正式环境按钮。

具体操作步骤 #

• 获取正式Client ID
  登录你的PayPal商家账户，进入开发者中心，找到已创建的生产环境应用，复制对应的Client ID（注意区分Sandbox环境的测试ID）。

• 替换代码中的Client ID
  找到代码中加载PayPal SDK的script标签，将原标签里的client-id=sb替换为你刚复制的正式Client ID。

  原代码行：

  <script src="https://www.paypal.com/sdk/js?client-id=sb&enable-funding=venmo&currency=USD" data-sdk-integration-source="button-factory"></script>
  

  修改后示例（替换YOUR_PRODUCTION_CLIENT_ID为你的正式ID）：

  <script src="https://www.paypal.com/sdk/js?client-id=YOUR_PRODUCTION_CLIENT_ID&enable-funding=venmo&currency=USD" data-sdk-integration-source="button-factory"></script>
  

• 验证效果
  更新WordPress页面中的代码后，清除站点缓存和浏览器缓存，测试按钮功能：点击按钮后进入正式PayPal登录界面，此时可以正常切换不同的PayPal账户完成支付。

修改后的完整代码示例 #

<style>
  input {
    border-top-style: hidden;
    border-right-style: hidden;
    border-left-style: hidden;
    border-bottom-style: groove;
    background-color: #eee;
  }
  
</style>

<div id="smart-button-container">
    <div style="text-align: center">
        <label for="description">First and Last Name </label>
        <span style="display:inline-block; width:10px;"></span>
        <input type="text" name="descriptionInput" id="description" maxlength="127" value=""></div>
      <p id="descriptionError" style="visibility: hidden; color:red; text-align: center;">Please enter a First and Last Name</p>
    <div style="text-align: center"><label for="amount">Amount to Pay </label>
    <span style="display:inline-block; width:10px;"></span>
    <input name="amountInput" type="number" id="amount" value="" ><span> USD</span></div>
      <p id="priceLabelError" style="visibility: hidden; color:red; text-align: center;">Please enter the full amount owed</p>
    <div id="invoiceidDiv" style="text-align: center; display: none;"><label for="invoiceid">Auction Lot Number </label>
    <span style="display:inline-block; width:10px;"></span>
    <input name="invoiceid" maxlength="127" type="text" id="invoiceid" value="" ></div>
      <p id="invoiceidError" style="visibility: hidden; color:red; text-align: center;">Please enter the Lot number</p>
    <div style="text-align: center; margin-top: 0.625rem;" id="paypal-button-container"></div>
  </div>

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_PRODUCTION_CLIENT_ID&enable-funding=venmo&currency=USD" data-sdk-integration-source="button-factory"></script>
  <script>
  function initPayPalButton() {
    var description = document.querySelector('#smart-button-container #description');
    var amount = document.querySelector('#smart-button-container #amount');
    var descriptionError = document.querySelector('#smart-button-container #descriptionError');
    var priceError = document.querySelector('#smart-button-container #priceLabelError');
    var invoiceid = document.querySelector('#smart-button-container #invoiceid');
    var invoiceidError = document.querySelector('#smart-button-container #invoiceidError');
    var invoiceidDiv = document.querySelector('#smart-button-container #invoiceidDiv');

    var elArr = [description, amount];

    if (invoiceidDiv.firstChild.innerHTML.length > 1) {
      invoiceidDiv.style.display = "block";
    }

    var purchase_units = [];
    purchase_units[0] = {};
    purchase_units[0].amount = {};

    function validate(event) {
      return event.value.length > 0;
    }
paypal.Buttons({
      style: {
        color: 'gold',
        shape: 'pill',
        label: 'paypal',
        layout: 'horizontal',
        
      },

      onInit: function (data, actions) {
        actions.disable();

        if(invoiceidDiv.style.display === "block") {
          elArr.push(invoiceid);
        }

        elArr.forEach(function (item) {
          item.addEventListener('keyup', function (event) {
            var result = elArr.every(validate);
            if (result) {
              actions.enable();
            } else {
              actions.disable();
            }
          });
        });
      },

      onClick: function () {
        if (description.value.length < 1) {
          descriptionError.style.visibility = "visible";
        } else {
          descriptionError.style.visibility = "hidden";
        }

        if (amount.value.length < 1) {
          priceError.style.visibility = "visible";
        } else {
          priceError.style.visibility = "hidden";
        }

        if (invoiceid.value.length < 1 && invoiceidDiv.style.display === "block") {
          invoiceidError.style.visibility = "visible";
        } else {
          invoiceidError.style.visibility = "hidden";
        }

        purchase_units[0].description = description.value;
        purchase_units[0].amount.value = amount.value;

        if(invoiceid.value !== '') {
          purchase_units[0].invoice_id = invoiceid.value;
        }
      },

      createOrder: function (data, actions) {
        return actions.order.create({
          purchase_units: purchase_units,
        });
      },
onApprove: function (data, actions) {
        return actions.order.capture().then(function (orderData) {

          // Full available details
          console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));

          // Show a success message within this page, e.g.
          const element = document.getElementById('paypal-button-container');
          element.innerHTML = '';
          element.innerHTML = '<h3>Thank you for your payment!</h3>';

          // Or go to another URL:  actions.redirect('thank_you.html');
          
        });
      },

      onError: function (err) {
        console.log(err);
      }
    }).render('#paypal-button-container');
  }
  initPayPalButton();
  </script>

内容的提问来源于stack exchange，提问作者Yoram Aharon Raz