CODEWITHSUNDEEP
javascriptbraintree
cengha
cengha

Reputation: 173

How to create hidden 'payment_method_nonce' input by braintree.js?

I configure braintree.js like this:

braintree.setup(
        brainTreeClientToken= 'token_from_server'
        'dropin', {
            container: 'brainTreeDropin',
            form: 'checkout'
        });
</script>

As i understand from the documentation of developers.braintree, you need to send a request param named 'payment_method_nonce' to your server, but it is not present in request. I don't see any js fault in browser console by the way. Here is my form:

<form id="checkout" method="post"
      th:action="....">
    <div id="brainTreeDropin"></div>
    <div >
        <div class="form-group">
            <label for="cardNumber">Credit Card Number</label>
            <input data-braintree-name="number" ..other details.. "/>
        </div>
        <div class="form-group">
            <label for="cardHolder">Name on Card</label>
            <input data-braintree-name="cardholder_name" ..other details.. />
        </div>
    </div>
    <div >
        <div class="form-group">
            <label for="cvc">Security Code(CVC)</label>
            <input data-braintree-name="cvv"  ..other details.. />
        </div>
        <div class="form-group">
            <label for="expDate">Expiration Date</label>
            <input data-braintree-name="expiration_date" ..other details.. />
        </div>
    </div>
</form>

Any idea of what's my fault?

Upvotes: 0

Views: 725

Answers (1)

kdetella
kdetella

Reputation: 661

I work at Braintree on the SDK Team.

The Drop-In integration requires a button or type=["submit"] element to be present within the form. I tried out your integration and was able to get a payment_method_nonce value sent to my server by adding in a <button>Pay</button> element. Try that out to see if that fixes your integration.

Also, just out of curiosity, is it your intent to have 2 credit card input methods inside of the same form? The Drop-In form contains the necessary fields for Credit Cards and you shouldn't need the data-braintree-name annotated inputs.

Upvotes: 2

Related Questions