如何在客户端sdk中使用payload.nonce提交表单？我使用Braintree给出的例子？

Question

我现在被困在这一点。我以前从未使用braintree API。问题是当我点击提交按钮时，它显示了我的payment_method_nonce提示框。 这意味着我成功从客户端获得payment_method_nonce，但问题是我不知道如何使用此payment_method_nonce提交表单。 这个客户端SDK是用jQuery编写的。 我尝试了几种提交表单的方式，但我不知道在提交表单时如何获得'payment_method_nonce'。 我累了添加一个隐藏类型字段。即使那个隐藏式字段也没有出现。 请帮忙。这里是jQuery代码。 我只想知道如何使用该'payment_method_nonce'在jquery中提交表单。

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

_{完全披露：我在布伦特里工作。如果您还有其他问题，请随时联系 support。}

如果没有您的表单或HTML代码，您很难知道您是否将表单定义为变量。然而，基本上，您需要将该nonce值（payload.nonce）注入到表单中，然后将该表单提交给您的服务器。

例如，我定义我的形式（以上我braintree.client.create）

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

然后，在你提交时，你会想成功后注入有效载荷值到表单标记（您似乎基于警报值实现的）

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

随后提交表单;

form.submit() 

这将提交您的形式命名payment_method_nonce的输入，然后你就可以在服务器上请求。

让我知道我是否可以进一步澄清。乐于帮助。