React hook for Braintree Hosted Fields

hostedFields.js

import { useState, useEffect } from 'react';
import client from 'braintree-web/client';
import hostedFields from 'braintree-web/hosted-fields';

const fieldsInnerStyles = {
  input: {
    'font-size': '14px',
  },
  'input.invalid': {
    color: 'red',
  },
  'input.valid': {
    color: 'green',
  },
};

export function useHostedFields() {
  const [fields, setFields] = useState();
  const [isSubmitDisabled, setIsSubmitDisabled] = useState(true);

  useEffect(() => {
    async function setup() {
      try {
        const clientInstance = await client.create({
          authorization: process.env.TOKENIZATION_SANDBOX,
        });

        const hostedFieldsInstance = await hostedFields.create({
          client: clientInstance,
          styles: fieldsInnerStyles,
          fields: {
            number: {
              selector: '#card-number',
              placeholder: '4111 1111 1111 1111',
            },
            cvv: {
              selector: '#cvv',
              placeholder: '123',
            },
            expirationDate: {
              selector: '#expiration-date',
              placeholder: '10/2019',
            },
          },
        });

        setFields(hostedFieldsInstance);
        setIsSubmitDisabled(false);
      } catch (error) {
        return `error preparing hosted fields: ${error}`;
      }
    }

    setup();
  }, []);

  return [fields, isSubmitDisabled];
}

Do you have complete example to use this hook?

Do you have complete example to use this hook?

Sorry, not anymore! I am using Stripe nowadays. Not even sure if Braintree api is still the same to be honest.