Question

我试图将用户输入（名字，姓氏，合同号，金额）传递给payment.php，然后通过$result = Braintree_Transaction::sale发送，但payment_method_nonce是唯一传递给payment.php的内容。使用<?php print_r($_POST); ?>测试payment.php时，我只会收到Array ( [payment_method_nonce] => 9ce4f24f-9746-076c-760b-d30d18a3cdf5 )提前致谢这是我的代码：

HTML

<div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default bootstrap-basic">
              <div class="panel-heading">
                <h3 class="panel-title">Enter Payment Details</h3>
              </div>
              <form class="panel-body" id="paymentportal" action="payment.php" method="post">
              <div class="row">
                  <div class="form-group col-sm-6">
                    <label class="control-label">First Name</label>
                    <!--  Hosted Fields div container -->
                    <input type="text" placeholder="John" class="form-control" id="first-name">
                  </div>
                  <div class="form-group col-sm-6">
                    <label class="control-label">Last Name</label>
                    <!--  Hosted Fields div container -->
                    <input type="text" placeholder="Doe" class="form-control" id="last-name">
                  </div>
                </div>
                <div class="row">
                  <div class="form-group col-sm-6">
                    <label class="control-label">Contract Number</label>
                    <!--  Hosted Fields div container -->
                    <input type="text" placeholder="1462" class="form-control" id="order-number">
                  </div>
                  <div class="form-group col-sm-6">
                    <label class="control-label">Amount</label>
                    <!--  Hosted Fields div container -->
                    <input type="text" placeholder="$1234.56" class="form-control" id="amount">
                  </div>
                </div>
                <div class="row">
                  <div class="form-group col-sm-8">
                    <label class="control-label">Card Number</label>
                    <!--  Hosted Fields div container -->
                    <div class="form-control" id="card-number"></div>
                    <span class="helper-text"></span>
                  </div>
                  <div class="form-group col-sm-4">
                    <div class="row">
                      <label class="control-label col-xs-12">Expiration Date</label>
                      <div class="col-xs-6">
                        <!--  Hosted Fields div container -->
                        <div class="form-control" id="expiration-month"></div>
                      </div>
                      <div class="col-xs-6">
                        <!--  Hosted Fields div container -->
                        <div class="form-control" id="expiration-year"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="form-group col-sm-6">
                    <label class="control-label">Security Code</label>
                    <!--  Hosted Fields div container -->
                    <div class="form-control" id="cvv"></div>
                  </div>
                  <div class="form-group col-sm-6">
                    <label class="control-label">Zipcode</label>
                    <!--  Hosted Fields div container -->
                    <div class="form-control" id="postal-code"></div>
                  </div>
                </div>
                <input type="hidden" name="payment_method_nonce" id="payment_method_nonce">
                <button value="btnSubmit" id="btnSubmit" class="btn-box center-block">Pay with <span id="card-type">Card</span></button>
              </form>
            </div>
     </div>

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

<?php
$result = Braintree_Transaction::sale([
  'amount' => $_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();
}
?>

Answer 1

_{完全披露：我在Braintree工作。如果您有任何其他问题，请随时联系
support}

请记住，当您在服务器上收集表单数据时，需要通过 name 属性引用这些输入。将相应的名称值添加到每个输入后，它应该按预期工作。

例如，您的名字输入;

<input type="text" placeholder="John" class="form-control" id="first-name" name="first-name">

尝试向braintree发送自定义输入，但只有payment_method_nonce有效

1 个答案: