Question

我正在使用ASP.NET，HTML，AngularJS和Stripe.NET处理卡处理API。我对所有人都很陌生。我按照Stripe网站上的文档将Stripe令牌发送到服务器（这里）：https://stripe.com/docs/stripe.js#card-validateCardNumber

有效！但是，我想使用AngularJS而不是JQuery。我想从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

我能够回答我的问题（前一段时间，只是找到时间在这里回答）。首先，这里有一些提示：

使用“angular-payments.js”。您可以在此处找到它：https://github.com/laurihy/angular-payments

您必须使用html语法来获取卡详细信息，如存储库文档中那样。

它与Stripe文档中的不同。我使用了AngularJS服务，以便可以将我的令牌传递给我的ASP.NET应用程序。
第三，我在验证令牌方面遇到了问题 - 这里有一篇关于如何处理它的好文章：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”。）

最后，你可以看到与我的api交谈的“CardService” - 该服务在粘贴代码的开头初始化。

这是主要的想法。我决定不再详细介绍。但我会尝试回答问题（如果有的话）。

AngularJS和Stripe：将令牌发送到服务器，将令牌插入表单

1 个答案: