angularjsで正方形接続を行うにはどうしたらいいですか？

Question

SquareUpのドキュメント（https://github.com/square/connect-api-examples.git）の例を参考にしてください。 CCで支払いを処理するためにスクエアアップを統合しようとしていますが、何が起こるのかわかりません。

ビュー：

<div class="bg-light lter b-b wrapper-md"> 
    <h1 class="m-n font-thin h3"></h1> 
</div> 
<div class="wrapper-md" > 
    <div class="row"> 

    <div class="col-sm-6"> 
     <div class="panel panel-default"> 
     <div class="panel-heading font-bold">CC info</div> 
     <div class="panel-body"> 
      <div class="no-boot" ng-controller="PaymentController" ng-cloak> 
      <div id="successNotification" ng-show="isPaymentSuccess"> 
       Card Charged Succesfully!! 
      </div> 

      <form novalidate id="payment-form" ng-hide="isPaymentSuccess"> 

       <div id="card-errors" ng-repeat="error in card_errors"> 
       <li>{{error.message}}</li> 
       </div> 

       <div> 
       <label>Card Number</label> 
       <div ng-model="data.card.card_number" id="sq-card-number"></div> 
       </div> 

       <div> 
       <label>CVV</label> 
       <div ng-model="data.card.cvv" id="sq-cvv"></div> 
       </div> 

       <div> 
       <label>Expiration Date</label> 
       <div ng-model="data.card.expiration_date" id="sq-expiration-date"></div> 
       </div> 

       <div> 
       <label>Postal Code</label> 
       <div ng-model="data.card.postal_code" id="sq-postal-code"></div> 
       </div> 

       <div> 
       <input ng-click="submitForm()" ng-disabled="isProcessing" type="submit" id="submit" value="Buy Now" class="btn btn-primary"> 
       </div> 

      </form> 

       <button id="sq-apple-pay" class="button-apple-pay-block" ng-show="supportApplePay"></button> 
      </div> 

     </div> 
     </div> 
    </div> 
    </div> 
</div> 

コントローラ：

'use strict'; 

/* Controllers */ 
    // signin controller 
app.controller('PaymentController', ['$scope', '$http', function($scope, $http) { 
    //for showing #successNotification div 
    $scope.isPaymentSuccess = false; 

    //for disabling payment button 
    $scope.isProcessing = false; 
    //for disabling apple pay button 
    $scope.supportApplePay = false; 

    $scope.data = { 
     product_id: "001", 
     user: {}, 
     card: {}, 
     products: { 
     "001": { 
      "name": "Paper Origami 1:10,000 scale model (11 inch)", 
      "value":"1.0", 
     }, 
     "002": { 
      "name": "Plastic 1:5000 scale model (22 inch)", 
      "value":"49.0", 
     }, 
     "003": { 
      "name": "Metal & Concrete 1:1000 scale replica (9 feet)", 
      "value":"5000.0", 
     } 
     } 
    }; 

    $scope.submitForm = function(){ 
     console.log($scope.data) 
     $scope.isProcessing = true; 
     $scope.paymentForm.requestCardNonce(); 
     return false 
    } 


    var cardNumber = $scope.data.card.card_number = 5409889944179029; 
    var cvv = $scope.data.card.cvv = 111; 
    var expirationDate = $scope.data.card.expirationDate = '02/21'; 
    var postalCode = $scope.data.card.postalCode = 3311; 

    $scope.paymentForm = new SqPaymentForm({ 
     applicationId: 'sandbox-sq0idp-IsHp4BXhhVus21G5JPyYpw', 
     locationId: 'CBASECJCvmqtoIL1fn3iReEjQRcgAQ', 
     inputClass: 'sq-input', 
     inputStyles: [ 
      { 
      fontSize: '14px', 
      padding: '7px 12px', 
      backgroundColor: "transparent" 
      } 
     ], 
     cardNumber: { 
     elementId: 'sq-card-number', 
     placeholder: '5409889944179029', 
     value: '5409889944179029' 
     }, 
     cvv: { 
     elementId: 'sq-cvv', 
     placeholder: '111', 
     value: '111' 
     }, 
     expirationDate: { 
     elementId: 'sq-expiration-date', 
     placeholder: '04/21', 
     value: '04/21' 
     }, 
     postalCode: { 
     elementId: 'sq-postal-code', 
     placeholder: '33114', 
     value: '33114' 
     }, 
     applePay: { 
     elementId: 'sq-apple-pay' 
     }, 
     // cardNumber:''+cardNumber, 
     // cvv:''+cvv, 
     // expirationDate:''+expirationDate, 
     // postalCode:''+postalCode, 
     callbacks: { 
     cardNonceResponseReceived: function(errors, nonce, cardData) { 
      if (errors){ 
      $scope.card_errors = errors 
      $scope.isProcessing = false; 
      $scope.$apply(); // required since this is not an angular function 
      }else{ 
      $scope.card_errors = [] 
      $scope.chargeCardWithNonce(nonce); 
      } 

     }, 
     unsupportedBrowserDetected: function() { 
      // Alert the buyer 
     }, 
     methodsSupported: function (methods) { 
      console.log(methods); 
      $scope.supportApplePay = true 
      $scope.$apply(); // required since this is not an angular function 
     }, 
     createPaymentRequest: function() { 
      var product = $scope.data.products[$scope.data.product_id]; 
      return { 
      requestShippingAddress: true, 
      currencyCode: "USD", 
      countryCode: "US", 
      total: { 
       label: product["name"], 
       amount: product["value"], 
       pending: false, 
      } 
      }; 
     }, 
     // Fill in these cases to respond to various events that can occur while a 
     // buyer is using the payment form. 
     inputEventReceived: function(inputEvent) { 
      switch (inputEvent.eventType) { 
      case 'focusClassAdded': 
       // Handle as desired 
       break; 
      case 'focusClassRemoved': 
       // Handle as desired 
       break; 
      case 'errorClassAdded': 
       // Handle as desired 
       break; 
      case 'errorClassRemoved': 
       // Handle as desired 
       break; 
      case 'cardBrandChanged': 
       // Handle as desired 
       break; 
      case 'postalCodeChanged': 
       // Handle as desired 
       break; 
      } 
     } 
     } 
    }); 

    $scope.chargeCardWithNonce = function(nonce) { 
     alert("no"); 
     var url = "libs/php_payment/process-card.php"; 

     var data = { 
     nonce: nonce, 
     product_id: $scope.data.product_id, 
     name: $scope.data.user.name, 
     email: $scope.data.user.email, 
     street_address_1: $scope.data.user.street_address_1, 
     street_address_2: $scope.data.user.street_address_2, 
     city: $scope.data.user.city, 
     state: $scope.data.user.state, 
     zip: $scope.data.user.zip 
     }; 
     $http.post(url, data).success(function(data, status) { 
     if (data.status == 400){ 
      // display server side card processing errors 
      $scope.isPaymentSuccess = false; 
      $scope.card_errors = [] 
      for (var i =0; i < data.errors.length; i++){ 
      $scope.card_errors.push({message: data.errors[i].detail}) 
      } 
     }else if (data.status == 200) { 
      $scope.isPaymentSuccess = true; 
     } 
     $scope.isProcessing = false; 
     }).error(function(){ 
     $scope.isPaymentSuccess = false; 
     $scope.isProcessing = false; 
     $scope.card_errors = [{message: "Processing error, please try again!"}]; 
     }) 

    } 

    //build payment form after controller loads 
    var init = function() { 
     $scope.paymentForm.build() 
    }; 
    init(); 

    }]); 

error: "Error: [$rootScope:inprog] $digest already in progress

Answer 1

私はしばらくの角度行っていないが、私はあなたの問題がであることを賭けている：

methodsSupported: function (methods) { 
     console.log(methods); 
     $scope.supportApplePay = true 
     $scope.$apply(); // required since this is not an angular function 
    }, 

あなたはに電話しています210非asyc呼び出しの後に、通常、非同期に取得した新しいデータを適用します。 Angular Docs