WeCodeThings Blog

So I’ve been meaning to allow users to donate to my site using PayPal, and I wanted to keep track of who donated and for how much. It all seemed very complicated until Doug Boude came along and wrote this blog: http://www.dougboude.com/blog/1/2009/11/PayPal-IPN-Coldfusion-CFC.cfm

(Thanks Doug!).  Doug wrote some very cool code which helps communicate with PayPal after someone pays or donates money to you.

The code works great, but it assumes that you have a record in already created in your database which then passes a unique id of the record you wish to update.  PayPal takes that id and updates the table with the information of the transaction using IPN.

My problem existed when I tried to insert a record, THEN pass the id of that record to PayPal all within the push of 1 button.

When I used cfhttp to post to PayPal, it would post to a blank page. It would never actually make it to PayPal.

I could not get cfhttp to work or a simple cflocation.  So, with the help of Julian Gautier, we came up with a Jquery solution.  Here is what we came up with:

 

First. Create a CFC to handle the insert.

A few things to note within the cfc. Notice I have access set to “remote” and I am returning the format in json. this will make more sense when you see the jquery and ajax call. Return a structure that tells us if the insert was a success or a failure.

The name of my CFC is: paypalcall.cfc

1.     <cfcomponent hint=“update paypal table”>

2.     <cffunction name=“ppCreateRecord” access=“remote” output=“false” returnFormat=“json” returntype=“struct”>

3.     <cfargument name=“userid” type=“numeric” required=“yes”>

4.     <cfargument name=“firstname” type=“string” required=“yes”>

5.     <cfargument name=“lastname” type=“string” required=“yes”>

6.     <cfset returnStruct = {}>

7.     <cfset returnStruct.success = true>

8.     <cftry>

9.     <cfquery datasource=“#application.dsn#”>

10.   INSERT INTO Paypal (UserID, FirstName, LastName)

11.   VALUES(#arguments.userid#, ‘#arguments.firstname#‘, ‘#arguments.lastname#‘)

12.   </cfquery>

13.   <cfquery name=“qryPaypal” datasource=“#application.dsn#”>

14.   SELECT MAX(ID) AS PK_ID

15.   FROM tablePaypal

16.   </cfquery>

17.   <cfset returnStruct.pk = qryPaypal.PK_ID>

18.   <cfcatch>

19.   <cfset returnStruct.success = false>

20.   </cfcatch>

21.   </cftry>

22.   <cfreturn returnStruct>

23.   </cffunction>

24.   </cfcomponent>

Next, on the page which you wish to have your donate / pay button.

At the top of the page, include your cfajaxproxy call:

(Assuming you put your cfc in the same folder as your cfm file)

Notice that we are using a jsclassname, this is so we can tie the cfajaxproxy call to jquery.

<cfajaxproxy cfc=“paypalcall” jsclassname=“cfPaypal”>

 

 

Next, make sure that Jquery is loaded. For more info on how to load jquery, go here: http://www.jquery.com/

 

1.     <cfsavecontent variable=“jquery”>

2.     <script type=“text/javascript” src=“guru_includes/jquery.js” />

3.     </cfsavecontent>

4.     <cfhtmlhead text=“#jquery#”>

 

Next, let’s write the jquery to handle the cfajax call:

The first line creates a variable which ties the cfajaxproxy call together. Now if we want to execute a method within our cfc,

We just need to write it like this:

tblPaypal.ppCreateRecord(<cfoutput>#qryInfo.userid#</cfoutput>,<cfoutput>‘#qryInfo.FirstName#’</cfoutput>,
<cfoutput>‘#qryInfo.LastName#’</cfoutput>);

That line would call our ppCreateRecord method in our cfc and pass it the arguments that it needs to insert a record.

tblPaypal.setCallbackHandler(payPalCallBack);
And
tblPaypal.setErrorHandler(payPallError);

These two lines are built in cfajaxproxy functions that handle what happens when the cfc returns from being called.

The tblPaypal.setErrorHandler(payPallError); line will not be called unless there is an error that happens in our cfc or within our cfajaxproxy call.

An important line of code that cannot be missed is the last line:
$(window).load(pageInit);

This line runs the pageInit function as soon as all the elements are rendered on the page.

When it is called, it adds a click event to our PayPal submit button, that way the cfc insert call is made prior to post to paypal.

(*Something to note, in this line of code: var tblPaypal=new cfPaypal();   be sure to NOT name the variable the same name as your cfajaxproxy variable name. This creates a conflict only in IE. To avoid this, just make sure they are different names.)

1.     <cfsavecontent variable=“jquery_paypal”>

2.     <script>

3.     var tblPaypal=new cfPaypal();

4.      

5.     function pageInit()

6.     {

7.     $(“#btnPaypalSubmit”).click(btnPaypalSubmitClick);

8.     tblPaypal.setCallbackHandler(payPalCallBack);

9.     tblPaypal.setErrorHandler(payPallError);

10.   }

11.   function btnPaypalSubmitClick()

12.   {

13.   <!— qryInfo.userid, qryInfo.firstname, qryInfo.lastname are assuming you have a logged in user and you have the users id, first and last name to pass to paypal. —>

14.   tblPaypal.ppCreateRecord(<cfoutput>#qryInfo.userid#</cfoutput>,<cfoutput>‘#qryInfo.FirstName#’</cfoutput>,
<cfoutput>‘#qryInfo.LastName#’</cfoutput>);

15.   }

16.   function payPalCallBack(json)

17.   {

18.   alert(json);

19.   if(json.SUCCESS)

20.   {

21.   $(“#custom”).val(json.PK);

22.   $(“#frmPost”).submit();

23.   }

24.   else

25.   {

26.   alert(“Error while making ajax call”);

27.   }

28.   }

29.   function payPallError()

30.   {

31.   alert(“error while making ajax call”);

32.   }

33.   $(window).load(pageInit);

34.   </script>

35.   </cfsavecontent>

36.   <cfhtmlhead text=“#jquery_paypal#”/>

Last but not least… We just need to add the form that PayPal gave us:

Let’s make sure we give the button an id=”btnPaypalSubmit” that way we can select it in jquery.

1.     <cfoutput>

2.     <form action=“https://www.paypal.com/cgi-bin/webscr” id=“frmPost” method=“post” name=“frmPost”>

3.     <input type=“hidden” name=“payment_status” value=“completed” />

4.     <input type=“hidden” name=“mc_gross” value=“.01″ />

5.     <input type=“hidden” name=“custom” id=“custom” value=“3″ />

6.     <input type=“hidden” name=“cmd” value=“_s-xclick”>

7.     <input type=“hidden” name=“hosted_button_id” value=“9337626″>

8.     <input type=“button” border=“0″ id=“btnPaypalSubmit” name=“GoPaypal” value=“submit” alt=“PayPal - The safer, easier way to pay online!”>

9.     </form>

10.   </cfoutput>

 
Again, many thanks to Julian Gautier and Doug Boude.

 

DEMO

Download Code

So once upon a time, I had an idea that it would be cool to run a little personal website that was only to be used by my friends.  This website was to have a number of NFL football games that you could pick from and then if you guessed the most right, you win.

Sounds very simple right?  WRONG! I ran into a HUGE roadblock. I first built the site so I could input the games that you could pick from manually, then after the games were over, I would have to input the scores manually. Seeing how this gets very annoying, I wanted to incorporate some live scoring.

I tried to find a free xml feed, however, this was not the case. I spent at least a month searching to find a feed that I could use for my site. I thought about html scraping, but that seemed tedious, a lot of work and if their site changed, I would have to change my code. That idea was no good.

So I decided that I would pay for it.  I mean how much could a NFL scores feed really cost right? Wow, I couldn’t have been more wrong!

I called Stats.inc and after 2 weeks of me explaining that I wanted the cheapest form of scores and that I was a non-profit website, they gave me a quote of $40,000. 

Yes… I said $40,000 to get a feed that will save me 5 minutes inputting my own scores.

So, I decided to not spend the price of a brand new Lexus on 5 minutes of score inputting and continue my search for a free feed.

After a year of occasionally looking, my buddy stumbled upon something that was actually useful.
(He gave me only the direct url, so I don’t know the site or forum where he found it. sorry)

Here is what he found: http://sports.espn.go.com/nfl/bottomline/scores

An ESPN link that has only the output of a url string, which inside of the url string are LIVE SCORES!

My first question was why the hell does ESPN have a link that just produces a url string and nothing else.

So I decided to investigate a little further.  I found that if you strip the directories, you get: http://sports.espn.go.com

Which is a desktop application used by ESPN to install a sports ticker on your computer. This application sends http requests to ESPN to update the ticker which is installed on your computer.  So if there is a nfl url link, then there must others right?

Right! 

I installed the ticker, and then used a packet sniffer to grab all the http requests being sent from my computer. It revealed all of the url strings being used by ESPN to update the ticker.

 

http://sports.espn.go.com/nfl/bottomline/scores

http://sports.espn.go.com/nba/bottomline/scores

http://sports.espn.go.com/mlb/bottomline/scores

http://sports.espn.go.com/ncf/bottomline/scores

http://sports.espn.go.com/rpm/bottomline/race

http://sports.espn.go.com/sports/golf/bottomLineGolfLeaderboard

http://sports.espn.go.com/wnba/bottomline/scores

http://sports.espn.go.com/espn/bottomline/news

 

So now I have:

1. Consistency. ESPN uses the url string to update their application, therefore there should be little if no code changes that will be needed after I initially write the code to extract the scores.

2. FREE! I get to spend $40,000 somewhere else.

3. Accurate Scores. Since the feed is coming from ESPN and not a 3rd party site that might go down or put in bad scores, I feel good about this one.

4. Easier project. Parse a url string? Wayyy better than html scraping, or any other horrible method to extract the data.

(I would like to thank Steve Weyrick CFBLOGWORM for working on this project as well)

 

So for reason 1-4, I wrote this code. ENJOY!

 

 

 

Keep in mind that if you come across this blog while the NFL is in the off season, you will not see the scores on the demo because the scores are live J