“payment_method_nonce” returning an empty string in PHP

Question

I'm trying to create a simple transaction using Braintree in sandbox mode. It requires me to make a POST request method from the page in order to continue making the transaction. The developer docs however, does not tell what should I do next after I successfully rendered the Drop-in UI.

From what I know, in order to sucessfully make a POST request, the inputs need to have the "name" attribute in its HTML code. Logically, it should have the name "payload_method_nonce" in one of the inputs. But since it isn't there, some users suggested to add a code like this:

<input type="hidden" name="payment_method_nonce">

in order to do this in PHP:

$nonceFromTheClient = $_POST["payment_method_nonce"]

and add these few lines of code:

var form = document.querySelector('#payment_form');
form.addEventListener('submit', function (event) {
event.preventDefault();
hostedFieldsInstance.tokenize(function (tokenizeErr, payload) {
document.querySelector('input[name="payment_method_nonce"]').value = 
payload.nonce;
  form.submit();
});
}, false);

I've already did that but it still returns nothing.

What should I do?

Full codes:

HTML

<form id="payment-form">
<div id="dropin-container"></div>
      <input type="hidden" name="payment_method_nonce">
      <button id="submit-button" class="w3-theme-action submit-btn" 
style="width: 27.5%; margin-bottom: 16px; margin-left: 0;">Request 
payment method</button>
</form>
<script>
var button = document.querySelector('#submit-button');

braintree.dropin.create({
  authorization: 'xxxxxx',
  container: '#dropin-container'
}, function (createErr, instance) {
  button.addEventListener('click', function () {
    instance.requestPaymentMethod(function (err, payload) {
      // Submit payload.nonce to your server
var form = document.querySelector('#payment_form');
form.addEventListener('submit', function (event) {
event.preventDefault();
hostedFieldsInstance.tokenize(function (tokenizeErr, payload) {
  document.querySelector('input[name="payment_method_nonce"]').value = 
payload.nonce;
  form.submit();
});
}, false);
    });
  });
});
</script>

PHP

$nonceFromTheClient = $_POST["payment_method_nonce"]
echo $nonceFromTheClient;

Answer 1

The default method for an HTML form is GET .

Either change your form method:

<form id="payment-form" method="POST"> ... </form>

Or access your data into $_GET :

$nonceFromTheClient = $_GET["payment_method_nonce"];