You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

替换PayPal沙箱sb为客户ID后支付按钮无法弹出的问题求助

PayPal沙箱sb替换为客户ID后支付按钮无法弹出的问题求助

Hey everyone,

I'm stuck with this frustrating issue: when I replace the sb client ID in my PayPal Sandbox code with my actual client ID, the PayPal payment button won't load at all. The code works perfectly fine when using sb, but as soon as I swap in my own ID, it breaks completely.

I'm wondering if this is because I'm missing some required JavaScript files? If that's the case, how do I properly link them and where can I get them?

I've tried everything I can think of and still can't resolve this. Here's my full code for reference:

<div id="smart-button-container">
  <div style="text-align: center"><label for="description"> </label><input type="text" name="descriptionInput" id="description" maxlength="127" value=""><span> Name</span></div>
  <p id="descriptionError" style="visibility: hidden; color:red; text-align: center;">Please enter a description</p>
  <div style="text-align: center"><label for="amount"> </label><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 a price</p>
  <div id="invoiceidDiv" style="text-align: center; display: none;"><label for="invoiceid"> </label><input name="invoiceid" maxlength="127" type="text" id="invoiceid" value=""></div>
  <p id="invoiceidError" style="visibility: hidden; color:red; text-align: center;">Please enter an Invoice ID</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=sb&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: 'rect',
      label: 'paypal',
      layout: 'vertical',
    },
    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) {
        console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
        const element = document.getElementById('paypal-button-container');
        element.innerHTML = '';
        element.innerHTML = '<h3>Thank you for your payment!</h3>';
      });
    },
    onError: function (err) {
      console.log(err);
    }
  }).render('#paypal-button-container');
}
initPayPalButton();
</script>

备注:内容来源于stack exchange,提问作者Apollo the host

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.22 09:38:04