Braintree付款单不起作用| Django

我正试图按照“Django by Example 3”一书构建Braintree付款表单，但表单无法填写：

如您所见，表单将显示在浏览器中，但不可能编辑这3个字段。实际上是像“图像”一样显示的

下面是我的模板：

{% extends "shop/base.html" %}

{% block title %}Pay by credit card{% endblock %}

{% block content %}
    <h1>Pay by credit card</h1>
    <form 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>

<!-- includes the Braintree JS client SDK -->
<script src="https://js.braintreegateway.com/web/3.44.2/js/client.
min.js"></script>
<script src="https://js.braintreegateway.com/web/3.44.2/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 %}

{%extensed“shop/base.html”%}
{%block title%}用信用卡支付{%endblock%}
{%block content%}
用信用卡支付
卡号
CVV
到期日期
{%csrf_令牌%}
var form=document.querySelector（“#payment”）；
var submit=document.querySelector（'input[type=“submit”]”）；
创建（{
授权：{{client_token}}
}，函数（clienter，clientInstance）{
if（clienter）{
控制台错误（clienter）；
返回；
}
braintree.hostedFields.create({
客户：clientInstance，
风格：{
'输入'：{'font-size'：'13px'}，
'input.invalid'：{'color'：'red'}，
'input.valid'：{'color'：'green'}
},
字段：{
编号：{选择器：'#卡号'}，
cvv:{选择器：'#cvv'}，
过期日期：{选择器：'#过期日期'}
}
}，函数（hostedFieldsErr，hostedFieldsInstance）{
如果（hostedFieldsErr）{
控制台错误（hostedFieldsErr）；
返回；
}
submit.removeAttribute（“已禁用”）；
表单.addEventListener（'submit'，函数（事件）{
event.preventDefault（）；
hostedFieldsInstance.tokenize（函数（Tokenizeer，
有效载荷）{
if（标记化器）{
控制台错误（tokenizeErr）；
返回；
}
//将nonce设置为发送到服务器
document.getElementById（'nonce'）。value=payload.nonce；
//提交表格
document.getElementById（“付款”）.submit（）；
});
}，假）；
});
});
{%endblock%}

这本书是这么说的：

“这是显示付款表单和处理付款的模板。 为信用卡输入定义容器而不是元素 字段：信用卡号、CVV号和到期日期。这是如何 指定Braintree JavaScript客户端将在iframe中呈现的字段。 还包括一个名为payment\u method\u的元素 将用于在Braintree生成令牌nonce后将其发送到视图 JavaScript客户端。“

---

有什么帮助吗？

我在阅读这本书时遇到了同样的问题，我最终找到了答案，以下是我的工作。您应该使用这是一个现成的支付UI，它提供了与Braintree集成并开始安全地接受支付的最快方式，然后使用：

https://js.braintreegateway.com/web/dropin/1.18.0/js/dropin.min.js

而不是：

<script src="https://js.braintreegateway.com/web/3.44.2/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.44.2/js/hostedfields.min.js"></script>

---

正如您所注意到的，我们正在使用ajax，结果成功后，您应该做些什么。希望它能帮助我设法解决这个问题（因为我也在通过示例课程学习Packt Django 3），方法是从中复制并替换书中SDK脚本导入行中给出的内容

<!-- includes the Braintree JS client SDK -->
<script src="https://js.braintreegateway.com/web/3.44.2/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.44.2/js/hosted-fields.min.js"></script>

---

我猜[书中]的“原始链接”有问题，例如hostedfields而不是托管字段。现在它对我有效了

检查视图中是否有错误代码。py！我有同样的问题，但我检查我的编码与复制原始编码。我发现“payment_process def”返回了错误的值。错误的代码是“clinet”。正确的答案是“客户”。不要以身作则放弃braintree和Djagno 3。

我非常感谢您的帮助，但事实证明我选择了另一种付款方式：Stripe！酷，我想使用stripe，但我坚持让Braintree集成与我一起工作，你找到解决方案了吗？我也遇到了这个问题。我改为条带支付解决方案。但下面的答案似乎和你现在面临的问题一样。祝你好运

def payment_process(request):
    """The view that processes the payment"""
    order_id = request.session.get('order_id')


    order = get_object_or_404(Order, id=order_id)

    total_cost = order.get_total_cost()


    if request.method == 'POST':
        # retrieve nonce 
        # retrieve nonce
        nonce = request.POST.get('paymentMethodNonce', None)

        # # create User 
        customer_kwargs = {
            "first_name": order.first_name,
            "last_name": order.last_name,
            "email": order.email
        }
        customer_create = gateway.customer.create(customer_kwargs)
        customer_id = customer_create.customer.id

        #create and submit transaction
        
        result = gateway.transaction.sale({
            'amount': f'{total_cost:.2f}',
            'payment_method_nonce': nonce,
            'options': {
                'submit_for_settlement': True
            }
        })

        print(result)
        if result.is_success:
            #mark the order as paid 

            order.paid = True
            
            # store the unique transaction id 
            order.braintree_id = result.transaction.id
            order.save()

            return redirect('payment:done')
        else:
            return redirect('payment:canceled')
    else:
        # generate token
        client_token = gateway.client_token.generate()

        return render(
            request,
            'payment/process.html',
            {
                'order':order,
                'client_token': client_token
            }
        )

<!-- includes the Braintree JS client SDK -->
<script src="https://js.braintreegateway.com/web/3.44.2/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.44.2/js/hosted-fields.min.js"></script>