In my Angular application, I am working with an angularUI modal window where I want to integrate the Drop In form provided by Braintree for processing payments. To achieve this, I have created a standard form (partial.html):
<form id="creditCard" >
<div id="dropin"></div>
<button type="submit" id="btnPay" >Pay</button>
</form>
To display the modal, I use the following code:
var modalInstance = $modal.open({
templateUrl: 'partial.html',
controller: 'ModalController'
});
The ModalController is responsible for initializing the Braintree setup as shown below:
braintree.setup($scope.clientToken, 'dropin', {
container: 'dropin',
onPaymentMethodReceived: function (result) {
$scope.$apply(function() {
$scope.success = true;
// Additional logic can be added here
});
}
});
Everything works smoothly in displaying the Braintree Drop In form and capturing credit card details including expiration date. However, a challenge arises when the modal is called multiple times, causing the onPaymentMethodReceived() event to trigger multiple times due to each setup execution.
I am seeking suggestions or solutions on how to prevent this issue. Is there a way to remove the event handler associated with onPaymentMethodReceived()? It's essential to call the setup function multiple times because the clientToken may change each time the modal is opened.
Your assistance or guidance on resolving this matter would be greatly appreciated. Thank you.