我正在尝试将 Braintree Payments 插件集成到 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"
});
}
})
模板.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>
总的来说,我对 Ionic 和 HTML5/JS 开发很陌生,因此非常感谢任何帮助。
最佳答案
忘记 onload 函数。只需在您的 Controller 中执行此操作。
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-whitelist-plugin 添加适当的内容安全策略和白名单。
CSP 文档:https://developers.braintreepayments.com/reference/client-reference/javascript/v2/best-practices#using-braintree.js-with-a-content-security-policy
Cordova 白名单插件的文档:
https://cordova.apache.org/docs/en/latest/guide/appdev/whitelist/index.html
关于ionic-framework - ionic 中的 Braintree Drop-in 容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36898933/