Braintree javascript脚本在UserAgent ios10上不起作用答案

【问题标题】：Braintree javascript script not working on UserAgent ios10Braintree javascript脚本在UserAgent ios10上不起作用
【发布时间】：2018-01-30 06:42:11
【问题描述】：

我在视图文件中添加了以下刀片代码，用于通过 Braintree 添加信用卡。

<form id="form-add-card" class="popup-form" method="POST" action="{{ url('account/credit-card') }}">
    <div id="card-braintree">
        <div class="row">
            <div class="input-field col s12 mbm">
                <h6>Add a card</h6>
            </div>
            <div class="input-field col s12">
                <input placeholder="XXXX XXXX XXXX XXXX" id="card_no"  maxlength="16" type="text" data-braintree-name="number" class="validate">
                <label for="card_no">Card Number</label>
            </div>
            <div class="input-field col s6">
                <input placeholder="MM / YY" id="valid_until" type="text" data-braintree-name="expiration_date" class="validate">
                <label for="valid_until">Valid Until</label>
            </div>
            <div class="col s12">
                <p class="small-notice light-text mtm">We accept both Visa and MasterCard payment and has a validated certification for PCI DSS Compliant Service Provider.</p>
            </div>
            <div class="input-field col s12">
                <button class="waves-effect waves-light btn load">Save Card</button>
            </div>
        </div>
    </div>
</form>

然后将 Braintree 的 javascript 设置如下：

    <script src="https://js.braintreegateway.com/v2/braintree.js"></script>
    <script>
    $(document).ready(function() {
        braintree.setup('{{ $client_token }}', 'custom', { id:'form-add-card',
            onPaymentMethodReceived: function(data){
                console.log(data);
            }
        });
    });
    </script>

如果我尝试通过此表单通过网络添加信用卡，我会返回付款方式 nonce 和信用卡详细信息。但是，如果我要使用 safari，则无法添加信用卡，它将在我的表单中传入一个空的付款方式 nonce。这发生在 chrome ios 和 safari 中。 Android chrome 和 web chrome 运行良好。

想法？

编辑：尽管更新了 Braintree 脚本，但我在 Safari/ios 设备中仍然遇到同样的问题。

【问题讨论】：

不推荐使用 Braintree 库的“热链接”版本。你能把你的代码更新到最新版本的braintree https://js.braintreegateway.com/js/braintree-2.32.1.min.js，看看能不能解决问题？如果您在更新脚本源后仍然遇到此问题，请更具体地说明您遇到的问题（屏幕截图、任何控制台错误消息、浏览器版本），以帮助我们解决您的问题。
我仍然看到更新后的脚本文件存在同样的问题。我是否必须将 data-braintree-name 更改为托管字段才能使其正常工作？基本上，添加了 payment_method_nonce 隐藏字段，但是当我发送表单时，它不会占用该字段。它将发送一个空的 payment_method_nonce 参数。

标签： javascript php laravel blade braintree

【解决方案1】：

如果有人遇到同样的问题，请将其放在这里，

我登录我的服务器，发现表单提交了两次，第一次没有 payment_method_nonce 参数值，第二次是 with。不知何故，在 Safari 和 ios 设备中，表单仅以空值提交一次，因此不允许通过 Braintree 添加卡片。要解决这个问题，而不是：

        <div class="input-field col s12">
            <button class="waves-effect waves-light btn load">Save Card</button>
        </div>

我将其替换为：

        <div class="input-field col s12">
            <input class="waves-effect waves-light btn load" type="submit" id="submit" value="Save Card">
        </div>

它有效。

【讨论】：