Braintree payments payment_method_nonce value is null - django

Question

I am working in a django application where braintree is used for payment purpose. The braintree version I am using is 3.13.0. I am using the braintree.js dropin-ui alongside the braintree app.
I tried to add a payment method using a custom form with fields 'cardholder_name','number' and 'expiration_date'. When I click on the 'Add Payment Method' link, a server-side request is sent to get the client token. Using that I set up braintree as given below :
function setup_braintree(){
$.ajax({
url:'/get_token/',
type: 'GET',
datatype:'json',
data: {
payment_freq: 1,
},
success: function(d) {
if (d !== null){
$('#dropin-container').html('');
braintree.setup(d.client_token, "dropin", {
container: "dropin-container"
});
}
}
});}
My form is as given below:
<form name="PaymentMethodForm" id="PaymentMethodForm" action="/payment_method/add/" method="POST">{% csrf_token %}
<div id="dropin-container" style="display:none;">Loading...</div>
<div class="form-group">
<label for="id_name_on_card">Name On Card:</label>
<input type="text" id="id_name_on_card" name="name_on_card" value="" class="form-control"/>
</div>
<div class="form-group">
<label for="id_card_number">Card Number:</label>
<input type="text" id="id_card_number" name="card_number" value="" class="form-control"/>
</div>
<div class="form-group">
<label for="id_expiration_date">Expiration Date:</label>
<input type="text" id="id_expiration_date" name="expiration_date" value=""class="form-control"/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="submit" class="btn btn-default">Save</button>
<input type="submit" class="cool-fc button swagbutton" value="Submit" id="submitbutton" name="submitbutton" style="display:none">
</div>
</form>
As per the documentation, a 'hidden' field 'payment_method_nonce' is created, but its value is null.
When I submit the form, 'nonce is required' error is being returned.
What can be the issue here? My server code is given below:
result = braintree.PaymentMethod.create({
"customer_id": request.user.username,
"payment_method_nonce": request.POST['payment_method_nonce'],
"number":request.POST['card_number'],
"cardholder_name":request.POST['name_on_card'],
"expiration_date":request.POST["expiration_date"],
"options":{
"verify_card":True
}
})
Also is there option in dropin-ui to 'add payment method' without using custom form?
Thanks in advance.

Answer 1

Full disclosure: I work at Braintree. If you have any further questions, feel free to contact support.
For the Drop-in, you don't need to include any input tags, braintree.js will render an iframe with the form inputs inside the div specified in braintree.setup(...). Then when the user submits this form, the payment method nonce should be available to you server-side.
Your form should simply be
<form name="PaymentMethodForm" id="PaymentMethodForm" action="/payment_method/add/" method="POST">{% csrf_token %}
<div id="dropin-container"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="submit" class="btn btn-default">Save</button>
<input type="submit" class="cool-fc button swagbutton" value="Submit" id="submitbutton" name="submitbutton" style="display:none">
</div>
</form>
If you would like more control over the styling still have the easiest level of PCI compliance, I would take look at Hosted Fields.
Hope this helps!