Passing AngularJS $ area data to a jQuery element (Stripe Checkout)

Question

I am trying to integrate Stripe Checkout, which is built with jQuery in SPA, built using angular. I want to use a custom version and be able to change data such as quantity or email address based on the current area.

I tried to write a directive:

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

Where stripe.html contains the following snippet, according to the documentation for 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>

but the check does not work, even if I just try a random amount written on paper. When I put the same fragment directly in my html, replacing {{amount}} with a random amount, it works fine.

? checkout, , . angular -payments, , .

!

Answer 1

StripeCheckout ngSparkline DOM :

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

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