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#/

提交表单时，我需要这个角度来触发带有这个令牌的范围函数。我怎样才能实现这样的目标？

$scope.checkout = function(token) {
  <do stuff with the token>
}

谢谢你。

4

2 回答 2

7

Stripe 提供了Stripe Checkout 的“自定义集成”。这允许您从 javascript 启动结帐并在结帐时取回令牌。

于 2016-01-21T20:32:05.343 回答
3

我刚刚写了一篇关于此的博客文章，其中包含所有必要的细节。

这是使用 angularJS 将 Stripe Checkout 集成到您的网页中的一种简单方法。

首先，在您的 HTML 中，在 head 标签内添加 Stripe 脚本引用：

<head>
    [angularJS includes here]
    <script type="text/javascript" src="https://checkout.stripe.com/checkout.js"></script>
</head>

接下来，在正文中声明一个带有 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
        });
    };

而已！

于 2017-12-25T06:16:19.617 回答