Quick Guide to Creating PayPal Buttons with ActionScript 3.0--tutorial.jcwcn.com

Final Result Preview

Let's take a look at the final result we will be working towards:

Step 1 - Document Setup

Launch Flash and create a new ActionScript 3.0 document (File > New...). Set the stage size to 600 px width and 400px height with 30 fps. I've chosen black (#000000) for the background.

Step 2 - Create the Flash Buttons

Create two layers. Name the first layer "Buttons" and the second "Actions". On the "Buttons" layer, create two buttons; one with the text "Donate a Cup of Coffee" and the other with the text "Buy Donuts". Select the Donate button, then go to properties and assign an instance name of "btDonate". Lastly, assign an instance name of "btBuynow " for the Buy Now button.

Step 3 - Login to Paypal.com

Go to www.paypal.com and login as shown in the image below.

Step 4 - Customizing the Donate Button

Go to "Merchant Services" and click on the option "Donations" located in the "Key Features" panel.

Firstly, we'll customize our button "Donate". Enter a name for the "Service" and then a "Donation ID". Now choose the currency and select "Donors contribute a fixed amount" (just type an amount). The final task for this step is to select "Plain text e-mail address".Now we move to step 2 and check "Save button at Paypal"; this is a new feature and it's very useful.For step 3 we'll customize the advanced features. Select "No" for the first two options and if you wish, you can enter the url for "cancellation" and "successful" pages.Click on "Create button" and the next screen will show you the HTML code.

Step 5 - Customizing the Buy Now Button

To customize the other button, again go to "Merchant Services". This time, click on the "Buy Now" option located in the "Key Features" panel.Within the first step choose "Products" from the combo box, select "Accept payments for" and "No, create a Buy Now button". Then enter a "Name" and "ID" for your service or product. Set the "price", "currency " and specify the "shipping" amount.Then, go to step 2 and check "Save button at Paypal".Lastly, within step 3 select "No" for the first two options and again, if you wish, you can type the url for "cancellation" and "successful" pages.Click on "Create button".

Step 6 - Copy the HTML Code

Now the two buttons have been created, go to your "Profile" and click on "My Saved Buttons" which you'll find in the "Selling Preferences" panel. Click on the "Action" drop down menu and select "View code". Copy the code, go back to Flash and paste the clipboard contents into your "Actions" layer. Repeat these steps for the other button and comment it all as HTML code. ””/

Step 4 - Customizing the Donate Button

Go to "Merchant Services" and click on the option "Donations" located in the "Key Features" panel.

Now we move to step 2 and check "Save button at Paypal"; this is a new feature and it's very useful.

For step 3 we'll customize the advanced features. Select "No" for the first two options and if you wish, you can enter the url for "cancellation" and "successful" pages.

Click on "Create button" and the next screen will show you the HTML code.

Step 5 - Customizing the Buy Now Button

To customize the other button, again go to "Merchant Services". This time, click on the "Buy Now" option located in the "Key Features" panel.

Within the first step choose "Products" from the combo box, select "Accept payments for" and "No, create a Buy Now button". Then enter a "Name" and "ID" for your service or product. Set the "price", "currency " and specify the "shipping" amount.

Then, go to step 2 and check "Save button at Paypal".

Lastly, within step 3 select "No" for the first two options and again, if you wish, you can type the url for "cancellation" and "successful" pages.

Click on "Create button".

Step 6 - Copy the HTML Code

Step 7 - Define "EventListener"

Copy the following lines of code into your "Actions" layer:

btDonate.addEventListener(MouseEvent.CLICK, donate);
btBuynow.addEventListener(MouseEvent.CLICK, buynow);

btDonate.addEventListener(MouseEvent.CLICK, donate);
btBuynow.addEventListener(MouseEvent.CLICK, buynow);

Step 8 - Define the "buynow" and "donate" Functions

Copy the following lines of code into your "Actions" layer:

view plaincopy to clipboardprint?

function donate (event:MouseEvent):void
{
var url:String = "https://www.paypal.com/cgi-bin/webscr"; //<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
var request:URLRequest = new URLRequest(url);
var paypal_donate:URLVariables = new URLVariables();
paypal_donate.cmd="_s-xclick"; //<input type="hidden" name="cmd" value="_s-xclick">
paypal_donate.hosted_button_id="4893693"; //<input type="hidden" name="hosted_button_id" value="4893693">
request.data = paypal_donate;
navigateToURL(request);
trace(paypal_donate)
}
function buynow (event:MouseEvent):void
{
var url:String = "https://www.paypal.com/cgi-bin/webscr"; //<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
var request:URLRequest = new URLRequest(url);
var paypal_buynow:URLVariables = new URLVariables();
paypal_buynow.cmd="_s-xclick"; //<input type="hidden" name="cmd" value="_s-xclick">
paypal_buynow.hosted_button_id="4901978"; //<input type="hidden" name="hosted_button_id" value="4901978">
request.data = paypal_buynow;
navigateToURL(request);
trace(paypal_buynow)
}

function donate (event:MouseEvent):void
  {
var url:String = "https://www.paypal.com/cgi-bin/webscr"; //<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
var request:URLRequest = new URLRequest(url);
var paypal_donate:URLVariables = new URLVariables();
paypal_donate.cmd="_s-xclick"; //<input type="hidden" name="cmd" value="_s-xclick">
paypal_donate.hosted_button_id="4893693"; //<input type="hidden" name="hosted_button_id" value="4893693">
request.data = paypal_donate;
navigateToURL(request);
trace(paypal_donate)
}

function buynow (event:MouseEvent):void
  {
  var url:String = "https://www.paypal.com/cgi-bin/webscr"; //<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
  var request:URLRequest = new URLRequest(url);
  var paypal_buynow:URLVariables = new URLVariables();
  paypal_buynow.cmd="_s-xclick"; //<input type="hidden" name="cmd" value="_s-xclick">
  paypal_buynow.hosted_button_id="4901978"; //<input type="hidden" name="hosted_button_id" value="4901978">
  request.data = paypal_buynow;
  navigateToURL(request);
  trace(paypal_buynow)
  }

Conclusion

Test your movie to check the link between flash and paypal.com. If you wish, you can modify the paypal buttons (taxes, tracking, inventory, donation amount, etc), have fun playing with it! I hope you enjoyed this quick guide.

discuss this topic to forum

[Print][Close][Bookmark:digg+,reddit+,del.icio.us+,dzone+]