javascript - Braeintree 客户端使用 JS v3 设置 - payment_method_nonce null 并且表单未提交

Question

我尝试将 Braintree 集成到我的 Laravel 5.2 应用程序中，并且使用 JS v2 客户端设置一切正常，但我想将其升级到 v3。这是来自文档(我做了一些定制):

<form id="checkout-form" action="/checkout" method="post">
  <div id="error-message"></div>

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

  <label for="cvv">CVV</label>
  <div class="hosted-field" id="cvv"></div>

  <label for="expiration-date">Expiration Date</label>
  <div class="hosted-field" id="expiration-date"></div>

  <input type="hidden" name="payment-method-nonce">
  <input type="submit" value="Pay">
</form>

<!-- Load the Client component. -->
<script src="https://js.braintreegateway.com/web/3.0.0-beta.8/js/client.min.js"></script>

<!-- Load the Hosted Fields component. -->
<script src="https://js.braintreegateway.com/web/3.0.0-beta.8/js/hosted-fields.min.js"></script>

<script>

var authorization = '{{ $clientToken }}'

braintree.client.create({
  authorization: authorization
}, function (clientErr, clientInstance) {
  if (clientErr) {
    // Handle error in client creation
    return;
  }

  braintree.hostedFields.create({
    client: clientInstance,
    styles: {
      'input': {
        'font-size': '14pt'
      },
      'input.invalid': {
        'color': 'red'
      },
      'input.valid': {
        'color': 'green'
      }
    },
    fields: {
      number: {
        selector: '#card-number',
        placeholder: '4111 1111 1111 1111'
      },
      cvv: {
        selector: '#cvv',
        placeholder: '123'
      },
      expirationDate: {
        selector: '#expiration-date',
        placeholder: '10 / 2019'
      }
    }
  }, function (hostedFieldsErr, hostedFieldsInstance) {
    if (hostedFieldsErr) {
      // Handle error in Hosted Fields creation
      return;
    }

    form.addEventListener('submit', function (event) {
      event.preventDefault();

      hostedFieldsInstance.tokenize(function (tokenizeErr, payload) {
        if (tokenizeErr) {
          // Handle error in Hosted Fields tokenization
          return;
        }

        document.querySelector('input[name="payment-method-nonce"]').value = payload.nonce;
        form.submit();
      });
    }, false);
  });
});
</script>

但是当我点击提交按钮时，没有任何反应。event.preventDefault() 停止提交并生成 payment_method_nonce token ，但我无法提交之后的表单，因为 form.submit() 不起作用

如何在 event.preventDefault() 之后提交表单？或者如何将 payment_method_nonce token 发送到我的 Controller ？

谢谢!

Answer 1

当我复制您的代码片段并尝试运行该示例时，我在控制台中收到 (index):69 Uncaught ReferenceError: form is not Define 。当我添加

var form = document.getElementById('checkout-form');

效果很好。

最好的猜测，您只是忘记分配表单变量来引用表单 dom 元素。如果情况并非如此，请务必告诉我。