CODEWITHSUNDEEP
javascriptbraintree
Hiren Nakrani
Hiren Nakrani

Reputation: 244

How to add cardholder name in braintree sandbox account using nodejs

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'
        }
    }

Upvotes: 5

Views: 2656

Answers (1)

Carter
Carter

Reputation: 274

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);
    });

Upvotes: 6

Related Questions