UI 字段验证中的 Braintree Drop答案

【问题标题】：Braintree Drop In UI Field ValidationUI 字段验证中的 Braintree Drop
【发布时间】：2015-07-29 22:51:19
【问题描述】：

在一步结账中，我有多种付款方式供客户选择，例如 Braintree、银行转账等。为了允许客户从多种方式中进行选择，我必须仅在选择 Braintree 作为付款方式时才强制填写 Braintree 字段。有什么方法可以让信用卡、cvv 等 Braintree 字段成为非强制性的吗？我将不胜感激。

【问题讨论】：

标签： php paypal braintree

【解决方案1】：

我想我误解了你原来的问题。如果用户选择银行转账，您似乎希望能够绕过 Drop-ins 表单劫持。我整理了一个小演示来说明我将如何做到这一点：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <form id="myform" action="/" method="get">
    <label for="pay-with">Pay with card</label>
    <input id="pay-with-cc" type="radio" name="pay-with" value="cc">

    <div id="container" style="display: none;"></div>

    <label for="bank-transfer">Pay with Bank Transfer</label>
    <input id="pay-with-bank-transfer" type="radio" name="pay-with" value="bank-transfer">

    <input type="submit" value="Pay">
  </form>
  <!-- Include your JS here -->      
</body>
</html>

然后你的 JavaScript 文件，你可以这样做：

(function () {
  var dropinHasRendered = false;
  var form = document.forms[0];
  var dropinContainer = form.querySelector('#container');
  var payWithCCRadio = form.querySelector('input#pay-with-cc');
  var payWithBankTransferRadio = form.querySelector('input#pay-with-bank-transfer');

  function renderBraintreeDropIn() {
    dropinHasRendered = true;

    // Make sure to use your client token here
    braintree.setup(YOUR_TOKEN, 'dropin', {container: 'container'});
  }

  function showBraintree() {
    dropinContainer.style.display = 'block';

    if (!dropinHasRendered) {
      renderBraintreeDropIn();
    }
  }

  function hideBraintree() {
    dropinContainer.style.display = 'none';
  }

  payWithBankTransferRadio.addEventListener('change', hideBraintree);
  payWithCCRadio.addEventListener('change', showBraintree);

  form.addEventListener('submit', function (event) {
    if (form['pay-with'].value === 'bank-transfer') {
      event.preventDefault();

      // This allows your to bypass Drop-in
      HTMLFormElement.prototype.submit.call(form);
    }
  });
})();

【讨论】：

感谢您的帮助，但这并不能回答我的问题。好吧，我想实际上没有任何解决方法可以使卡号和有效期成为非强制性的。
@Harit Kyle 用一个非常好的例子更新了他的答案。以后推荐getting in touch with our support team。