Form

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Pay with Braintree</title>

  <!-- jquery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <!-- braintree -->
  <script src="https://js.braintreegateway.com/js/braintree-2.32.1.min.js"></script>

  <!-- setting up braintree -->
  <script type="text/javascript">
  $.ajax({
    url: "token.php",
    type: "get",
    dataType: "json",
    success: function (data) {
      braintree.setup(data,'dropin', { container: 'dropin-container'})
    }
  })
  </script>

  <style type="text/css">
    label.heading {
      font-weight: 600;
    }
    .payment-form {
      width: 300px;
      margin: 0 auto;
      padding: 10px;
      border: 1px #333 solid;
    }
  </style>
</head>
<body style="text-align: center; margin-top: 100px;">
  <form action="payment.php" method="post" class="payment-form" id="my-sample-form">
    <label for="firstName" class="heading">First Name</label><br>
    <input type="text" name="firstName" id="firstName"><br><br>

    <label for="lastName" class="heading">Last Name</label><br>
    <input type="text" name="lastName" id="lastName"><br><br>

    <label for="amount" class="heading">Amount (USD)</label><br>
    <input type="text" name="amount" id="amount"><br><br>

    <div id="dropin-container"></div>
    <br><br>
    <button type="submit">Pay with BrainTree</button>

  </form>

</body>
</html>