javascript - BrainTree 托管字段 onPaymentMethodReceived 函数无法返回随机数

Question

我很难弄清楚为什么托管字段中的 onPaymentMethodReceived 没有返回任何值。 `

  <form action="" id="my-form" method="post">
      <label for="a">Amount</label>
      <div id="amount"> 
          <input type="text" name="amount" value="400" id="amount" />
      </div>

      <label for="card-number">Card Number</label>
      <div id="card-number"> 
          <input type="text" name="cardNumber" value="4111111111111111" id="cardNumber" />
      </div>

      <label for="cvv">CVV</label>
      <div id="cvv">
          <input type="text" name="CVV" value="020" id="cv-v" />
       </div>
      <label for="expiration-month">Expiration Month</label>
      <div id="expiration-month">
          <input type="text" name="expirMonth" value="10" id="expirMonth" />
       </div>

      <label for="expiration-year">Expiration Year</label>
      <div id="expiration-year">
          <input type="text" name="expirYear" value="20" id="expirYear" />
      </div>
      <input type="submit" value="Pay" id="btn_submit"/>
  </form>

 <script>
  var nonce0 ;
  braintree.setup(clientToken, "custom", 
    {
      id: "my-form",
      hostedFields: {
            number: {
              selector: "#card-number"
            },
            cvv: {
              selector: "#cvv"
            },
            expirationMonth: {
              selector: "#expiration-month"
            },
            expirationYear: {
              selector: "#expiration-year"
            },
      },
      onPaymentMethodReceived:function(nonce){
          console.log("in onPaymentMethodReceived");
          console.log(nonce);
          nonce0 = nonce;
          alert('OnPaymentMR');
          console.log(JSON.stringify(nonce));
          return false;
      },
      onError :function(obj){
          alert('onError');
          console.log(JSON.stringify(obj));
     }
   }); 
    console.log('BTree = '+ nonce0);
  </script>

` 我想存储返回的随机数，但什么也没发生，console.log 没有显示任何值。甚至 onError 也没有做任何事情。
使用断点，我可以知道隐藏的随机数正在返回，但回调函数没有被触发。
我用 Dropin-UI 尝试过，它确实有效，我可以从 onPaymentMethodReceived 获取随机数。 不确定我做错了什么。

Answer 1

_{全面披露:我是 Braintree 的开发人员}

使用托管字段时，表单应仅包含 div container for each payment field 。您的实现将如下所示:

<form action="" id="my-form" method="post">
  <label for="a">Amount</label>
  <div id="amount"></div>

  <label for="card-number">Card Number</label>
  <div id="card-number"></div>

  <label for="cvv">CVV</label>
  <div id="cvv"></div>

  <label for="expiration-month">Expiration Month</label>
  <div id="expiration-month"></div>

  <label for="expiration-year">Expiration Year</label>
  <div id="expiration-year”></div>

  <input type="submit" value="Pay" id="btn_submit"/>
</form>

Braintree 设置脚本随后将渲染 iframe 来处理支付字段输入。如果您仍然遇到问题，可以随时联系Braintree support .