Setting up customer payment options with Braintree's Javascript SDK?

Question

I'm attempting to go through Braintree's javascript SDK documentation, but it's a bit sparse.

What is the minimum html I have to write in order to enable a customer to setup a credit card to use with braintree payments? How does the braintree javascript sdk then process the html or does it setup the html itself and also process it?

Does the braintree javascript SDK first have to grab some values from the server before it can setup the customer and does it have to have certain values hardcoded before it can grab those values?

I know I have to setup the server side of this, but I'm just trying to figure out the client side javascript first.

Answer 1

_{Full disclosure: I work at Braintree. If you have any further questions, feel free to contact support .}

I'd be happy to help!

What is the minimum html I have to write in order to enable a customer to setup a credit card to use with braintree payments?

The minimum amount of HTML you'd have to write to collect/store/transact customer payment information would be by using Braintree's Drop-in integration. You can check out this link for a basic Drop-in example.

How does the braintree javascript sdk then process the html or does it setup the html itself and also process it?

The SDK will instantiate a DropIn within a specified HTML container. Before the form is submitted the javascript will attempt to tokenize the inputted data with Braintree, in which a nonce will be returned to your client.

Does the braintree javascript SDK first have to grab some values from the server before it can setup the customer and does it have to have certain values hardcoded before it can grab those values?

The JS SDK will grab the values provided to the Drop-in and send them to Braintree. Braintree will tokenize those values and return a nonce to your client as part of the payload. That nonce should be sent back to your server, in which it can be consumed as part of a Customer.create() , Transaction.sale() , or PaymentMethod.create() API call.