Как исправить пустую ошибку в размещенных полях в django

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 %}