Comment puis-je soumettre un formulaire avec payload.nonce dans le client sdk? J'utilise un exemple donné par le Braintree?

Question

Je suis coincé à ce stade maintenant. Je n'ai jamais utilisé l'API braintree auparavant. Le problème est que lorsque je clique sur le bouton Soumettre, il affiche une boîte d'alerte avec mon payment_method_nonce. Cela signifie que je reçois avec succès le payment_method_nonce du client, mais le problème est que je ne sais pas comment puis-je soumettre le formulaire avec payment_method_nonce. Ce client sdk est écrit en jquery. Et j'ai essayé plusieurs façons de soumettre le formulaire mais je ne sais pas exactement comment puis-je obtenir un 'payment_method_nonce' lors de la soumission d'un formulaire. J'ai fatigué d'ajouter un champ de type caché. Et même ce champ de type caché ne se présente pas. S'il vous plaît aider. Voici le code jquery. Je veux juste savoir comment je peux soumettre un formulaire dans jquery avec '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

_{divulgation complète: Je travaille à Braintree. Si vous avez d'autres questions, n'hésitez pas à contacter support.}

Sans votre formulaire, ou le code HTML inclus, il est difficile de savoir si vous avez défini votre formulaire en tant que variable. Essentiellement, cependant, vous voudrez injecter cette valeur de nonce (payload.nonce) dans votre formulaire, après quoi vous soumettrez ce formulaire à votre serveur.

Par exemple, j'ai défini ma forme (au-dessus de mon braintree.client.create)

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

Ensuite, dans votre cas soumettre, vous aurez envie d'injecter la valeur de la charge utile dans votre formulaire après un succès tokenization (que vous avez semblé accomplir basé sur la valeur d'alerte)

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

Soumettre votre formulaire par la suite;

form.submit() 

Cela soumettre votre formulaire avec une entrée nommée payment_method_nonce, que vous pouvez alors demander sur votre serveur. Faites-moi savoir si je peux clarifier davantage. Heureux d'aider.