Braintree Angular和Ionic自定义集成iframe问题

Question

我正在尝试将Braintree - Hosted Fields集成到离子应用程序中。目前我的实现在ionic serve浏览器上运行良好，但只要我在iOS模拟器/设备上运行它就会出现以下错误：

Blocked a frame with origin "https://assets.braintreegateway.com" from accessing
a frame with origin "file://".  The frame requesting access has a protocol of "https",
the frame being accessed has a protocol of "about". Protocols must match.

据我所知，混合应用程序并不完全支持braintree，因为它依赖于iframe（这似乎是导致我的问题），但我认为值得在这里寻求帮助。

背景：

我基于Jeff Carpenter's Braintree Angular repo（开发人员@Braintree）的实现。我分叉了repo，更新了braintree-web依赖项，并包含了一个新的指令来实现我对Braintree的自定义集成：

布伦特里-angular.js

// ...

braingular.directive('braintreeCustom', function() {
  return {
    restrict: 'A',
    scope: {
      options: '=braintreeCustom',
    },
    controller: function($scope, $braintree) {
      var options = $scope.options || {};
      $braintree.setupCustom(options);
    }
  }
});

// ...

$braintree.setupCustom = function(options) {
  $braintree.getClientToken().then(function(token) {
    braintree.setup(token, 'custom', options);
  }, function(error) {
    console.error('error fetching client token at '+clientTokenPath, error);
  });
}

然后设置客户端，我的控制器中有以下代码：

controller.js

vm.braintree = {
    options: {
        enableCORS: true,
        id: "bt-form",
        hostedFields: {
            styles: {
                'input': {
                  'font-size': '16pt',
                  'color': '#ffc900'
                },
            },
            onFieldEvent: _handleBraintreeEvents,
            number: {
                selector: '#hosted-fields-number',
            },
            expirationMonth: {
                selector: '#hosted-fields-expiration-month',
            },
            expirationYear: {
                selector: '#hosted-fields-expiration-year',
            },
            cvv: {
                selector: '#hosted-fields-cvv'
            }
        }
    }
};

//////////////////////////////////////////////


function _handleBraintreeEvents(event) {
    switch(event.type) {
        // case 'focus':
        case 'blur':
            console.log(event);
        case 'fieldStateChange':
            switch(event.target.fieldKey) {
                case 'number':
                    vm.btNumberValid = event.isValid;
                    break;
                case 'expirationMonth':
                    vm.btExpirationMonthValid = event.isValid;
                    break;
                case 'expirationYear':
                    vm.btExpirationYearValid = event.isValid;
                    break;
                case 'cvv':
                    vm.btCvvValid = event.isValid;
                    break;
                default:
                    break;
            }
            if (event.card) {
                console.log(event.card);
                vm.braintree.cardCode = event.card.code.name || 'CVV';
            }
            break;
        default:
            break;
    }

    $scope.$digest();
}

最后我的付款方式：

payment.html

<form id="bt-form" braintree-custom="vm.braintree.options">
  <ion-list>
    <div class="row">
      <div class="col col-67">
        <ion-item class="dir-rtl splash-input-label item-input item-stacked-label item-icon-left">
          <i ng-if="!vm.btNumberValid" class="icon ion-alert-circled assertive"></i>
          <span class="input-label">Card Number</span>
          <div id="hosted-fields-number" class="bt-hosted-field"></div>
        </ion-item>
      </div>
      <div class="col col-33">
        <ion-item class="dir-rtl splash-input-label item-input item-stacked-label item-icon-left">
          <i ng-if="!vm.btCvvValid" class="icon ion-alert-circled assertive"></i>
          <span class="input-label">{{vm.braintree.cardCode}} *</span>
          <div id="hosted-fields-cvv" class="bt-hosted-field"></div>
        </ion-item>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <ion-item class="dir-rtl splash-input-label item-input item-stacked-label item-icon-left">
          <i ng-if="!vm.btExpirationYearValid" class="icon ion-alert-circled assertive"></i>
          <span class="input-label">Exp. Year</span>
          <div id="hosted-fields-expiration-year" class="bt-hosted-field"></div>
        </ion-item>
      </div>
      <div class="col">
        <ion-item class="dir-rtl splash-input-label item-input item-stacked-label item-icon-left">
          <i ng-if="!vm.btExpirationMonthValid" class="icon ion-alert-circled assertive"></i>
          <span class="input-label">Exp. Month</span>
          <div id="hosted-fields-expiration-month" class="bt-hosted-field"></div>
        </ion-item>
      </div>
    </div>

  </ion-list>
</form>

我不太确定如何解决这个问题，因此任何建议或建议都将受到高度赞赏。