How to add cardholder name in braintree sandbox account using nodejs

Question

I have to add credit cardholder name dynamically using node js app. I used Braintree for the payment transaction.I add credit card number, expiration date & CVV. but not add credit cardholder name.what can I do for that?

braintree.hostedFields.create({
    client: clientInstance,
    styles: {
        'input.invalid': {
            'color': 'red'
        },
        'input.valid': {
            'color': 'green'
        }
    },
    fields: {
        number: {
            selector: '#cardNumber'
        },
        cvv: {
            selector: '#cardCVC'
        },
        expirationDate: {
            selector: '#cardExpiry'
        }
    }

Answer 1

_{Full disclosure: I work at Braintree. If you have any further questions, feel free to contact support.}

Braintree Hosted Fields doesn't support the use of an iFrame for cardholder name. The available fieldOptions are listed here. Instead, you'll need to add an additional input to your HTML form element:

<form action="/" id="my-sample-form" method="post">
  <label for="card-number">Card Number</label>
  <div id="card-number"></div>

  <label for="cvv">CVV</label>
  <div id="cvv"></div>

  <label for="expiration-date">Expiration Date</label>
  <div id="expiration-date"></div>

  <label for="cardholder-name">Cardholder Name</label>
  <input id="cardholder-name" name="cardholderName" placeholder="Cardholder Name"/>

  <input type="submit" value="Pay" disabled />
</form>

The value of your cardholderName input is then accessible in your braintree.hostedFields.create call as event.target.cardholderName.value and can be included in the options object of the tokenize call:

    braintree.hostedFields.create({
      client: clientInstance,
      styles: {
        'input.invalid': {
          'color': 'red'
        },
        'input.valid': {
          'color': 'green'
        }
      },
      fields: {
        number: {
          selector: '#card-number',
          placeholder: '4111 1111 1111 1111'
        },
        cvv: {
          selector: '#cvv',
          placeholder: '123'
        },
        expirationDate: {
          selector: '#expiration-date',
          placeholder: '10/2019'
        }
      }
    }, function (hostedFieldsErr, hostedFieldsInstance) {
      if (hostedFieldsErr) {
        console.error(hostedFieldsErr);
        return;
      }

      submit.removeAttribute('disabled');

      form.addEventListener('submit', function (event) {
        event.preventDefault();

        hostedFieldsInstance.tokenize({
          cardholderName: event.target.cardholderName.value
        }, function (tokenizeErr, payload) {
          if (tokenizeErr) {
            console.error(tokenizeErr);
            return;
          }

          // Submit nonce to your server here
          console.log(payload.nonce);

        });
      }, false);
    });