Braintree Drop in UI字段驗證

Question

在第一步結帳中，我有多種付款方式供客戶選擇，例如Braintree，銀行轉帳等。為了允許客戶從多種方式中進行選擇，我必須僅在選擇Braintree作為付款方式時才強制選擇Braintree Fields。 有什么方法可以使諸如信用卡，cvv等的braintree字段變為非強制性？ 一步結帳 我將不勝感激任何幫助。

Answer 1

我想我誤解了您的原始問題。 如果用戶選擇銀行轉帳，您似乎希望能夠繞過直接插入表單劫持。 我整理了一個小樣演示來說明如何進行此操作：

<!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);
    }
  });
})();

Braintree Drop in UI字段驗證

問題描述

1 個解決方案

解決方案1
2 2015-05-18 17:31:15

Braintree Drop in UI字段驗證

問題描述

1 個解決方案

解決方案1 2 2015-05-18 17:31:15

解決方案1
2 2015-05-18 17:31:15