如何爲新客戶爲dropin UI生成#Braintree客戶端令牌

Question

我已設置引導程序站點並希望將dropin UI置於modal box之內。

我被困在需要生成客戶端令牌的部分。我儘可能按照指南進行了操作，但我沒有使用ruby或節點或任何只是html頁面的東西。

有什麼方法可以讓我更深入地瞭解如何生成客戶端令牌？我應該使用節點嗎？我真的只需要一個按鈕，就是這樣。

編輯：我已經添加了一切，我目前除了頁面的其餘部分。我只是在模態中顯示它。

     <div class="modal fade" id="myModal" tabindex="-1"> 
          <div class="modal-dialog"> 
           <div class="modal-content"> 
            <div class="modal-header"> 
             <button class="close" data-dismiss="modal" type="button"><span>&times;</span> 
             </button> 

             <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
            </div> 

            <div class="modal-body"> 
             <form action="/checkout" id="checkout" method="post" name="checkout"> 
              <div id="dropin"> 
              </div> 
              <input class="btn btn-primary" type="submit" value="Pay $10"> 
             </form> 
             <script src="https://js.braintreegateway.com/v2/braintree.js"> 
              var gateway = braintree.connect({ 
               environment: braintree.Environment.Sandbox, 
               merchantId: 'xxx', 
               publicKey: 'xxx', 
               privateKey: 'xxx' 
              }); 

              gateway.clientToken.generate({}, function(err, response) { 
               var clientToken = response.clientToken 
              }); 

              gateway.transaction.sale({ 
               amount: '10.00', 
               paymentMethodNonce: 'nonce-from-the-client', 
              }, function(err, result) {}); 
             </script> 
             <script> 
              var 
               braintree.setup(
                "xxx", 
                'dropin', { 
                 container: 'dropin' 
                }); 
             </script> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 

Answer 1

披露：我布倫特裏工作:)

您將需要一個服務器爲您布倫特裏整合。如果您不想自己構建服務器端部件，可以使用Braintree的partners之一爲您提供後端，例如goodsie。

更新

您當前的代碼有服務器端和客戶端JS的混合。您需要使用braintree npm模塊在節點服務器上運行服務器端代碼（第一個腳本標記中的所有代碼），然後將clientToken打印到html模板中。然後，插件可以初始化 - 使用來自服務器的客戶端令牌 - 併發揮其魔力。