如何在Django中纠正空白的Hosted Fields错误

Question

我正在使用Django构建一个电子商务应用，我想使用Braintree集成一个支付网关。但是，使用“托管字段”将其集成后，我的信用卡将以某种方式显示，我们甚至都无法输入卡号，CVV代码或有效期。我附上了有关paymBraintree卡流程的屏幕截图。 请协助 谢谢

process.html

{% extends "base.html" %}
{% block title %}Pay by credit card{% endblock %}
{% block content %}
<h1>Pay by credit card</h1>
<form action="." id="payment" method="post">
    <label for="card-number">Card Number</label>
    <div id="card-number" class="field"></div>
    <label for="cvv">CVV</label>
    <div id="cvv" class="field"></div>
    <label for="expiration-date">Expiration Date</label>
    <div id="expiration-date" class="field"></div>
    <input type="hidden" id="nonce" name="payment_method_nonce" value="">
    {% csrf_token %}
    <input type="submit" value="Pay">
</form>
<!-- Load the required client component. -->
<script src="https://js.braintreegateway.com/web/3.29.0/js/client.min.js">
</script>
<!-- Load Hosted Fields component. -->
<script src="https://js.braintreegateway.com/web/3.29.0/js/hostedfields.min.js"></script>
<script>
    var form = document.querySelector('#payment');
    var submit = document.querySelector('input[type="submit"]');
    braintree.client.create({
    authorization: '{{ client_token }}'
    }, function (clientErr, clientInstance) {
    if (clientErr) {
        console.error(clientErr);
    return;
    }
    braintree.hostedFields.create({
        client: clientInstance,
        styles: {
            'input': {'font-size': '13px'},
            'input.invalid': {'color': 'red'},
            'input.valid': {'color': 'green'}
        },
        fields: {
            number: {selector: '#card-number'},
            cvv: {selector: '#cvv'},
            expirationDate: {selector: '#expiration-date'}
            }
    }, function (hostedFieldsErr, hostedFieldsInstance) {
        if (hostedFieldsErr) {
        console.error(hostedFieldsErr);
        return;
    }
    submit.removeAttribute('disabled');
    form.addEventListener('submit', function (event) {
        event.preventDefault();
        hostedFieldsInstance.tokenize(function (tokenizeErr, payload) {
            if (tokenizeErr) {
                console.error(tokenizeErr);
                return;
        }
            // set nonce to send to the server
            document.getElementById('nonce').value = payload.nonce;
            // submit form
            document.getElementById('payment').submit();
            });
            }, false);
        });
    });
</script>
{% endblock %}