布倫特裏JSv3 payment_method_nonce價值壞隨着HostedFields

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。我也使用布倫特裏使用HostedFields簡單的整合給出的example ...

小試

所以我手動在我的形式與名稱「payment_method_nonce」添加輸入字段只是爲了看看不有一個領域造成了一些問題。我知道它是由Braintree注入的，但只是測試一個想法。看起來，儘管payment_method_nonce的值應該是我的隨機數，但我沒有在輸入框中輸入任何內容，並且它仍然返回爲空。表格和

全部片段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...";不f ire（我知道這是因爲按鈕不會更改值）。也許這些querySelector行只是不工作？

新的東西注意的

我只是回到我的網頁，打，甚至沒有輸入任何信息的提交按鈕。在Braintree的v2中，我將無法點擊提交按鈕，直到所有字段被填充...也許我的表單中的值甚至沒有發送給braintree來接收一個隨機數，這就是爲什麼有一個空字符串被退回..？

Answer 1

這個故事的寓意

評論你的代碼......多次。正如C Joseph所指出的那樣，我的form ID與我的var form所引用的內容不同。

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

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