Signup form using Braintree Transparent Redirect

Question

Hi,

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

Answer 1

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.

Answer 2

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][email protected]
&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.