Hosted Fields Not Rendering

[idodekerobo]

It looks like my Braintree instance is getting a token and successfully connecting to Braintree's API, however, hosted fields aren't returning any content.

I've followed the documentation and used all required props. I've also tried hard coding the token returning from my local server to see if that was the issue and it did not fix the problem.

Is this an issue or a gap in my knowledge?

const Braintree = require('react-braintree-fields'); // import not compiling in typescript
const CheckoutForm = () => {
   const [ token, setToken ] = useState('');

   const getToken = async () => {
      const tokenResponse = await fetch('http://localhost:5000/braintree_client_token', {
         method: "GET",
         headers: {
            'Content-type': 'application/json'
         },
      });
      const tokenObject = await tokenResponse.json();
      setToken(tokenObject.token);
   }
   useEffect(() => {
      getToken();
   }, [ ])



   return (
               <Braintree.Braintree
                  authorization={token}
                  onAuthorizationSuccess={() => console.log('auth successful placeholder function')}
                  onError={() => console.log('error placeholder func')}
                  styles={{
                     'input': {
                        'font-size': '14px',
                        'font-family': 'helvetica, tahoma, calibri, sans-serif',
                        'color': '#3a3a3a'
                     },
               }}
               >
                  <div className="fields">
                     Number:
                     <Braintree.HostedField type="number" />
                     Expiration Date
                     <Braintree.HostedField type="expirationDate" />
                     CVV
                     <Braintree.HostedField type="cvv" />
                  </div>
                  <button onClick={() => console.log('on submit func')}>Submit Payment</button>
               </Braintree.Braintree>
   );
}
export default CheckoutForm;

[idodekerobo]

it seems there's a style tab that (i think) braintree is rendering that is making the labels have the following style and be hidden:

* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border: none;
	background-color: transparent
}

body,
form,
input,
select {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%
}

input.autofill-field {
	width: 2px;
	z-index: -1;
	left: -2px;
	opacity: 0
}

input.focus-intercept {
	border: none!important;
	display: block!important;
	height: 1px!important;
	left: -1px!important;
	opacity: 0!important;
	position: absolute!important;
	top: -1px!important;
	width: 1px!important;
	padding: 1px!important
}

label {
	position: absolute;
	left: -9999px
}

:focus {
	outline: 0
}

[nathanstitt]

Hi @idodekerobo it looks to me like it may not be rendering due to lack of https connection, do you see any errors in the browser dev console?