集成braintree引起的问题 - Integration of braintree causing issues

我第一次在Braintree上工作，在第一步就遇到了问题。我无法访问drop功能和其他…我需要人帮忙整理一下。

我遵循下面给出的步骤:https://developers.braintreepayments.com/javascript+php/start/overview

第一步是Javascript客户端!-我按照上面提到的，添加了脚本

 <script src="https://js.braintreegateway.com/v2/braintree.js"></script>

然后添加HTML部分

<form id="checkout" method="post" action="/checkout">
  <div id="dropin"></div>
  <input type="submit" value="Pay $10">
</form>

最后我在脚本标签中添加了下面的脚本。

braintree.setup("CLIENT_TOKEN_KEY", 'dropin', {
   container: 'checkout'
})

我已经检查了从我们的服务器获得的客户端令牌密钥。

对于下一步，我添加了前面提到的配置

Braintree_Configuration::environment('sandbox');
Braintree_Configuration::merchantId('use_your_merchant_id'); //updated with our merchant id
Braintree_Configuration::publicKey('use_your_public_key'); // updated with our public key
Braintree_Configuration::privateKey('use_your_private_key'); //updated with our private key

接着说

$clientToken = Braintree_ClientToken::generate(array(
   "customerId" => $aCustomerId 
));

现在，问题我得到 -

当我用我们的客户id更新$aCustomerId时，我得到了Braintree_ClientToken中未定义的"customer_id"字段的致命错误。因此，删除数组("customer"=>$aCustomerId)并获得客户端令牌..

该客户端令牌在brantree.setup('TOKEN_KEY','dropin',{container:'checkout'})中使用并获得

Error: Unable to find valid container. -braintree.js(line 18)

我也提到过一次var braintree = Braintree.create("CLIENT_TOKEN_KEY");在brantree.setup('TOKEN_KEY','dropin',{container:'checkout'})之上当时我得到了TypeError: braintree.setup is not a function

我试着把这从过去的两天中整理出来，但我仍然没有像演示中显示的那样掉落屏幕。

将所有脚本放在html/footer部分之后，这将起作用:

<?php
require_once 'braintree-php-2.30.0/lib/Braintree.php';
Braintree_Configuration::environment('sandbox');
Braintree_Configuration::merchantId('-----------');
Braintree_Configuration::publicKey('-----------');
Braintree_Configuration::privateKey('-----------');
if(isset($_POST['submit'])){
    /* process transaction */
    $result = Braintree_Transaction::sale(array(
     'amount' => '234.00',
     'creditCard' => array(
     'number' => '30569309025904',
     'expirationDate' => '05/14'
    )
  ));
if ($result->success) {
  print_r("success!: " . $result->transaction->id);
  } else if ($result->transaction) {
    print_r("Error processing transaction:");
    print_r("'n  code: " . $result->transaction->processorResponseCode);
    print_r("'n  text: " . $result->transaction->processorResponseText);
    } else {
      print_r("Validation errors: 'n");
      print_r($result->errors->deepAll());
    }
}
$clientToken = Braintree_ClientToken::generate();
?>
<html>
  <head>
  </head>
  <body>
    <div id="checkout" method="post" action="/checkout">
      <div id="dropin"></div>
      <input data-braintree-name="number" value="4111111111111111">
      <input data-braintree-name="expiration_date" value="10/20">
      <input type="submit" id="submit" value="Pay">
      <div id="paypal-button"></div>
    </div>  
  <!-- Scripts -->
  <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
  <script src="https://js.braintreegateway.com/v2/braintree.js"></script>
  <script>
    braintree.setup("<?php print $clientToken; ?>",  "dropin", { container:
    jQuery("#dropin") ,  form: jQuery("#checkout") , 
    paymentMethodNonceReceived: function (event, nonce) {
      // do something
      }
    });
  </script>
  </body>
</html>

我有这个问题，并通过将javascript放在页面末尾来解决它。另一种方法是将其包含在文档就绪测试中。

出现问题是因为braintree代码在加载脚本时试图找到容器。但是如果你的代码在文档的头部，容器不会被加载，所以它不会找到容器，你会得到一个错误。

关于base64_encoding的注释不正确。如果在容器加载后触发代码，而不需要重新编码已经编码的字符串，则可以完美地工作。

_{我在Braintree工作。如果您有更多问题，请随时联系我们的支持团队。}

如果JavaScript找不到您提供的容器，您看到的第一个错误Unable to find valid container.将被抛出。container可以接受的值是ID字符串、DOM节点或jQuery对象。您的示例代码应该可以工作，但如果不能，您可以尝试以不同的格式传递，例如{container: $('#dropin')}。

一旦你确定你在传递正确的容器，我还建议确保你在你的客户端令牌插入正确。如果您在页面上查看源代码，您的客户端令牌应该是一个base64编码的字符串。

您要确保您的<script src="https://js.braintreegateway.com/js/braintree-2.32.1.min.js"></script>尽可能接近页面底部。就在你的标签上方，如果可能的话。这让浏览器有时间加载DOM和，然后加载Braintree SDK。

接下来你要指定"容器"通过将container属性传递给setup()方法。像这样:

    let checkout;
    braintree.setup('CLIENT_TOKEN_KEY', 'dropin', {
        container: document.getElementById('dropin'),  // <- This line here.
        onReady: function (integration) {
            checkout = integration;
            console.log(checkout)
        }
    });