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 对象returns:

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

当我调用 braintree.setup() 函数时，我也得到了可怕的 "Unable to find valid container"，即使容器值 $("#payment-form") 是有效值并且我正在调用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 之间的区别的回答是正确的。环境属性仅在 Braintree 节点模块上可用。

我猜您实际看到的错误是 "Uncaught Unable to find a valid 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>

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

Problems with Braintree Javascript integration - braintree.Environment.Sandbox undefined error?

braintree

node.js