AngularJS 및 Stripe : 토큰을 서버로 보내서 양식에 토큰을 삽입하십시오.

Question

ASP.NET, HTML, AngularJS 및 Stripe.NET을 사용하는 카드 처리 API를 작성 중입니다. 나는 그들 모두에게 꽤 새로운 사람이다. 스트라이프 토큰을 서버 (여기)에 전송하는 문서를 따랐습니다. https://stripe.com/docs/stripe.js#card-validateCardNumber

효과가있었습니다. 그러나 JQuery 대신 AngularJS를 사용하려고합니다. 나는 JQuery와 코드의 AngularJS와이 부분에 JQuery와 변환 할 : 누군가가 도움을 줄 수있는 경우

Stripe.card.createToken({ 
    number: $('.card-number').val(), 
    cvc: $('.card-cvc').val(), 
    exp_month: $('.card-expiry-month').val(), 
    exp_year: $('.card-expiry-year').val(), 
    address_zip: $('.address_zip').val() 
}, stripeResponseHandler); 


function stripeResponseHandler(status, response) { 

    // Grab the form: 
    var $form = $('#payment-form'); 

    if (response.error) { // Problem! 

    // Show the errors on the form 
    $form.find('.payment-errors').text(response.error.message); 
    $form.find('button').prop('disabled', false); // Re-enable submission 

    } else { // Token was created! 

    // Get the token ID: 
    var token = response.id; 

    // Insert the token into the form so it gets submitted to the server: 
    $form.append($('<input type="hidden" name="stripeToken" />').val(token)); 

    // Submit the form: 
    $form.get(0).submit(); 

    } 
} 

, 나는 그에게 많은 감사합니다. 감사. :)

Answer 1

나는 내 질문에 대답 할 수 있었다. (잠시 전에, 여기에 답을 할 시간이있다). 먼저 여기에 도움말이 있습니다.

1. "angular- payments.js"를 사용하십시오. 여기에서 찾을 수 있습니다 : https://github.com/laurihy/angular-payments

리포지토리 설명서와 같이 카드 세부 정보에 대해 html 구문을 사용해야합니다.

2. 스트라이프 설명과 동일하지 않습니다. AngularJS 서비스를 사용하여 내 토큰을 ASP.NET 응용 프로그램에 전달할 수 있습니다.
3. 셋째, 나는 확인 토큰에 대한 문제가 있었다 - 여기를 처리하는 방법에 대한 좋은 게시물입니다 : 여기 http://blog.novanet.no/anti-forgery-tokens-using-mvc-web-api-and-angularjs/

는 (의 일부) 내 (AngularJS와) 코드 :

(function() { 
     var app = angular.module("myApp", ["angularPayments"]); 

     app.service('Service', function ($http) { 
      this.AddCard = function (stripeToken, stripeEmail) { 
       var tokenData = { 
        "stripeToken": stripeToken, 
        "stripeEmail": stripeEmail 
       }; 

       $http.post("http://localhost:48484/payment/card", tokenData).success(function (response) { 
        window.location = '/cardprocess/confirmation'; 
       }) 
      }; 
     }); 

     app.directive('ncgRequestVerificationToken', ['$http', function ($http) { 
      return function (scope, element, attrs) { 
       $http.defaults.headers.common['RequestVerificationToken'] = attrs.ncgRequestVerificationToken || "no request verification token"; 
      }; 
     }]); 

     app.controller("myCtrl", ['$scope', myCtrl]); 
     app.controller("buyCtrl", function ($scope, CardService) { 

      $scope.submit = function() { 
       $scope.processing = true; 
      } 

      $scope.stripeFormSubmit = function (code, result) { 
       $scope.processing = false; 
       $scope.hideAlerts(); 
       if (result.error) { 
        $scope.stripeError = result.error.message; 
       } else { 
        //$scope.stripeToken = result.id; 
        $scope.stripeToken = result.id; 
        CardService.AddCard($scope.stripeToken, $scope.stripeEmail); 
       } 
      }; 

      $scope.hideAlerts = function() { 
       $scope.stripeError = null; 
       $scope.stripeToken = null; 
      }; 
     }); 

    }()); 

(html 페이지가 꽤 크기 때문에 여기에 넣지 않기로 결정했습니다. 곧 바로 앞으로 나옵니다. AngularJS 모델 "stripeFormSubmit"을 호출하는 양식이 있습니다.)

4. 마지막으로 , 당신은 "CardService" , 내 api 얘기하고있다 - 서비스는 붙여 넣기 코드의 시작 부분에 초기화됩니다.

주요 아이디어입니다. 나는 많은 세부 사항에 가지 않기로 결정했다. 그러나 나는 질문에 대답하려고 노력할 것이다.