PayPal 可变价格智能按钮在没有用户输入的情况下无法执行？

Posted 2023-02-22

【中文标题】PayPal 可变价格智能按钮在没有用户输入的情况下无法执行？

【英文标题】：PayPal Variable Price Smart Button Does Not Execute Without User Input?

【发布时间】：2021-06-02 15:30:57

【问题描述】：

PayPal 的可变定价智能按钮结账有一个额外的字段，需要用户定义的目的不是很清楚。

即使是像在输入字段的值中预先归档这样基本的东西也会阻止它正常运行。例如

<input type="text" name="descriptionInput" id="description" maxlength="127" value="My Item Description">

这里的代码生成器：https://www.paypal.com/buttons/smart

我的目标是有一个可变价格表单，用户可以在其中更改价值金额，但如果他们已经对输入字段内的预定义建议感到满意，则不需要用户输入，除非有一些用户输入按钮脚本不执行的空白描述字段或付款金额字段。

我怎样才能让 Paypal 按钮在不需要用户在任一字段中输入的情况下执行？

代码示例：

<div id="smart-button-container">
    <div style="text-align: center"><label for="description"> </label><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 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&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 (details) 
          alert('Transaction completed by ' + details.payer.name.given_name + '!');
        );
      ,

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

【参考方案1】：

您说的是按钮类型：“可变价格”，具体来说。

由于有了这样的按钮，付款人可以支付任何金额，“描述”字段是让他们说明他们正在支付的费用，否则您将不知道付款的目的。您可以启用的可选发票 ID（通过输入标签）是让他们输入发票 ID（如果您使用此类 ID）。

---

如果您需要带有一些预定义描述的可变金额付款，请设置它（关闭自动完成功能）并隐藏 div。

<div style="text-align: center; display:none;"><label for="description">no</label><input type="text" name="descriptionInput" id="description" maxlength="127" value="my super description no one can change" autocomplete="off" /></div>

【讨论】：

是的，但是为什么客户必须填写呢？为什么我不能预先定义他们支付的费用，然后他们可以选择支付什么？

再次要求客户填写 ID，而不是我

如果你想预先定义，使用不同的按钮类型（不是可变价格）。

那我不能让客户选择他们要支付的费用

JS 在验证和启用按钮之前需要至少输入一个键。如果您预定义了所有内容，请从 onInit 中删除初始的 actions.disable();。