带有 angularJS 集成的条带

我正在尝试使用 AngularJS 实现 Stripe。在html中，a介绍了他们用于结帐的代码片段：

<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>
}

谢谢。

Stripe

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

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

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

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

<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
        });
    };

就是这样！

相关内容

最新更新

热门标签：