0

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

有效！但是，我想使用 AngularJS 而不是 JQuery。我想将这部分 JQuery 代码从 JQuery 转换为 AngularJS：

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();

  }
 }

如果有人可以提供帮助，我将不胜感激。谢谢。:)

4

1 回答 1

0

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

  1. 使用“angular-payments.js”。你可以在这里找到它：https ://github.com/laurihy/angular-payments

您必须使用存储库文档中的卡片详细信息的 html 语法。

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

  1. 最后，您可以看到正在与我的 api 对话的“CardService”——该服务在粘贴代码的开头进行了初始化。

这是主要思想。我决定不讲太多细节。但我会尽量回答问题（如果有的话）。

于 2016-09-07T13:49:33.460 回答