JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<link rel="stylesheet" href="https://checkout.stripe.com/v3/checkout/button-qpwW2WfkB0oGWVWIASjIOQ.css">
<div ng-app="app">
<div ng-controller="ctrl">
<form action="" method="POST">
<script src="https://checkout.stripe.com/checkout.js"></script>
<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>
<br />Price ${{price}}
</form>
</div>
JavaScript
var app = angular.module('app',[]);
function ctrl($scope) {
$scope.price = "77";
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
});
};
// Close Checkout on page navigation
$(window).on('popstate', function() {
handler.close();
});
}