django - Braintree 付款表格不起作用 | Django

Question

我正在尝试按照“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 %}

这本书是这样说的:
“这是显示付款表格和处理付款的模板。
您为信用卡输入定义容器而不是元素
字段:信用卡号、CVV 号和到期日期。这是如何
您指定 Braintree JavaScript 客户端将在 iframe 中呈现的字段。
您还包括一个名为 payment_method_nonce 的元素
一旦由 Braintree 生成，将用于将 token 随机数发送到您的 View
JavaScript 客户端。”
有什么帮助吗？

Answer 1

我在阅读这本书时遇到了同样的问题，最终我想通了，这是我的工作。您应该使用 Drop-in 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>

在 process.html 请执行下列操作:

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

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

{% block sidenavigation %}



{% endblock %}

{% block content %}
<h1>Pay by credit card</h1>

<!-- includes the Braintree JS client SDK -->

<script src="https://js.braintreegateway.com/web/dropin/1.18.0/js/dropin.min.js"></script>

<form autocomplete="off">
  {% if braintree_error %}
    <div class="alert alert-danger fade in">
        <button class="close" data-dismiss="alert">&times;</button>
        {{ braintree_error|safe }}
    </div>
  {% endif %}
  <div class="braintree-notifications"></div>
  <div id="braintree-dropin"></div>
  <input style="background-color: #0783ca" id="submit-button" class="btn btn-success btn-lg btn-block" type="button" value="Pay now!" />
</form>

<script>
  var braintree_client_token = "{{ client_token}}";
  var button = document.querySelector('#submit-button');

  braintree.dropin.create({
    authorization: "{{client_token}}",
    container: '#braintree-dropin',
    card: {
      cardholderName: {
          required: false
      }
    }
  }, function (createErr, instance) {
      button.addEventListener('click', function () {
          instance.requestPaymentMethod(function (err, payload) {
              $.ajax({
                  type: 'POST',
                  url: '{% url "payment:process" %}',
                  data: {
                    'paymentMethodNonce': payload.nonce,
                    'csrfmiddlewaretoken': '{{ csrf_token }}'}
              }).done(function (result) {
                 //do accordingly
              });
          });
      });
  });
</script>

{% endblock %}

在 付款/views.py

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

正如您所注意到的，我们正在使用 Ajax 结果成功后，你应该做点什么。希望它有帮助