Braintree integration, within JS application

Question

I am doing braintree integration with our payment page, and have decided to use "drop-in" for the same. However, When I try to load the page, I can see network calls being made to braintree sandbox website, however drop-in UI does not load. No errors in the console either.

Here is my code -

function invokeBraintree(clientToken, amount){
        var el = angular.element( "<form id='btform'><div id='bt-dropin'></div></form>" );
        $document.find("body").append( el );
        var options = {
            onPaymentMethodReceived: function(payload) {
                console.log(payload); // yay
            },
            container: 'bt-dropin',
            enableCORS: true
        }

        braintreeWeb.setup(clientToken, 'dropin', options)
    }

Any help is appreciated.

Edit

One thing I observed is, A call is being made to https://api.sandbox.braintreegateway.com/merchants/zn7trnkh3vqfp59n/client_api/v1/payment_methods which return below response.

/**/callback_jsonfbd58acc926e4afeb6fc4809d4369a99({"paymentMethods":[],"status":200}) 

Not sure why its returning empty payment methods, I suspect that's the issue.

Answer 1

Apparently it turned out to be an issue with my Braintree account. I had a sandbox account and PayPal was not enabled in sandbox account by default. Also there is no way you can do it manually.

I contacted Braintree support and they enabled it for me. Then everything started working.