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.