如何在客戶端SDK中提交帶有payload.nonce的表單？ 我正在使用Braintree提供的示例嗎？

Question

我現在停留在這一點上。 我以前從未使用過braintree API。 問題是，當我按下“提交”按鈕時，它顯示帶有我的payment_method_nonce的警報框。 這意味着我已經成功地從客戶那里獲得了payment_method_nonce，但是問題是我不知道如何使用此payment_method_nonce提交表單。 該客戶端SDK是用jquery編寫的。 我嘗試了幾種提交表單的方法，但是我不知道提交表單時如何獲得“ payment_method_nonce”。 我累了添加一個隱藏的類型字段。 而且，即使隱藏類型字段也不會出現。 請幫忙。 這是jQuery代碼。 我只想知道如何在jquery中使用“ payment_method_nonce”提交表單。

    braintree.client.create({
  authorization: '{{$clientToken}}'
}, 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;
        }
        // This is where you would submit payload.nonce to your server
        alert('Submit your nonce to your server here!' + payload.nonce);
      });
    });
  });
});

Answer 1

_{全面披露：我在Braintree工作。 如果您還有其他疑問，請隨時與支持小組聯系。}

沒有表單或包含HTML代碼，很難知道是否已將表單定義為變量。 不過，從本質上講，您將需要將該現時值（payload.nonce）注入到表單中，然后將其提交到服務器。

例如，我已經定義了表單（在braintree.client.create上方）

var form = document.querySelector('#checkout-form');

然后，在您的Submit事件中，您將需要在成功令牌化后將有效負載值注入表單（您似乎已經根據警報值實現了此目的）

document.querySelector('input[name="payment_method_nonce"]').value = payload.nonce;

隨后提交您的表格；

form.submit()

這將使用名為payment_method_nonce的輸入提交表單，然后您可以在服務器上進行請求。

讓我知道是否可以進一步澄清。 樂意效勞。