在 AngularJS 中加载 StripeCheckout

Question

我正在尝试在我的控制器中使用 StripeCheckout。脚本加载后 StripeCheckout 附加到 window 对象，所以我创建了一个提供者，它应该 return 该对象：

angular.module('organization.settings').controller('OrganizationSettingsCtrl', [ '$scope', 'StripeCheckout', 'organization',
    function($scope, StripeCheckout, data) {
 ...
}]).provider('StripeCheckout', function ProvideStripeCheckout() {
  var provider = {};

  provider.$get = function( $window ) {
    return $window.StripeCheckout;
  };

  return provider;
});

上面的代码在没有缩小的情况下工作正常，但是一旦代码被缩小，我就会遇到以下异常：

Error: [$injector:unpr] Unknown provider: aProvider <- a <- StripeCheckout <- StripeCheckout
http://errors.angularjs.org/1.3.15/$injector/unpr?p0=aProvider%20%3C-%20a%20%3C-%20StripeCheckout%20%3C-%20StripeCheckout
at https://localhost:3000/app.min.js:3:20639
at https://localhost:3000/app.min.js:4:6662
at Object.d [as get] (https://localhost:3000/app.min.js:4:5832)
at https://localhost:3000/app.min.js:4:6759
at d (https://localhost:3000/app.min.js:4:5832)
at Object.e [as invoke] (https://localhost:3000/app.min.js:4:6169)
at https://localhost:3000/app.min.js:4:6779
at d (https://localhost:3000/app.min.js:4:5832)
at e (https://localhost:3000/app.min.js:4:6169)
at Object.f [as instantiate] (https://localhost:3000/app.min.js:4:6294) <div ng-view="" class="container ng-scope">

Answer 1

根据Checkout Reference：

Note: Checkout must be loaded from https://checkout.stripe.com/checkout.js. Using a local copy of Checkout is unsupported, and may result in user-visible errors.

因此，当我将 <script src="https://checkout.stripe.com/checkout.js"></script> 放置到我的索引页面时，它在缩小后被删除了。

解决方案是从控制器将脚本动态附加到页面主体：

angular.module('organization.settings').config(['$routeProvider', 'securityAuthorizationProvider', function($routeProvider, securityAuthorizationProvider){

var script = document.createElement('script');
script.src = 'https://checkout.stripe.com/checkout.js';
document.body.appendChild(script);
script.onload = function () {
  console.log("StripeCheckout loaded");
};

并创建工厂以稍后检索 StripeCheckout 对象：

angular.module('organization.settings').controller('OrganizationSettingsCtrl', [ '$scope', 'Upload', 'utility', 'StripeCheckout', function($scope, Upload, utility, StripeCheckout) {

  var handler = StripeCheckout.configure({
  ...
  });
...
}]).factory('StripeCheckout', ['$window', function ($window) {
  return $window.StripeCheckout;
}]);

在 AngularJS 中加载 StripeCheckout

Load StripeCheckout in AngularJS

angularjs

stripe-payments