Page 227 - AngularJS权威教程

18.23 使用 Stripe 207

<span ng-bind="errors"></span> 1
<span>Card Number</span>
<input type="text"
ng-minlength="16"
ng-maxlength="20" 2
size="20"
data-stripe="number"
ng-model="charge.number" /> 3
<span>CVC</span>
<input type="text"
ng-minlength="3"
ng-maxlength="4" 4
data-stripe="cvc"
ng-model="charge.cvc" />
<span>Expiration (MM/YYYY)</span> 5
<input type="text"
ng-minlength="2"
ng-maxlength="2"
size="2" 6
data-stripe="exp_month"
ng-model="charge.exp_month" />
<span> / </span> 7
<input type="text"
ng-minlength="4"
ng-maxlength="4"
size="4" 8
data-stripe="exp-year"
ng-model="charge.exp_year" />
<input type="hidden" 9
name="email"
value="user.email" />
<button type="submit">Submit Payment</button>
</form> 10
</div>
我们几乎是完全把作用域上的charge对象绑定到表单了，在创建费用时，会用到它。 11

这个表单自身提交到控制器作用域上的submitPayment()函数。submitPayment()函数如下
所示： 12

// ...
$scope.submitPayment = function() { 13
UserService
.createPayment($scope.currentItem, $scope.charge)
.then(function(data) {
$scope.showCC = false; 14
});
}
// ... 15
为了能接受费用，我们不得不做的最后一件事是实现UserService上的createPayment()方法。
现在，既然我们是在客户端做支付，从技术上讲是不可能处理支付的，只能接受stripeToken。 16
可以设置一个后台进程来管理Stripe令牌到真实支付的转变。

在createPayment()函数中，我们需要调用StripeService来生成一个stripeToken。然后， 17
我们把这个支付添加到一个Amazon SQS队列中，这样后台进程可以创建费用。

首先，我们使用AWS服务来访问SQS队列。 18