带 angularJS 集成的条纹

Question

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

现在，在提交结账表格后，我需要一个令牌。结帐表格将我的 url 更改为如下内容：

<path>/?stripeToken=tok_17VlKKLZ8lYIAVgOX7viLFlm&stripeTokenType=card&stripeEmail=mihai.t.pricop%40gmail.com#/

我需要此 angular 以在提交表单时使用此令牌触发范围功能。我怎样才能实现这样的目标？

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

谢谢。

Answer 1

Stripe 提供 "custom integration" 的 Stripe Checkout。这允许您从 javascript 启动结帐并在结帐时取回令牌。

Answer 2

我刚刚写了一个 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>

接下来，在正文中声明一个 link 或带有 ng-click 处理程序的按钮以调用控制器中的方法：

<a href="" ng-click="onStripe('<%= StripeConstants.PUBLIC_API_KEY %>', '<%= request.getAttribute("email") %>')">Stripe Checkout via angularjs</a>

*注意：我的页面是 JSP，因为我的用户已经登录，所以我知道电子邮件，所以我将其推送到请求对象并将其拉入我的 JSP 页面。同样，我从位于我的服务器上的属性文件加载我的 Stripe public 密钥（加密）。同样，我将其放入我的 JSP，然后将用户的电子邮件和 Stripe public 键都传递到我控制器中的点击处理程序。

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 : '.95 Monthly Subscription',
            email : userEmail,
            zipCode : true,
            allowRememberMe : false
        });
    };

就是这样！

带 angularJS 集成的条纹

Stripe with angularJS integration

javascript

angularjs

stripe-payments

stripe-connect