Question

我正在尝试将使用Jquery构建的Stripe Checkout集成到使用angular构建的SPA中。我想使用自定义版本，并能够根据当前范围更改金额或电子邮件等数据。

我试图写一个指令：

.directive('ngSparkline', function() {
  return {
    restrict: 'E',
    scope: {
      amount: '@'
    },
    templateUrl: 'views/stripe.html',
    replace: true
  };
});

其中stripe.html包含以下代码段，根据Stripe的文档：

<button id="customButton">Purchase</button>

<script>
      var handler = StripeCheckout.configure({
        key: "pk_test_sK21onMmCuKNuoY7pbml8z3Q",
        image: "apple-touch-icon.png",
        token: function(token, args) {
          jQuery.ajax({
            type:"POST",
            url: "/stripetoken/", //For own custom domain, put the full https appspot url here
            data:  token,
            timeout: 200000,
            beforeSend: function(settings) {
              console.log("About to send the transaction, may take a while, but this will be async")
            },
            success: function(result)
            {
              alert("Paiement Effectué");
            },
            error: function(result) {
              console.log("Error",result);
            }
          });
        }
      });

      document.getElementById("customButton").addEventListener("click", function(e) {
        // Open Checkout with further options
        handler.open({
          name: "Vinify",
          description: "Recharge Vinibar",
          currency: "EUR",
          panelLabel: "Payer",
          amount: {{amount}}
        });
        e.preventDefault();
      });
    </script>

但结帐不会触发，即使我只是尝试用随机数量写的。当我将相同的代码段直接放在我的html中，将{{amount}}替换为随机数量时，它可以正常工作。

最好的方法是什么？我想使用checkout，因为UI已经构建，重写它会有点痛苦。我尝试过角度付款，但代码却在弄乱我使用的离子框架。

谢谢！

Answer 1

我会将您在此示例中使用的所有StripeCheckout内容放在ngSparkline指令的链接部分中，并在DOM中引用它，如下所示：

<button ng-spark-line>Purchase</button>

在您的链接部分中，不要使用元素ID绑定到click事件，请执行以下操作：

      $element.bind('click',function(e) {
        // Open Checkout with further options
        handler.open({
          name: "Vinify",
          description: "Recharge Vinibar",
          currency: "EUR",
          panelLabel: "Payer",
          amount: $scope.amount
        });
        e.preventDefault();
      });

将AngularJS $范围数据传递给Jquery元素（Stripe Checkout）

1 个答案: