I have setup dropin UI for braintree. I can see the UI fine. Before that I created the customer and I can see the customer on braintree-sandbox. Now I want to add payment method to the customer. I am trying following code, but paymentMethodNonceReceived is not being invoked. Not sure why.
braintree.setup("<?=CLIENT_TOKEN_FROM_PHP?>",
"dropin",
{
container: "divBrainTreeContainer",
paymentMethodNonceReceived: function (event, nonce) {
console.log(nonce);
$('#formProfile').append('<input type="hidden" name="payment_method_nonce" value="'+nonce+'" />');
$('#formProfile').submit();
}
}
);
I am using below JavaScript and its working fine:
braintree.setup(clientToken, "custom", {
id: "my-sample-form",
hostedFields: {
number: {
selector: "#card-number"
},
cvv: {
selector: "#cvv"
},
expirationMonth: {
selector: "#expiration-month"
},
expirationYear: {
selector: "#expiration-year"
},
},onPaymentMethodReceived:function(nonce){
console.log(JSON.stringify(nonce));
return false;
}
}
);
Above gives below response and DOES NOT submit the form:
{"nonce":"ff2662e1-f1fd-42a3-a16f-d8f3213a2406","details":{"lastTwo":"11","cardType":"Visa"},"type":"CreditCard"}
means use onPaymentMethodReceived instead of paymentMethodNonceReceived
Thanks
http://www.web-technology-experts-notes.in/2015/06/braintree-payment-gateway-integration.html
As per @kdetella's comment, there should be a submit
button inside the <form>
element to receive payment method nonce.
https://github.com/braintree/braintree-web/issues/58
For custom integration with multiple payment method, use onSuccess instead of onPaymentMethodReceived.
braintree.setup(TOKEN, 'custom', {
id: 'checkout',
paypal: {
container: 'paypal-container',
onSuccess: function (nonce, email) {
// This will be called as soon as the user completes the PayPal flow
// nonce:String
// email: String
}
},
onPaymentMethodReceived: function(obj) {
// This will be called when the user submits the form
}
});