Quick Guide: Creating Paypal Buttons with ActionScript 3.0

Apr 29th in Tools & Tips by Dario Gutierrez

In this tutorial we'll quickly create two different Paypal buttons: "Buy Now" and "Donate". All we'll need is a Paypal Business Account to generate some code for us.

PG

Author: Dario Gutierrez

My name is Dario Gutierrez and I am a Mexican Web Designer. I have been a Flash Designer for over 6 years and an Web Designer for about 8 years. I am currently a web designer senior at Royal Resorts in Cancun Mexico and I have a small Web Design Studio. I started a Flash Blog http://labs.dariux.com, you can see my portfolio dariux.com. Follow me on twitter _dariux.

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 7 - Define "EventListener"

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

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:

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.


Enjoy this Post?

We'd love your vote!

User Comments

( ADD YOURS )
  1. PG

    zeroone April 29th

    Greate tutorials

    ( Reply )
  2. PG

    nightwork April 29th

    Awesome tutorial! Was looking for these!
    Thanks!

    ( Reply )
  3. PG

    Franky April 29th

    Nice tut. I guess this would also work for opening any external page!

    Nice.

    ( Reply )
  4. PG

    Sam G. Daniel April 29th

    Good tutorial. Simple and straight forward.

    ( Reply )
  5. PG

    joell lapitan April 29th

    nice tut.. this will be very helpful..

    ( Reply )
  6. PG

    James April 29th

    Awesome! very well explained

    ( Reply )
  7. PG

    shampi April 29th

    Awesome ! Really effective

    ( Reply )
  8. PG

    lawrence77 April 30th

    nice tut thanks! ;)

    ( Reply )
  9. PG

    tirtha April 30th

    it’s so fantastic please sent me this like any tuts at pakhrin299@hotmail.com

    ( Reply )
    1. PG

      Andrew May 2nd

      Lol. Just subscribe to the RSS

      ( Reply )
  10. PG

    Luis María May 14th

    Me da mucho orgullo saber que un compatriota mexicano escribe en este tipo de sitios con gran calidad. Te felicito. Vi tu sitio y me gusto mucho la gráfica además de su sencillez.

    yo soy del estado de México y llevo diseñando en flash como tres años, mi fuerte más bien es el diseño y animación, me cuesta la programación.

    Yo también hago tutos pero con tópicos más comunes.

    Te dejo Saludos!!!

    ( Reply )
    1. PG

      Dario Gutierrez May 22nd

      Gracias María, checa mi nuevo blog de labs tengo 2 tuts por publicar, quedate pendiente. Saludos desde Cancun. Sigueme en twitter @_dariux. Saludos.

      Thanks Maria, you can check my new blog dg labs, I have 2 tuts for soon publish, I will wait your visit. Best regards!

      ( Reply )
  11. PG

    qana6r-des.com May 16th

    wooow
    gooog

    ( Reply )
  12. PG

    swarup podar May 18th

    very nice tut…

    ( Reply )
  13. PG

    atanism May 24th

    no add to shopping cart button?

    ( Reply )
  14. PG

    teneb May 28th

    Is it possible to let the user input any other amount instead of the predefined values?

    ( Reply )
    1. PG

      Dario Gutierrez May 28th

      Sure teneb, let me modify the code and publish it here.

      ( Reply )
    2. PG

      Dario Gutierrez June 5th

      Teneb here the new file, now you can input a quantity for the “buy button”. I hope can help you.

      http://labs.dariux.com/paypal-buttons-with-qty.fla

      ( Reply )
  15. PG

    brendan June 2nd

    thanks

    ( Reply )
  16. PG

    brendan June 2nd

    how would a view cart work though?

    ( Reply )
  17. PG

    Lisa Mercedes June 15th

    Nice tutorial. It would be grand if you taught us how to also create “View Cart” and “Checkout” buttons to complete the tutorial.

    x lisa x

    ( Reply )
  18. PG

    sergio June 26th

    Awsome tutorial, been looking for something like this!!

    ( Reply )
  19. PG

    angie June 29th

    this is great! I am stuck trying to incorporate the flash combobox component so I can have choices for sizes. Any pointers?

    Thanks!

    ( Reply )
  20. PG

    Eric July 3rd

    @atanism: shopping cart? like if you wanted to buy a dozen donuts? haha

    -Eric

    ( Reply )
  21. PG

    Jesse Mercado July 27th

    how would i create a flash action script 3.0 button with multiple options, that communicates with paypal, to purchase products, I’ve created individual buttons in flash (for Now) using AC 2.0 see (i.e) on my site…
    gogreekstore.com

    ( Reply )
    1. PG

      Dario Gutierrez August 4th

      Hi Jesse, let me modify the source code and send a copy with this features.

      ( Reply )
      1. hey did u have a chance to modify the source code? and I would definitely appreciate a “view cart” button to work the same way.

      2. hey… any luck

  22. PG

    Dulisha August 12th

    This is Good Man,In moment need me Flash Button to use for Pay Pal.

    ( Reply )
  23. PG

    Lisa Mercedes August 12th

    View cart code for ActionScript 3.0 is soooooooo hard to find…why?

    ( Reply )
  24. PG

    alex August 14th

    Is there a way to have it so that instead of donating a cup of coffee, it goes to a Text input box (numbers only)

    Where the user enters like 5.00 and that is what they are donating?

    Or 7.00 and thats their donation?

    Is that possible?

    Thanks

    ( Reply )
  25. PG

    david August 14th

    hey guys this is the tuts ive been after for ages does any one know how to make a view cart button :) i keep getting ioerror

    ( Reply )
  26. PG

    david August 14th

    great tut could anyone help me create a view cart the same way i keep gettng a error

    ( Reply )
  27. PG

    Jen September 10th

    Great tutorial Dario! Is it possible to create an “Add to Cart” button using the method shown in this tutorial?

    ( Reply )
  28. hey… did you have any luck

    ( Reply )
  29. PG

    Michael Webb September 29th

    Can this be modified to work with actionscripting 2.0 ??

    ( Reply )
  30. PG

    lean ray October 15th

    How can I make a button like this using flash actionscript 2 & 1?

    ( Reply )
  31. PG

    Faraz October 16th

    Nice Script very simple and easy. Thanks Faraz

    ( Reply )
  32. PG

    Osirus October 28th

    This is an excellent start for me … thank you. I am working to build a shopping cart using Flash CS3 and would like to know if it is possible to add combo boxes containing color/size options and passed onto paypal for purchase using Actionscript 3?

    ( Reply )
  33. PG

    Kamil November 4th

    Could you please post it in ActionScript 2.0?
    I just need the script in AS2.0 for “buy now” button.
    I’d appreciate any help,

    ( Reply )
  1. Arrow
    Gravatar

    Your Name
    November 4th