我正在尝试使用AngularJS实现Stripe。在一个html中,他们介绍了他们的结帐代码片段:
<form>
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="<pk_key>"
data-amount="100"
data-name="name"
data-description="description"
data-image="img.png"
data-locale="auto">
</script>
</form>
现在,在提交结帐表单后,我希望有一个令牌。结帐表单将我的网址更改为以下内容:
<path>/?stripeToken=tok_17VlKKLZ8lYIAVgOX7viLFlm&stripeTokenType=card&stripeEmail=mihai.t.pricop%40gmail.com#/
当表单被提交时,我需要这个angular来使用此标记触发范围函数。我怎样才能实现这样的目标?
$scope.checkout = function(token) {
<do stuff with the token>
}
谢谢。
条纹提供"custom integration"条纹结账。这允许您从javascript启动结帐并在结帐时返回令牌。
我刚刚写了一篇关于这个的blog article以及所有必要的细节。
这是使用angularJS将Stripe Checkout集成到您的网页的简单方法。
首先,在HTML中添加head标记内的Stripe脚本引用:
<head>
[angularJS includes here]
<script type="text/javascript" src="https://checkout.stripe.com/checkout.js"></script>
</head>
接下来,在body中声明一个带有ng-click处理程序的链接或按钮,以调用控制器中的方法:
<a href="" ng-click="onStripe('<%= StripeConstants.PUBLIC_API_KEY %>', '<%= request.getAttribute("email") %>')">Stripe Checkout via angularjs</a>
*注意:我的页面是一个JSP,因为我的用户已经登录,所以我知道了这封电子邮件,所以我将其推送到请求对象并将其拉入我的JSP页面。同样,我从位于我的服务器上的属性文件加载我的Stripe公钥(加密)。再次,我将它拉入我的JSP,然后将用户的电子邮件和Stripe公钥传递给我的控制器中的单击处理程序。
这就是HTML页面。现在转到控制器。
您需要两个函数 - 用于调用Stripe Checkout的单击处理程序和一个用表示付款详细信息的标记来处理Stripe回调的函数。
// stripe will call this once it has successfully created a token for the payment details
$scope.onToken = function(token) {
console.log(token);
// now call a service to push the necessary token info to the server to complete the checkout processing
};
$scope.onStripe = function(apiKey, userEmail) {
var handler = StripeCheckout.configure({
key: apiKey,
image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
locale: 'auto',
token: $scope.onToken
});
handler.open({
panelLabel : 'Subscribe',
amount : 4995,
name : 'My Product Name here',
description : '$49.95 Monthly Subscription',
email : userEmail,
zipCode : true,
allowRememberMe : false
});
};
而已!