Braintree Javascript 集成的问题 - Braintree.Environment.Sandbox 未定义错误？

Question

我正在尝试使用 Javascript 和 Node JS 集成 Braintree 支付解决方案。

根据 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>

我无法获取环境变量，但 Braintree 对象似乎可以正常实例化？有人有什么想法吗？

braintree 对象返回：

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

当我调用 Braintree.setup() 函数时，我也会得到可怕的“无法找到有效容器”，即使容器值 $("#payment-form") 是有效值并且我正在调用 setup 函数当 HTML 加载完毕时..

Answer 1

环境变量仅在 NodeJS 包中可用。 见here。

对于 javascript 中的客户端，您需要一个由您的服务器生成的有效令牌。 因此，您需要一条专用路由，使用 Braintree 节点包传递令牌，如 here 所述。

对于您的容器问题，请尝试仅将 div 的 id 传递给 Braintree，而不是 jQuery 元素。

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

Answer 2

^{完全披露：我在 Braintree 工作。如果您还有任何问题，请随时contact support。}

@chambo_e 关于节点包上可访问的属性与 Braintree.js 之间的差异的回答是正确的。 environment 属性仅在 Braintree 节点模块上可用。

我猜您实际看到的错误是“无法找到有效的表单”，这是因为您的付款表单没有包含在表单元素中。默认情况下，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>

如果您希望它使用不同的表单，您可以在 setup 调用中指定。见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>