BrainTree custom integration Hosted Fields not receiving events

Question

I am having difficulty getting field level events from the Braintree Hosted Fields API.

I have read through the GitHub repos of Evan Hahn and Jeff Carp (among others) and various questions here on StackOverflow... but I cant find an answer, so this is either way too obvious, or no-one else has run into it.

The Braintree DropIn wasn't providing me with the user experience on an Angular.JS app that I wanted, so support suggested I try Hosted Fields.

I really wanted to emulate the DropIn functionality as much as possible

https://www.braintreepayments.com/features/drop-in

but the library for hosted fields just isnt there yet (and I can understand that - it is still technically beta after all).

However, my implementation (which I grabbed piecemeal from various places on the Braintree support pages) isn't receiving event notifications - of any kind.

It is giving me the appropriate coloring for good/bad card numbers, but it doesnt fire off the onFieldEvent that would tell me what type of card was used, so I could put up a nice little graphic.

The Hosted fields work - I have the entire process flow working - that's not the issue - the question I have is what have I misconfigured such that the onFieldEvent is not being triggered?

I am using the latest published API JS file:

https://js.braintreegateway.com/js/beta/braintree-hosted-fields-beta.18.min.js

The full call to Braintree.setup is as follows:

           $scope.CCType = "Images/pixel.gif";
           braintree.setup(token, "custom", {
                  displayName : "Test Hosted Fields - Sandbox Enviro",
                  id: $scope.PaymentFormName,
                  hostedFields: { 
                      styles: {
                        "input": {
                          "font-size": "12pt",
                          "color": "#3A3A3A",
                          "width":"50%",
                          "padding":"3px",
                          "margin":"3px"
                        },  
                        ".number": {
                          "font-family": "inherit"
                        },
                        ":focus": {
                          "color": "blue"
                        },
                        ".valid": {
                          "color": "green"
                        },
                        ".invalid": {
                          "color": "red"
                        },
                        "@media screen and (max-width: 700px)": {
                          "input": {
                            "font-size": "14pt"
                          }
                        }
                      },
                      number: {
                        selector: "#card-number"
                      },
                      cvv: {
                        selector: "#cvv"
                      },
                      expirationDate: {
                        selector: "#expiration-date",
                        placeholder: "mm/yyyy"
                      },
                      postalcode: {
                        selector: "#postal-code"
                      }
                  },
                  paymentMethodNonceInputField: "payment_method_nonce",
                  amount: $scope.selectedItem.cost,
                  currency: 'CAD',
                  onReady : function(response) {
                        console.log("in OnReady");
                        $scope.PaymentProcessing = true;               
                  },
                  onPaymentMethodReceived : function(response) {
                        console.log("in onPaymentMethodReceived");
                        console.log(response);
                        console.log($scope.holdTransVars);

                        $scope.userPaymentMethod = response;
                        $scope.PaymentMethod = true;
                        $scope.PaymentProcessing = "";
                        $scope.BraintreeSale().then( function(result) {
                            $scope.PaymentProcessing = "complete";
                        },
                        function(result) {
                            console.log(result);
                            $scope.PaymentProcessing = "error";
                        });
                  },
                  onError : function(response) {
                      console.log("in onError");
                      console.log(response);
                      $scope.processingerrormsg = response.message;
                  },
                  onFieldEvent: function (event) {
                    console.log(event);
                    if (event.card) {
                        console.log(event.card.type);
                        switch(event.card.type) {
                            case  'master-card':
                                    $scope.CCType = "Images/mastercard.png";
                                    break;
                            case  'american-express':
                                    $scope.CCType = "Images/american_express.png";
                                    break;
                            case  'discover':
                                    $scope.CCType = "Images/discover.png";
                                    break;
                            case  'jcb':
                                    $scope.CCType = "Images/jcb.png";
                                    break;
                            case  'visa':
                                    $scope.CCType = "Images/visa.png";
                                    break;
                            case  'diners-club':
                            case  'unionpay':
                            case  'maestro':
                            default:
                                    $scope.CCType = "Images/pixel.gif";
                        }

                    }
                  }
                });

While I do see log entries for "onReady" and "onPaymentReceived", the console log shows nothing upon entering valid (or invalid) CCs into the Hosted number field. I would hope to at least see the event object logged, but nothing shows.

Other examples I've seen use JQuery to achieve this - I'm looking for an Angular (or JQLite) solution. But of course, if the event doesn't fire, then it doesnt matter what the solution is in - it's not going to work.

Based on what I see in the DropIn demo, entering "41" should be sufficient to identify the card as a Visa. Entering "52" should be sufficient to identify the card as a Mastercard. I can enter the entire card number without the event firing.

Is this a case of conflicting parameters on the call? (or perhaps a BrainTree developer - I know you're reading these) can tell me if this is a known issue with this release of the HostedFields??)

Answer 1

Your onFieldEvent callback is outside of hostedFields. It should be nested within hostedFields.

braintree.setup(token, "custom", {
  hostedFields: { 
    ....
    onFieldEvent: function (event) {
      ....
    }
  },
  ....
});