クライアント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という名前の入力、と自分のフォームを送信します。

私がさらに明確にできるかどうかを教えてください。お力になれて、嬉しいです。