Hosted Fields combined

fields.js

var HostedFields = React.createClass({
  componentDidMount: function() {
    this.initBraintree();
  },
  initBraintree() {
    braintree.setup(clientToken, 'custom', {
      id: 'hosted',
      hostedFields: {
        onFieldEvent: function (event) {
          if (event.type === 'fieldStateChange') {
            var type = '';
            if (event.card) {
              type = event.card.type.replace('-', '');
            }
            $('#card-type').text(type);
          }
        },
        number: {
          selector: '#card-number'
        },
        cvv: {
          selector: '#cvv'
        },
        expirationDate: {
          selector: '#expiration-date'
        }
      }
    });
  },
  render: function() {
    return (
      <form action="/pay" id="hosted">
        <FieldCardNumber />
        <FieldCVV />
        <FieldExpirationDate />
        <FieldCardType />
        <FieldSubmit />
      </form>
    );
  }
});