7

I'm developing an application in Rails and want the user to be able to signup and provide their card details on one form. I'm using the Braintree API and their transparent redirect, which means that the form data is posted directly to Braintree.

How can I store and later retrieve the non-payment related information provided by the user from that form e.g. account name, username? These values are not returned in the response provided by Braintree.

If you look at the Basecamp signup process, this is the result I want to achieve.

Thanks

Robin

Robin Fisher
  • 71
  • 1
  • 2
  • Wondering why the values are not returned. Did you figure this out. I've confirmed by disabling javascript that it is indeed possible to return them from BrainTree as you desire. I need to do exactly the same and needed to verify it was possible before signing up for the service. perhaps you need to register the 'known' query string parameters somehow. did you figure this out? – Simon_Weaver Nov 29 '09 at 01:52

4 Answers4

10

OK here's what happens if JavaScript is turned off. It looks like BaseCamp chose to send the credit card via AJAX, buto also handle the situation where JavaScript is disabled and the whole form gets transmitted to them - including non payment fields.

Thanks Fiddler, and BaseCamp.

  • User fills out form containing both payment data and anything else you might want on an HTML form for signup, shipping, shopping cart etc.

  • Form is submitted to https://secure.braintreepaymentgateway.com/api/transact.php

  • BrainTree does its magic and adds the credit card to the vault, and passes back all information to your page. it

It is doing this by actually calling a URL which you must then handle however you're handling it.

https://signup.37signals.com/basecamp/plus/signup?transparent_redirect_complete=1
&signup[page]=
&signup[source]=basecamphq.com
&signup[data][first_name]=FRED
&signup[data][last_name]=FLINTSTONE
&signup[data][email_address]=FRED@BEDROCK.COM
&signup[data][name]=FRED
&signup[data][time_zone_id]=Eastern%20Time%20%28US%20%26%20Canada%29
&signup[data][identity_url]=
&signup[data][user_name]=BAMBAM
&signup[data][password]=pebbles123
&signup[data][confirm_password]=pebbles123
&signup[data][subdomain]=bedrock.com
&signup[referrer_code]=
&signup[coupon_code]=
&signup[accepts_eula]=1
&response=1
&responsetext=Customer+Added
&authcode=
&transactionid=
&avsresponse=
&cvvresponse=
&orderid=
&type=
&response_code=100
&customer_vault_id=1253608313
&username=865251
&time=20091129014038
&amount=
&hash=63209ad25560f9a961525d65b63e31be

Presumably a response code of 100 means 'bad credit card' since I put in a fake CC number to test.

4) You're free to redisplay the page however you want.

Outstanding question: Hopefully the last 4 digits of the card comes back if the transaction is successful.

Simon_Weaver
  • 140,023
  • 84
  • 646
  • 689
  • Why was this downvoted? Its a little confusing, but I think I understand. They pass all the information back in a get request to the redirect url? – Josh Mar 18 '10 at 21:17
  • @josh you can always upvote it back :-) yes you pretty much have the idea, except its not necessarily a redirect url that they send it back to. its just a URL that theyre dedirecting to. its up to you whether or not this URl on your site does a redirect. in the end we went with Authorize.NET's CIM which gave us a little more flexibility and we jsut happened to have a personal relationship with our merchant and they couldn't work with braintree. – Simon_Weaver Mar 19 '10 at 09:45
  • I actually contacted Braintree, and they sent me an API guide which details the response method. You specify in your form submit, and they use that url to send the response in a callback to you. Its confusing that they use the word "redirect," because it makes you think its just a 302 HTTP redirect, however, its actually callback url for the response, as well. – Josh Mar 19 '10 at 22:06
3

This might not have been part of the API when the question was originally asked, but Braintree has Custom Fields that you can define to send along with the customer and credit card data. Each field can be either "Pass Thru" only or "Store and Pass Thru"

If you don't need the additional data stored in the Braintree vault, set the fields up as "Pass Thru" and then name your form inputs:

transaction[custom_fields][name_that_was_configured_in_control_panel]

or, if the square brackets are an issue:

transaction__custom_fields__name_that_was_configured_in_control_panel

If you do that, then the data will be passed back to your app when you call:

result = Braintree::TransparentRedirect.confirm(query_string)
Matt Miller
  • 3,501
  • 5
  • 27
  • 26
  • Braintree have two API's - the older Orange gateway and the newer Blue gateway. Simon_Weaver's answer references Braintree Orange and your answer is referencing Braintree Blue (which includes custom fields). – davidsmalley Dec 14 '12 at 11:17
2

I had the very same need, and the way I solved it was with a bit of ajax:

I have a form with two fieldsets one for the user fields and the other with the credit card details

  • when the user presses submit I the user fields get serialized and sent via ajax to my app
  • If the validation for the user fields passes the app responds with some json containing the transparent redirect transaction data that was previously missing from the form
  • the form is cloned and gets appended a new input which value is the transparent redirect transaction data.
  • the form is submitted to braintree.
  • voila, sign up and pay at the same time

maybe this jQuery snippet will help clarify: https://gist.github.com/742811

Macario
  • 2,214
  • 2
  • 22
  • 40
0

I'm going to be using Braintree's transparent redirect on a project I have coming up, and having thought about this myself, I think the best option is to break the form up into two pages. The form on the first page is POSTed to your app, and includes account name, username, etc. The form on the second page is only payment information, and is POSTed to Braintree.

This way you can validate their information in the first step. If it turns out that there's a typo in their email address and they can't be reached, or their username is already taken, or their password and password confirmation don't match, or whatever, then they can correct that before Braintree charges their card. You definitely don't want someone to pay you and then find out that their account wasn't created successfully, or you'll have some very unhappy customers.

So, two pages seems to me to be the cleanest way to do it. I haven't looked at the process that 37signals uses - my guess is that they use Javascript to catch the submission of the form, then send the account information to their app to be validated and saved. If it's not, they display an error message. If it is, they let the form submission to Braintree go through. This would let them keep the signup form to one page, but it sounds like it would be messy to me. You might look at their site's javascript and see what you can see, though.

Edit - Yeah, it looks like that's what they do. They're using Prototype, which I'm not terribly familiar with, but you can see their code for yourself at the bottom of this file. It doesn't look that bad, actually - I might try this myself.

PreciousBodilyFluids
  • 11,881
  • 3
  • 37
  • 44
  • in other words they use AJAX to submit to BrainTree. not quite sure what happens if Javascript is turned off ! – Simon_Weaver Nov 29 '09 at 01:35
  • verified by using Fiddler that you dont need a two page flow (unless of course that makes sense for your business flow). Braintree will send back any POST data during the call back so you can do with it what you will. not sure what problem Robin was having that prevented this – Simon_Weaver Nov 30 '09 at 21:04