9

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) ?

Nick
  • 2,924
  • 4
  • 36
  • 43

1 Answers1

9

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!

Evan Hahn
  • 12,147
  • 9
  • 41
  • 59
  • Thanks - it is very helpful. Out of curiosity - do you think it would be easy to adapt the [payola gem](https://github.com/peterkeen/payola) to use Braintree instead of Stripe? There is a [nice Saas tutorial](https://tutorials.railsapps.org/tutorials/rails-stripe-membership-saas) and [working code example](https://github.com/RailsApps/rails-stripe-membership-saas) 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? – Nick May 24 '15 at 15:04
  • @Nick That's a good idea. I'll bring it up with my coworkers next week! – Evan Hahn May 25 '15 at 17:50
  • 1
    Is there any example SaaS app that demonstrates Braintree subscription? There is [such for Stripe](https://github.com/stripe/monospace-rails) so I wondered whether there is anything similar for Braintree? – Nick Jun 13 '15 at 18:25
  • 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. – Jaymin Gajjar Sep 07 '15 at 11:07
  • @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. – Evan Hahn Sep 18 '15 at 23:28
  • @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. – Jaymin Gajjar Sep 23 '15 at 17:08
  • 1
    @JayminGajjar You can upgrade to the latest version of braintree.js and then call `teardown` on the integration. See this example: https://gist.github.com/EvanHahn/2a8db80d22204e55f741 – Evan Hahn Sep 23 '15 at 22:55
  • 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 – tofutim Jan 30 '16 at 00:39
  • @tofutim Here's a JS Bin that shows a sample Hosted Fields integration with some styling. Does this help? http://jsbin.com/nujehivupu/edit?html,css,js,output – Evan Hahn Feb 01 '16 at 19:37
  • yes, that helps, I am making progress now - any chance of adding the check/x mark from bootstrap validation? – tofutim Feb 01 '16 at 22:43
  • 1
    @tofutim We made a Hosted Fields + Bootstrap example. Hope this helps: http://jsbin.com/vipoteyuxo/edit?html,css,js,output – Evan Hahn Feb 03 '16 at 00:42
  • 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 – Ramdane Oualitsen Dec 26 '16 at 21:40