Braintree Hosted Fields Example

Question

I am trying to get my head round the Hosted Fields framework of Braintree. It has been released just a few days ago and is still in beta.

I looked at the docs. I'm getting the overall idea but it would be nice to have some sort of small working example to start with. I found a github repo but the code does not seem to be working.

Google search did not deliver anything of value (just articles commenting on the idea). Can you point me to a working example (preferably one using rails) ?

Wake

Answer 1

I work at Braintree and was one of the developers on the Hosted Fields team. Glad to see so many people using it!

I made a GitHub repo that should answer your question. Basically, you have to set up Braintree on the server, create a client token, and then pass that client token to braintree.setup in the JavaScript.

The bulk of the Hosted Fields work happens in the "new transaction" view.

Hope this helps!

Professoriate

Thanks - it is very helpful. Out of curiosity - do you think it would be easy to adapt the payola gem to use Braintree instead of Stripe? There is a nice Saas tutorial and working code example that use payola. I am using them as a template to build my app - so I was wondering how much effort would be to adapt payola to use Braintree or to replace it in that working code example? – Wake

@Wake That's a good idea. I'll bring it up with my coworkers next week! – Professoriate

Is there any example SaaS app that demonstrates Braintree subscription? There is such for Stripe so I wondered whether there is anything similar for Braintree? – Wake

Hi Evan . everything works good but how can i manage tabindex or focus on bt hosted field from another field of my form ? I tried to give tabindex to iframe but it does not work. Thanks. – Concentration

@JayminGajjar We investigated using tabindex when building Hosted Fields, but it is something that doesn't work well with iframes across browsers. Unfortunately, we couldn't find a great way to deal with this. – Professoriate

@EvanHahn Thanks for reply. One possible way is if we call your method from our script with field name which we need to focus. Thanks. One another quick question .. is there any way to reinitialize fields ? because we have fields in popup so it dont work if someone close popup and open popup again without page refresh. Thanks. – Concentration

@JayminGajjar You can upgrade to the latest version of braintree.js and then call teardown on the integration. See this example: gist.github.com/EvanHahn/2a8db80d22204e55f741 – Professoriate

I'm using the v2 braintree.js and the formatting looks terrible, I do not see the outline at all. Not sure what is going on – Friedrich

@Friedrich Here's a JS Bin that shows a sample Hosted Fields integration with some styling. Does this help? jsbin.com/nujehivupu/edit?html,css,js,output – Professoriate

yes, that helps, I am making progress now - any chance of adding the check/x mark from bootstrap validation? – Friedrich

@Friedrich We made a Hosted Fields + Bootstrap example. Hope this helps: jsbin.com/vipoteyuxo/edit?html,css,js,output – Professoriate

Hi, is there a way to save credit card details on braintreepayments server (vault) PROGRAMMATICALLY so one can reuse them directly. I offer a service that will otherwise require my users to reenter credit card details each time. I do not offer to my selft the burden of saving people sensitive data. please pleh – Illustrator