Trying to send custom inputs to braintree but only payment_method_nonce works

Question

I am attempting to have the user inputs( first name, last name, contract number, amount) pass to payment.php and then be sent via $result = Braintree_Transaction::sale but payment_method_nonce is the only thing that passes to payment.php. When test payment.php with I only receive Array ( [payment_method_nonce] => 9ce4f24f-9746-076c-760b-d30d18a3cdf5 ) Thanks in advance Here is my code:

HTML


        
            
              
                Enter Payment Details
              
              
              
                  
                    First Name
                    
                    
                  
                  
                    Last Name
                    
                    
                  
                
                
                  
                    Contract Number
                    
                    
                  
                  
                    Amount
                    
                    
                  
                
                
                  
                    Card Number
                    
                    
                    
                  
                  
                    
                      Expiration Date
                      
                        
                        
                      
                      
                        
                        
                      
                    
                  
                
                
                  
                    Security Code
                    
                    
                  
                  
                    Zipcode

JS

var form = document.getElementById('paymentportal');

braintree.client.create({
  authorization: 'sandbox_authorization'
}, function (err, clientInstance) {
  if (err) {
    console.error(err);
    return;
  }

  braintree.hostedFields.create({
    client: clientInstance,
    styles: {
      'input': {
        'font-size': '14px',
        'font-family': 'helvetica, tahoma, calibri, sans-serif',
        'color': '#3a3a3a'
      },
      ':focus': {
        'color': 'black'
      }
    },
    fields: {
      number: {
        selector: '#card-number',
        placeholder: '4111 1111 1111 1111'
      },
      cvv: {
        selector: '#cvv',
        placeholder: '123'
      },
      expirationMonth: {
        selector: '#expiration-month',
        placeholder: 'MM'
      },
      expirationYear: {
        selector: '#expiration-year',
        placeholder: 'YY'
      },
      postalCode: {
        selector: '#postal-code',
        placeholder: '90210'
      }
    }
  }, function (err, hostedFieldsInstance) {
    if (err) {
      console.error(err);
      return;
    }

    hostedFieldsInstance.on('validityChange', function (event) {
      var field = event.fields[event.emittedBy];

      if (field.isValid) {
        if (event.emittedBy === 'expirationMonth' || event.emittedBy === 'expirationYear') {
          if (!event.fields.expirationMonth.isValid || !event.fields.expirationYear.isValid) {
            return;
          }
        } else if (event.emittedBy === 'number') {
          $('#card-number').next('span').text('');
        }

        // Remove any previously applied error or warning classes
        $(field.container).parents('.form-group').removeClass('has-warning');
        $(field.container).parents('.form-group').removeClass('has-success');
        // Apply styling for a valid field
        $(field.container).parents('.form-group').addClass('has-success');
      } else if (field.isPotentiallyValid) {
        // Remove styling  from potentially valid fields
        $(field.container).parents('.form-group').removeClass('has-warning');
        $(field.container).parents('.form-group').removeClass('has-success');
        if (event.emittedBy === 'number') {
          $('#card-number').next('span').text('');
        }
      } else {
        // Add styling to invalid fields
        $(field.container).parents('.form-group').addClass('has-warning');
        // Add helper text for an invalid card number
        if (event.emittedBy === 'number') {
          $('#card-number').next('span').text('Looks like this card number has an error.');
        }
      }
    });

    hostedFieldsInstance.on('cardTypeChange', function (event) {
      // Handle a field's change, such as a change in validity or credit card type
      if (event.cards.length === 1) {
        $('#card-type').text(event.cards[0].niceType);
      } else {
        $('#card-type').text('Card');
      }
    });




$('.panel-body').submit(function (event) {
      event.preventDefault();
      hostedFieldsInstance.tokenize(function (err, payload) {
        if (err) {
          console.error(err);
          return;
        }

document.querySelector('input[name="payment_method_nonce"]').value = payload.nonce;
        // This is where you would submit payload.nonce to your server
form.submit();
      });
    });
  });
});

PHP

 $_POST['amount'],
  'orderId' => $_POST['order-number'],
  'paymentMethodNonce' => $_POST['payment_method_nonce'],
  'customer' => [
    'firstName' => $_POST['first-name'],
    'lastName' => $_POST['last-name'],
  ],
  'options' => [
    'submitForSettlement' => true
  ]
]);

if ($result->success === true){

}else
{
    print_r($result->errors);
    die();
}
?>

drs6222 · Accepted Answer

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

Remember when you collect form data on your server, you need to reference those inputs by their name attribute. Once you add the respective name values to each of these inputs, it should work as expected.

For example, your first name input;

Trying to send custom inputs to braintree but only payment_method_nonce works

Answers (1)

Related Questions