Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

010 Adding PayPal buttons to your pages

From: View Source

Video: 010 Adding PayPal buttons to your pages

Hello! This is Ray Villalobos and welcome to View Source. In this episode, I'm going to show you how to create e-commerce links using PayPal buttons. So, if you're looking for an easy way to get paid, it's time to View Source. PayPal is a real easy way to accept credit card payments for your freelance project, donations, or any other type of e-commerce. Creating PayPal buttons is super simple. Once you understand the basics, there's a ton of options that'll let you create subscriptions, shopping carts and a lot more. But the first thing you'll need is a PayPal account, which you can get on their web site, just paypal.com and then sign in for a PayPal account.

010 Adding PayPal buttons to your pages

Hello! This is Ray Villalobos and welcome to View Source. In this episode, I'm going to show you how to create e-commerce links using PayPal buttons. So, if you're looking for an easy way to get paid, it's time to View Source. PayPal is a real easy way to accept credit card payments for your freelance project, donations, or any other type of e-commerce. Creating PayPal buttons is super simple. Once you understand the basics, there's a ton of options that'll let you create subscriptions, shopping carts and a lot more. But the first thing you'll need is a PayPal account, which you can get on their web site, just paypal.com and then sign in for a PayPal account.

Once you have an account, creating a button is as easy as creating a form. As a matter of fact, a PayPal button is nothing more than a form. So, let's look at the most basic code necessary to create a PayPal button. So, I have the most simplest type of PayPal payment, which is a donation, in this piece of code right here. We'll go ahead and paste it into our basic body tag, and you'll see that you'll get this Donate button. So, when you create this form you just create a regular form where the action field is the PayPal processor URL, which is this link right there.

We have added just a couple of input fields plus a submit button here. So, the first and most important type of field is the CMD field or the command field. This is how you tell PayPal what type of payment do you want to take. So, if you take a donation, the value of that field should be _donations. The next most important field is the business field. The business field is simply the link to the email you use when you signed up for PayPal. So, to send money to anybody else, you would just type their email address right here.

Finally, we need to be able to submit this donation, so you need to include an input type submit button, so that people can click on it. So, in here I've changed the values so that the button says Donate instead of the normal submit. So, if we go to this page and we click on the Donate button, you'll see that this will take you to the PayPal page where you can type in a purpose for the donation, a donation amount and update the total, and then go through the normal PayPal payment procedure, which allows you put in your credit card or if you have a PayPal account, you can type in your information right here.

You can add a number of other options to your PayPal buttons. So, let's take a look at some of those. We are back into this codesnippets file and you can see that I can add another input attribute called item_name. With the item_name I can tell people what it is that they're going to be donating to when they click on the button. So, I'll add that hidden field called item_name, I'll save this, and then I'll go back into my Donate button and I'll hit Donate, and this time when I go to PayPal it already says something right here under purpose. But a donate button might not be the most visual thing to use, because people might not be getting a good idea of what it is they are going to be donating to, so it would be nice to insert a photo instead of a submit button, and we could do that by changing the input field to an image input field.

So, we're going to go into codesnippets and I've already prepared a donate button right here. It's just a picture of a cat with donate to your local shelter. So, I'm going to go back into codesnippets and grab this next version right here, and the only difference between this version and the last is that it has an input type="image". Under the input type="image", I have a link to my image that I want to use. So, I'm going to copy that, go back into index.html, and replace this form with my button and now we can see that the photo shows up. The photo behaves like a button, so it's clickable onto the PayPal page.

So it works in exactly the same way, but we can use an image instead of using a button. Now, on occasion you'll want to be able to create a link instead of an image or instead of using a form. Because a form is not particularly convenient, you may want to create an area that has a photo and say a title and a description and make the entire thing clickable. In that case, you'll need to create a link and to create a link you can use a long URL that behaves exactly as a form. So, let's go into our codesnippets and grab this next version of our file, and you'll see that I have a link right here.

The link actually uses an image as the clickable part, so it's going to look exactly the same thing as our form that uses an image as the submit field, but all the information from this form has been transferred into a long URL. So, if you look at the code up here you can see that it has a link to the main PayPal processor. We use the same thing as the hyperlink reference of our anchor tag, but in addition to that we add a question mark to the end of our link, and then we pass it along the same elements that we use on the normal form.

So, instead of adding an input field type="hidden", cmd for the command. We just add the name and value paired, cmd=_donations, and then we use the & because we want to put the values in with ampersands in between, and then we use the next variable business= youremail@youremail.com&. Again, action=Donate, because that's the action that we want to perform, and then we can put in our item name. When we want to use spaces we use the plus signs, so Donate+to+your+local+shelter is there.

You can see that other than that this is a normal link, and the link just has an image. So, I'm going to copy this piece of code, go back into my index.html, and replace the form with an actual link. So, this looks exactly the same as the form element, but as you could see, we can change the image to just a regular text link, and put whatever we want between the anchor tags. This will still work and take you to the PayPal page, and use all the variables that we entered. Now, donation is the most basic type of PayPal transaction that you can make.

There are lots of other transactions that you can make, including selling something. So, for selling something, you would use a slightly different version of the form and we can add some additional variables. Like for example, the price of the item as well as a return variable of what we want to happen once the user finishes paying for the item on PayPal. So, that's what this version of the form does. We'll copy this, go back into the index.html file, we'll replace this. Let me go back here, and I have used another image as the submit button in this case to add this particular product that we have for sell on our site.

So things to note here, the command is different, it's no longer _donate, it's _xclick, which is how you sell things in PayPal, and we have two additional input fields; the amount input field and the return input field. There are a lot of other input fields that you can use. PayPal allows you to create all kinds of transactions, including subscriptions, recurring payments and even shopping carts. You can find out more about what you could do with PayPal by going to this page right here, I've created a special short URL that you can type.

This short URL will take you directly to this page where you can see all of the different options for the variable names, the types of values that the command field can have for example, the different types of variables for the different features, as well as every other type of input fields that you can add to enhance your form. So, for example, you can add the tax, the tax rate, the type of payment, the shipping weight, everything that you would need for a super e-commerce web site. So e-commerce doesn't have to be that hard, once you understand these PayPal variables you can create all sorts of e- commerce apps, that tie into the PayPal engine.

So, next you need to accept online payments, don't forget to View Source.

Show transcript

This video is part of

Image for View Source
View Source

20 video lessons · 15872 viewers

Ray Villalobos
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed View Source.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.