CODEWITHSUNDEEP
javascriptangularjs
4thSpace
4thSpace

Reputation: 44310

How to use AngularJS in script tag?

I'd like to use Angular with this Stripe payment modal. None of the price variables are are being assigned in the script tag. Is there some way to do this with 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>

Angular:

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

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

Example: http://jsfiddle.net/ppq1orso/

Upvotes: 0

Views: 797

Answers (1)

Fabricio Duarte
Fabricio Duarte

Reputation: 342

You could set the properties in the controller instead of using the script tag

You´ll have to add a custom button

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

And in the controller:

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

This work as expected:

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

Upvotes: 2

Related Questions