Registering a Form Using Braintree Transparent Forwarding

Question

I am developing an application in Rails and I want the user to be able to register and provide their card details in one form. I use the Braintree API and transparently redirect them, which means that form data is sent directly to Braintree.

How can I store and later retrieve non-payment information provided by the user from this form, for example. account name, username? These values ​​are not returned in the response provided by Braintree.

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

thanks

Robin

Answer 1

OK, what happens if JavaScript is disabled. It looks like BaseCamp decided to send a credit card via AJAX, buto also handles the situation when JavaScript is disabled and the entire form is passed to them, including non-payment fields.

Thanks to Fiddler and BaseCamp.

• The user fills out a form containing both payment data and everything else that may be required in the HTML form for registration, delivery, shopping cart, etc.

• The form is submitted https://secure.braintreepaymentgateway.com/api/transact.php

• BrainTree does its magic and adds a credit card to the store and transfers all the information to your page. this is

This does this by actually calling the url that you must process, but you process 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]=[e-mail] &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 

Supposedly, a response code of 100 means "bad credit card," since I put a fake CC number for testing.

4) You can redisplay the page as you wish.

Outstanding question: We hope that the last 4 digits of the card will be returned if the transaction was successful.

Answer 2

It may not have been part of the API when the question was originally asked, but Braintree has Custom fields that you can define for sending with customer and credit card details. Each field can be either "Pass Thru" or "Store and Pass Thru"

If you do not need additional data stored in the Braintree repository, set the fields up as “Pass Thru” and then enter your form inputs:

 transaction[custom_fields][name_that_was_configured_in_control_panel] 

or if square brackets are a problem:

 transaction__custom_fields__name_that_was_configured_in_control_panel 

If you do this, the data will be transferred back to your application when you call:

 result = Braintree::TransparentRedirect.confirm(query_string) 

Answer 3

I had the same need, and as I solved it, there was a bit of ajax:

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

• when the user clicks on submit, the user fields are serialized and sent via ajax to my application.
• If the validation for user fields passes, the application responds with some json containing transparent redirect transaction data that was previously absent on the form
• the form is cloned and a new input is added, the value of which is transparent data about transaction forwarding.
• the form is passed to braintree.
• voila, register and pay at the same time

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

Answer 4

I'm going to use Brintree transparent redirects in the project I came up with, and thinking about it, I think the best option is to split the form into two pages. The form on the first page is sent to your application and includes the account name, username, etc. The form on the second page is only payment information and is sent to Braintree.

Thus, you can verify your information in the first step. If it turns out that there is a typo in their email address and they cannot be reached, or their username is already accepted, or their password and password confirmation do not match or something else, then they can fix it before Braintree charges a card. You definitely do not want someone to pay you, and then find out that their account has not been created successfully, or that you will have very dissatisfied customers.

So, two pages seem to me the cleanest way to do this. I did not look at the process that 37signals uses - I assume that they use Javascript to catch the submission of the form, and then send the account information to their application for verification and saving. If this is not the case, an error message is displayed. If so, they allow you to transfer the form to Braintree. This will allow them to save the registration form on one page, but it looks like it would be dirty for me. You can look at your javascript site and see what you can see.

Edit - Yes, it looks like they are doing. They use Prototype, which I am not very familiar with, but you can see their code for yourself at the bottom of this file . This is actually not so bad, I could try it myself.