Error Found: Braintree API Client Misconfiguration - The clientApiUrl provided in the clientToken is invalid.
Upon checking my browser log, I noticed this error. I am using a Node backend with an Angular front end and integrating Braintree javascript SDK Version 2 with drop-in feature. All tokens and API keys within my domain have been verified to be correct and functional.
Integration Details:
/server/app.js - server-side node SDK
function startBraintree() {
app.post('/api/token', function (request, response) {
gateway.clientToken.generate({}, function (err, res) {
if (err) throw err;
response.json({
"client_token": res.clientToken
});
console.log(res.clientToken)
});
});
}
.then(startBraintree)
.catch(function(err) {
console.log('Braintree', err);
});
A client-token is successfully generated in the server logs. I cross-verify this token with the one displayed in the browser console to ensure that the correct token is being sent to the browser.
/client/app/braintree.component.js This section involves the client-side Braintree.setup integration.
export class BraintreeComponent {
clientToken = this.clientToken;
/*@ngInject*/
constructor($scope, $http) {
this.$http = $http;
$scope.hasCalledBack = 'Nope';
this.$http.post('/api/token')
.then(response => {
this.clientToken = response.data;
console.log(this.clientToken);
braintree.setup(this.clientToken,
// Replace this with a client token from your server
'dropin', {
container: 'dropin',
onPaymentMethodReceived: function (obj) {
$scope.$apply(function () {
$scope.hasCalledBack = 'YEP!';
alert('Did the scope variable change? Yes!');
console.log(obj)
});
}
});
});
}
}
Surprisingly, when manually declaring a client-token as a static value, the system runs without any issues.