Using an external braintree.js script is necessary to generate a payment widget, and unfortunately I have no control over it. The code that needs to be included in my .html page is as follows:
<div id="myClient" ng-show="false">{{myClientToken}}</div>
<form id="checkout" action="actionURL" method="post" enctype="multipart/form-data">
<div id="payment-form"></div>
<input type="hidden" name="amount" value="{{balance}}" />
<input type="hidden" name="uuid" value="{{uuid}}" />
<input type="hidden" name="ptype" value="custom" />
<input type="submit" id="paypal" value="Pay Now">
<!--form not shown to the user-->
</form>
<script src="https://js.braintreegateway.com/v2/braintree.js"></script>
<script>
$(document).ready(function() {
var clientToken = $('#myClient').html();
braintree.setup(clientToken, "dropin", {
container: "payment-form"
});
});
</script>In order to successfully generate the token from my REST server within the controller, I am using:
myFactory.getToken()
.then(function(token) {
$scope.myClientToken = token.data;However, there is a timing issue where the html finishes loading before the token is returned to the controller.
This timing mismatch causes a "misconfiguration" error because the braintree.js script expects the token before it's available. I attempted using ng-init and ng-if on the div element, but was unsuccessful.