Braintree在Ionic中嵌入式容器

我正在嘗試將Braintree Payments嵌入式嵌入到Ionic移動應用程序中。基於布倫特裏文檔和一些代碼示例我能在網上找到的，下面的代碼是什麼我已經設法拿出這麼遠，但它似乎沒有工作：Braintree在Ionic中嵌入式容器

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" 
     }); 
    } 
})

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>

我對Ionic和HTML5/JS開發一般都很陌生，所以任何幫助都會很感激。

來源

2016-04-27 whtvr

忘記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>

對於移動記得添加適當的內容安全策略和白名單與科爾多瓦白名單的插件。

文檔的CSP：https://developers.braintreepayments.com/reference/client-reference/javascript/v2/best-practices#using-braintree.js-with-a-content-security-policy

的文檔科爾多瓦白名單插件： https://cordova.apache.org/docs/en/latest/guide/appdev/whitelist/index.html

來源

2016-04-28 06:34:52 thepio

似乎已經奏效！感謝您的幫助 – whtvr

感謝您使用cordova白名單插件。這可以使用braintree插件的導入模塊嗎？或者這是嚴格使用cordova braintree插件嗎？ –

什麼thepio「建議僅用於測試。但正確的方法可能是在您的服務器上生成客戶端令牌。然後您的Ionic應用程序將POST並從您的服務器獲取客戶端令牌。然後，一旦生成支付隨機數，您可以將您的支付數據發佈到您的服務器以處理付款。

檢查此示例實施。 https://github.com/demianborba/braintree-cordova-angular-node

來源

2016-05-01 18:50:48 rangma

我認爲問題提供者知道，因爲他/她在他的問題中編寫了'$ scope.clientToken =「<由服務器生成的。在我的回答中，我剛剛澄清說，我的答案中的令牌僅用於測試目的:) – thepio

感謝您的評論！是的，我在我的服務器上生成令牌，這就是移動應用程序請求的令牌。 – whtvr

Braintree在Ionic中嵌入式容器

回答

相關問題