Signup form using Braintree Transparent Redirect

Question

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

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.

Answer 2

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)

Answer 3

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