Проблемы с интеграцией Javascript в Braintree - проблема с braintree.Environment.Sandbox undefined?

Question

Я пытаюсь интегрировать решение для оплаты Braintree с помощью Javascript & Узел JS.

Согласно документации Braintree, я следующий в моем HTML:

  <div id="panel-payment"> 
       <div id="payment-form"></div> 
       <input id="btn-checkout" type="submit" value="Process Order"> 
      </div> 
      <script> 
      $(document).ready(function(){ 

       console.log(braintree); <---- defined AOK 
       console.log(braintree.Environment); <---- undefined 
       console.log(braintree.Environment.Sandbox); <---- undefined 

       var clientToken = "..."; 
       braintree.setup(clientToken, "dropin", { 
        container: $("#payment-form") 
       }); 
      }); 
      </script> 

Я не могу получить переменное окружение, но объект Брэйнтри кажется, инстанцирует штраф? У кого-нибудь есть идеи?

Объект Брэйнтри возвращается:

Object {api: Object, cse: Object, paypal: Object, dropin: Object, Form: Object…} 

Я также получить Страшный «Не удалось найти правильный контейнер», когда я вызываю функцию braintree.setup(), даже несмотря на стоимость контейнера $ ("# payment- form ") является допустимым значением, и я вызываю функцию настройки при загрузке HTML.

Answer 1

Переменная Environment доступна только в пакете NodeJS. См. here.

Для клиентской стороны в javascript вам нужен действующий токен, сгенерированный вашим сервером. Таким образом, вам нужен выделенный маршрут, доставляющий токен с пакетом узлов Braintree, как описано here.

И для проблемы с контейнером попробуйте передать только id div в braintree, а не элемент jQuery.

braintree.setup(clientToken, "dropin", { 
    container: "payment-form" 
}); 

Answer 2

^{Полное раскрытие: я работаю в Braintree. Если у вас есть дополнительные вопросы, не стесняйтесь contact support.}

Ответ @ chambo_e правилен в отношении разницы между атрибутами, доступными в пакете узлов, по сравнению с Braintree.js. Атрибут окружения доступен только в модуле узла Braintree.

Я предполагаю, что ошибка, которую вы на самом деле видите, - «Невозможно найти недействительный FORM», и это связано с тем, что ваши формы оплаты не входят в элемент формы. По умолчанию Braintree.js looks for the nearest parent form.

<form id="checkout" method="post" action="/checkout"> 
    <div id="panel-payment"> 
     <div id="payment-form"></div> 
     <input id="btn-checkout" type="submit" value="Process Order"> 
    </div> 
</form> 

<script src="https://js.braintreegateway.com/v2/braintree.js"></script> 
<script> 
    $(document).ready(function(){ 
    var clientToken = "client token generated form server"; 
    braintree.setup(clientToken, "dropin", { 
     container: $("#payment-form") 
    }); 
    }); 
</script> 

Если вы хотите использовать его в другом формате, вы можете указать его в установочном вызове. См. these docs for more details

<div id="dropin-container"></div> 
<form id="checkout-form"> 
    <input type='submit' value='Pay'/> 
</form> 

<script> 
    braintree.setup("CLIENT-TOKEN-FROM-SERVER", "dropin", { 
    container: "dropin-container", 
    form: "checkout-form" 
    }); 
</script>