Question

我在这里查看了一些相同问题的帖子，但是在不同的情况下，这些帖子没有为我提供特定问题的答案......

我正在使用Braintree JSv2和我的Django项目，一切正常。由于我已经迁移到Braintree的v3，我现在唯一的问题是输入“payment_method_nonce”的值不存在......

以下是应该转储payment_method_nonce值的代码：

document.querySelector('input[name="payment_method_nonce"]').value = payload.nonce;

以下是应该在python端抓取它的代码：

client_payment_nonce = request.POST['payment_method_nonce']

在我的开发环境中提交此内容时，(MultiValueDictKeyError)收到错误"payment_method_nonce"。

我正在使用Django 1.9和Python 2.7。我也在使用Braintree提供的example进行使用HostedFields的简单集成......

小测试

因此，我在表单中手动添加了一个名为“payment_method_nonce”的输入字段，以查看是否有字段导致某些问题。我知道它是由Braintree注入的，但只是测试了一个想法。似乎虽然payment_method_nonce的值应该是我的nonce，但我没有在输入框中输入任何内容，它仍然返回null。

表单和HostedFields的完整代码段

<form action="/booking/" method="post" id="checkout_form">
                    {% csrf_token %}
                <div class="payment">
                    <span>Payment</span>
                        <!--input elements for user card data-->
                        <div class="hosted-fields" id="card-number"></div>

                        <div class="hosted-fields" id="postal-code"></div>

                        <div class="hosted-fields" id="expiration-date"></div>

                        <div class="hosted-fields" id="cvv"></div>

                        <div class="btns">
                            <input type="hidden" name="payment_method_nonce">
                            <input type="submit" value="Complete Booking" id="pay-button">
                        </div>
                </div>
            </form>

注意：我刚刚将payment_method_nonce字段更改为type="hidden"而不是type="text"，但仍具有相同的效果......

<!-- load the required client component -->
    <script src="https://js.braintreegateway.com/web/3.15.0/js/client.min.js"></script>
    <!-- load the hosted fields component -->
    <script src="https://js.braintreegateway.com/web/3.15.0/js/hosted-fields.min.js"></script>
    <!-- Braintree setup -->
    <script>
        var client_token = "{{ request.session.braintree_client_token }}"
        var form = document.querySelector('#checkout-form');
        var submit = document.querySelector('input[type="submit"]');

        braintree.client.create({
            authorization: client_token
        }, function (clientErr, clientInstance) {
            if (clientErr) {
                // Handle error in client creation
                return;
            }
            braintree.hostedFields.create({
                client: clientInstance,
                styles: {
                    'input': {
                        'font-size': '14px'
                    },
                    'input.invalid': {
                        'color': 'red'
                    },
                    'input.valid': {
                        'color': 'green'
                    }
                },
                fields: {
                    number: {
                        selector: '#card-number',
                        placeholder: 'Credit Card Number'
                    },
                    cvv: {
                        selector: '#cvv',
                        placeholder: '123'
                    },
                    expirationDate: {
                        selector: '#expiration-date',
                        placeholder: '10/2019'
                    },
                    postalCode: {
                        selector: '#postal-code',
                        placeholder: '10014'
                    }
                }
            }, function (hostedFieldsErr, hostedFieldsInstance) {
                if (hostedFieldsErr) {
                    // handle error in Hosted Fields creation
                    return;
                }

                submit.removeAttribute('disabled');

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

                    hostedFieldsInstance.tokenize(function (tokenizeErr, payload) {
                        if (tokenizeErr) {
                            // handle error in Hosted Fields tokenization
                            return;
                        }
                        // Put `payload.nonce` into the `payment_method_nonce`
                        document.querySelector('input[name="payment_method_nonce"]').value = payload.nonce;
                        document.querySelector('input[id="pay-button"]').value = "Please wait...";
                        form.submit();
                    });
                }, false);
            });
        });
    </script>

注意：行document.querySelector('input[id="pay-button"]').value = "Please wait...";不会触发（我知道这是因为按钮不会更改值）。也许这些querySelector行无效？

新注意事项

我刚回到我的页面并点击提交按钮，甚至没有输入任何信息。在Braintree的v2中，我无法点击提交按钮，直到所有字段都被填入...也许我的表单中的值甚至没有发送到braintree接收一个nonce，这就是为什么有一个空字符串的原因被退回..？

Answer 1

故事的道德

检查您的代码......多次。正如C Joseph指出的那样，我的form ID与var form引用的内容不同......

<form action="/booking/" method="post" id="checkout_form">

var form = document.querySelector('#checkout-form');

Braintree JSv3 payment_method_nonce使用HostedFields值不好

1 个答案: