条纹与angularJS集成

问题描述 投票:3回答:2

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

谢谢。

javascript angularjs stripe-payments stripe-connect
2个回答
7
投票

条纹提供"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
        });
    };

而已!

© www.soinside.com 2019 - 2024. All rights reserved.