首页 文章

条纹与angularJS集成

提问于
浏览
3

我正在尝试使用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>
}

谢谢 .

2 回答

  • 7

    Stripe提供"custom integration"条纹结帐 . 这允许您从javascript启动结帐并在结帐时返回令牌 .

  • 3

    我刚刚用所有必要的细节写了一篇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
            });
        };
    

    而已!

相关问题