Question

我想将Angular与此Stripe付款模式一起使用。在脚本标记中没有分配任何价格变量。有没有办法用Angular做到这一点？

HTML

<div ng-app="app">
<div ng-controller="ctrl">
<form action="" method="POST">
  <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key="pk_test_" data-amount={{price}} data-name="Example Product" data-description="Example Product {{price}}" data-image="/128x128.png">
  </script>
   <br>Price ${{price}}
</form>
</div>
</div>

角：

var app = angular.module('app',[]);

function ctrl($scope) {
    $scope.price = "77";
}

示例：http://jsfiddle.net/ppq1orso/

Answer 1

您可以在控制器中设置属性，而不是使用脚本标记

您必须添加自定义按钮

 <button type="submit" ng-click="pay()" class="stripe-button-el" style="visibility: visible;"><span style="display: block; min-height: 30px;">Pay with Card</span></button>

在控制器中：

 var handler = StripeCheckout.configure({
        image: "https://stripe.com/img/documentation/checkout/marketplace.png",
        key:'pk_test_'
    });

    $scope.pay = function(){
        handler.open({
            name: 'Example Product',
            description: 'Example Product ' + $scope.price,
            amount: $scope.price * 100
        });
        e.preventDefault();
    };

这项工作符合预期：

http://jsfiddle.net/ppq1orso/3/

如何在脚本标记中使用AngularJS？

1 个答案: