Ionic framework 离子液体中的Braintree滴入容器

我正在尝试将Braintree支付插件集成到Ionic移动应用程序中。根据Braintree文档和我在网上找到的一些代码示例，以下代码是我迄今为止设法想到的，但似乎不起作用：

controller.js

.controller('CheckoutForm', function($scope, $window) {
  $scope.clientToken = "<token generated by the server>"

  $scope.renderCheckout = function() {
    braintree.setup($scope.clientToken, "dropin", {
      container: "payment-form"
      });
  }
})

.controller（'CheckoutForm'，函数（$scope，$window）{
$scope.clientToken=“”
$scope.renderCheckout=函数（）{
setup（$scope.clientToken，“dropin”{
集装箱：“付款单”
});
}
})

template.html

<div>
  Payment details:
  <form id="checkout">
    <div id="payment-form" onLoad="renderCheckout()"></div>
  </form>
</div>

付款详情：

我还在index.html中包含了以下行：

<script src="https://js.braintreegateway.com/js/braintree-2.23.0.min.js"></script>

---

我对爱奥尼亚和HTML5/JS的开发基本上是陌生的，所以我非常感谢您的帮助。

忘记onload函数吧。只需在控制器中执行此操作

var clientToken = "eyJ2ZXJzaW9uIjoyLCJhdXRob3JpemF0aW9uRmluZ2VycHJpbnQiOiIyMTUwYzJiOWYyODdlMmZmMzUyZWQxZmMyMDFiNjY3ZDE5OGNhMjEwNjAyYmYzNzI1NmVmNDIzMWY0Yjg3OGNmfGNyZWF0ZWRfYXQ9MjAxNi0wNC0yOFQwNjoyODo1My43NjM0MjY0MzYrMDAwMFx1MDAyNm1lcmNoYW50X2lkPTM0OHBrOWNnZjNiZ3l3MmJcdTAwMjZwdWJsaWNfa2V5PTJuMjQ3ZHY4OWJxOXZtcHIiLCJjb25maWdVcmwiOiJodHRwczovL2FwaS5zYW5kYm94LmJyYWludHJlZWdhdGV3YXkuY29tOjQ0My9tZXJjaGFudHMvMzQ4cGs5Y2dmM2JneXcyYi9jbGllbnRfYXBpL3YxL2NvbmZpZ3VyYXRpb24iLCJjaGFsbGVuZ2VzIjpbXSwiZW52aXJvbm1lbnQiOiJzYW5kYm94IiwiY2xpZW50QXBpVXJsIjoiaHR0cHM6Ly9hcGkuc2FuZGJveC5icmFpbnRyZWVnYXRld2F5LmNvbTo0NDMvbWVyY2hhbnRzLzM0OHBrOWNnZjNiZ3l3MmIvY2xpZW50X2FwaSIsImFzc2V0c1VybCI6Imh0dHBzOi8vYXNzZXRzLmJyYWludHJlZWdhdGV3YXkuY29tIiwiYXV0aFVybCI6Imh0dHBzOi8vYXV0aC52ZW5tby5zYW5kYm94LmJyYWludHJlZWdhdGV3YXkuY29tIiwiYW5hbHl0aWNzIjp7InVybCI6Imh0dHBzOi8vY2xpZW50LWFuYWx5dGljcy5zYW5kYm94LmJyYWludHJlZWdhdGV3YXkuY29tLzM0OHBrOWNnZjNiZ3l3MmIifSwidGhyZWVEU2VjdXJlRW5hYmxlZCI6dHJ1ZSwicGF5cGFsRW5hYmxlZCI6dHJ1ZSwicGF5cGFsIjp7ImRpc3BsYXlOYW1lIjoiQWNtZSBXaWRnZXRzLCBMdGQuIChTYW5kYm94KSIsImNsaWVudElkIjpudWxsLCJwcml2YWN5VXJsIjoiaHR0cDovL2V4YW1wbGUuY29tL3BwIiwidXNlckFncmVlbWVudFVybCI6Imh0dHA6Ly9leGFtcGxlLmNvbS90b3MiLCJiYXNlVXJsIjoiaHR0cHM6Ly9hc3NldHMuYnJhaW50cmVlZ2F0ZXdheS5jb20iLCJhc3NldHNVcmwiOiJodHRwczovL2NoZWNrb3V0LnBheXBhbC5jb20iLCJkaXJlY3RCYXNlVXJsIjpudWxsLCJhbGxvd0h0dHAiOnRydWUsImVudmlyb25tZW50Tm9OZXR3b3JrIjp0cnVlLCJlbnZpcm9ubWVudCI6Im9mZmxpbmUiLCJ1bnZldHRlZE1lcmNoYW50IjpmYWxzZSwiYnJhaW50cmVlQ2xpZW50SWQiOiJtYXN0ZXJjbGllbnQzIiwiYmlsbGluZ0FncmVlbWVudHNFbmFibGVkIjp0cnVlLCJtZXJjaGFudEFjY291bnRJZCI6ImFjbWV3aWRnZXRzbHRkc2FuZGJveCIsImN1cnJlbmN5SXNvQ29kZSI6IlVTRCJ9LCJjb2luYmFzZUVuYWJsZWQiOmZhbHNlLCJtZXJjaGFudElkIjoiMzQ4cGs5Y2dmM2JneXcyYiIsInZlbm1vIjoib2ZmIn0=";

// Client token above is just for testing and provided by Braintree for testing purposes

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

然后在html中：

<form id="checkout">
  <div id="payment-form"></div>
</form>

对于移动设备，请记住使用cordova白名单插件添加适当的内容安全策略和白名单

CSP文件：

Cordova白名单插件的文档：

---

thepio建议的内容仅用于测试。但正确的方法可能是在服务器上生成客户机令牌。然后，你的Ionic应用程序将发布并从你的服务器获取客户端令牌。然后，一旦生成了付款通知，您就可以将付款数据发布到服务器以处理付款

检查这个示例实现。

---

我认为提问者意识到了这一点，因为他/她在问题中写了

$scope.clientToken=“”

。在我的回答中，我刚刚澄清了我回答中的令牌只是为了测试目的：）谢谢你的评论！是的，我正在我的服务器上生成令牌，这就是移动应用程序请求令牌的地方。感谢您提供cordova白名单插件。这是否适合与braintree插件的导入模块一起使用，还是严格与cordova braintree插件一起使用？