Signup form using Braintree Transparent Redirect

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,开发者_C百科 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

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.

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)

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

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.