Lessons

Lesson Info

Creating a Custom PayPal Button

Well, we're gonna do is we're gonna create a but so we're gonna keep this kind of simple, because that's what we're trying to do. We're just trying to sell something and keep it dead simple. Right When we create this button, this is the same type of often we're gonna create via Amazon via this view. Other services. We're gonna take what they give us and put it on our site. So we're not even at her site yet. We're just kind of focusing on PayPal for a little bit here. So let me click on PayPal buttons. And by the way, the reason why I am actually showing you this is because some of you may be thinking yourself. Well, don't Doesn't WordPress er doesn't somebody make a WordPress plug in that does this stuff for you? Yes, they have the reason why I'm showing you this because I want you to realize that there are a lot of times where if you do this yourself, do it manually, there are more options. Okay. If you use a plug in, for instance, they may not give you every option possible, so I jus...

t want you to see the difference there. And by the way, it is not that hard once you get into it. So going to see that once you get in the button section, you may not see anything, but there's a sample button in here. I think it's like three or four different buttons I've created some that I'm actually using on the site now. So I've got these right here. You're going to see on the right over here. It says, let's create a new But now you could if you want to click on these sample buttons and just kind of, you know, take a look at it and see what it does. They allow you to thing I love about PayPal's. They allow you to make a similar button really easily. So they've already got one set up. Like if you want to buy now, button like we've all seen, you can just click, create similar button. It'll make a copy and let you use it. But we're gonna do is we're gonna create a brand new button here. So on the right over here, you're gonna see create new button. Now, the thing I like about some of these bigger processors thes bigger companies like a papal. Like an Amazon, Like a stripe like this is it? Not only will they take care of a lot of the merchant stuff on the back end for us, they'll take care of that. Well, they'll handle security. You know, they'll handle the interface. They'll do a lot of the stuff we don't have to dio. But they'll also do things like let us look back a previous order. Still do a lot of the invoicing and things like that. They'll send out or generate the emails. For us to the client is a a receipt, if you will. A lot of the stuff we wanted Commerce set up a commerce ourselves. We gotta do all at ourselves. Okay, so this paypal button, if you take a look, it's gonna see Let's choose eight button that we want to create. I'm gonna zoom in a bit here. This is kind of cool, but you're gonna see it says all right. What kind of button we want to make here. Right there. The first option shopping cart. That's crazy. This means that if we put this on our site and it gives us a button It's just you guys just gonna literally be a button. Okay? We put the center site, it's going to say something like add to shopping cart or something like that. And when they click on it, it's gonna is going to take that product that thing and add it to their cart on papal so they can keep shopping and keep looking at your site. The big difference between a by now and shopping cart is that by now is gonna take them right over to pay, pal and say, All right, give me your name. Give me your information. Give me your money. Okay? That type of thing, it's gonna do a check out right there. Nothing I love to hear is that this service this accepts donations, which is great. So we don't have to just sell. We can just accept donations. This is dead simple. It's just going to say, you know, intern amount. We can say Here's an amount that we want to give them. We could also do things like gift certificates. You conduce subscriptions. This is a business account that will let you do this. Some of these you're definitely not going to see on a regular old account on the free account, you're going to see automatic billing, installment plans, all kinds of crazy stuff. They really take it pretty far. I'm just gonna create a simple buy now button. We want to sell a widget. Sell it, buy it. That's it done. Come over here. So I'm gonna say bye now and you're gonna come down here. It's gonna say, OK, let's add an item name. Now, A lot of this stuff you could actually kind of leave alone if you wanted to, but item name. We got a name, this thing. So this is information that's gonna show to the client to the person buying this thing. So, for instance, what I'd like to do is I'd like to sell like, a coffee cup of coffee mugs. I'll say we're gonna sell a coffee mug. Okay? You put a lot of descriptive information there if you want to, and you can give it an I d. If you really want to. This is helpful for later on tracking the description of the item name will be there. You can see it, but item idea could be useful for tracking sales and things like that. And the thing I love about all these sites these days is that says right here that you know what's this You cover over that I'm gonna say Item I d. I have no idea. I was going to 12. Okay. What does that mean? I don't know. You can put whatever you want there. We can also do a price here if we want to. I want to see my coffee mug. Costs X number of dollars. So my coffee mug is 12 bucks. We can pick a currency. We can go in and do that. And you're going to see here. This is also what I love. Need multiple prices. This is gonna open up another window here, But let's suppose that you are going to sell. I sell a T shirt or sell something that if they get the long sleeve version, it's a little more money versus the short sleeve version. You need multiple prices for this product, and we're keeping it simple. OK, not tons of skews. If I click on need multiple prices here, it's gonna tell you if you need more alone price like, let's say, even like sizes for a T shirt, that type of thing. You're actually gonna leave this blank? You're gonna leave that field blank for the payment and you're gonna enter it in the prices field that appear when you have it Looks right, sir. Right here. It says add drop down field or drop down menu with price option. You see, right there. They give you a heads up on how to do all this. So coming out here, going to see it says, Okay, let's customize the But this is kind of interesting, but this is exactly what the customers are going to see. They're going to see a by now typical PayPal button. There's some things we can do here. For instance, if you come in and it's the first thing everybody wants to do, I think it's customized the text of the appearance. It's optional. So I click on that. You're gonna see Okay, well, we got a PayPal button. That's great. But we could say Let's use a smaller button if we want, or we can say, Let's display the credit card logos or not I It's up to you. Okay? PayPal is PayPal, and they accept a lot of cards. If you really feel like you want to show the card logos, go for it. It's your your option. If you want to do that, you're also going to see that if we are selling somewhere besides the United States, we can choose a language which is great to put on the button there. And if you take a look right here, you can say I want the button text, maybe to be and they give us a lot of options here. They give us by now or pay. Now, do you pick the last one that we could do here and you could see it's actually changing or updating the button. Is we go? The last thing you can do. If you really don't like the PayPal button, you can put your own on there. Now, the thing with this, the idea that this is that you need to have the button hosted somewhere it's got to be somewhere else. OK, you're not just gonna say upload from my hard drive. That's what I'd love to have, but they don't host this stuff for us. So here I'm gonna go and say, use your own button image and If I scroll in, take a look in. You're gonna see. Okay, well, they just give you a feel. That's his, Http. What's this? Well, we gotta have the button somewhere. So here's what we can do. You're gonna find this a lot with these third party options. Like PayPal, Amazon. If we need to use an image for something and they're saying just give us the U R L. Where's the picture? What you can do is you can go back over now. I'm working on my website here. This is my WORDPRESS website. I can actually go to the admin area for my WordPress site. And you're you are l obviously is gonna be different, but I'm gonna go to WP admin here, and he asked me to log in. I'll go ahead and log in. Okay. Once you get into your admin dashboard on your site, your particular site, what we can do is we can use the media, the media library, and we can add the files that way so we could take the button we have and add it through this so I could say OK, media, let me add new If you also have another server. Some other way to do this. Go for it. It could be hosted somewhere else. It could be hosted in a social sharing site if you want to. Okay, there's a lot of ways to do this, but if you want to, you can put it up on your site. I'll say add new. I'm gonna select files. I'm gonna just going to grab that image. Okay, so, um, I got a bunch of product images that you can use and different things like that. I have a folder with a ton of this stuff in there, but you're gonna look into folders. If you guys did by and you have the files, you'll see a buy button dot Ping. We're gonna use that one, OK? So I can create a button. It's, you know, it's up to you What? It looks like, how it looks big. Whatever. I'm just gonna open that up. What it's gonna do is gonna take that button. It's gonna put it up in my WordPress site, and it's going to say All right, there it is, right there. Now, what I could do is come over and edit it when I need is I need the link to that. So I need a link to the URL. So click on at it and it's gonna open a window here and say, Well, there's your button. Great when you want to do with it. Well, on the right over here, you're going to see we have file. You are out. So this is now sitting up on my site, and I can just take this u R l and give that to PayPal so I can copy this URL. Hopefully, there we go. And I'll go back over to PayPal people and down here where it says, use your own button image. I'm just gonna paste it right in there. Like I said, if you have somewhere else, you want to put the button as long as you have the u R l. And it's live on the Web, people get to it. You can do it from just about anywhere and never go. There's my you. Well, unfortunately, I found it with PayPal. Sometimes it just does not show the button in there, which is fine. Okay. What? We have to know that it works. Okay. Now, another bunch of different things we could do to customize this as faras appearance is concerned, you can see that's it. That's what Weaken dio. Okay. And by the way, the text for the button needs to be built into the image. If you realize you saw that in the button, that created the image I created. So if I take a look up here in a customized button, we can now start to kind of edit or add different options that we want. So if I come in and say, Let's do this I can add a text field, for instance and you can do things like, uh, why don't you give me your favorite day? Not stupid. Why don't you give me your email address? Okay, this is information that we can collect. This can also be information about maybe the product, for instance, but it's very passive. In other words, it's just a field where they type stuff in, and that's you just get what they type in. Okay, so we can weaken type in different things that we want to. And there's an example you can click on to take a look at, and you can see there is an example engraving on the silver coin. That's a good example. Should use that one. That's fine, so we can add a text field. We can also add. Take a look up here. This is the next big one. Add a drop down menu with price and option. This is this is interesting. But if you decide that you wanna have, for instance, products multiple products that maybe are you know, let's say Like I said before, you're selling T shirts and you have a long sleeve versus a short sleeve, the long sleeve is more expensive. Okay, but you want to have just the buy now button and let them pick long sleeve versus shortly, for instance, and a size. What we would do is we come in here and if they are different, different prices. I would actually come up to price up here and remove the price like like, I kind of said earlier said, remove the price, and then it come down here and say, Let's have a drop down menu and we come in and actually add different prices for different listings here. For each option, this is gonna be a drop down menu that they can get at. So we could come in here and say, like, you know, um, mug colors or something like that, Okay. Or mug logos or whatever. If we're doing T shirts, you could be T shirt sizes. You see right there. It says color size is well, I just picked exactly. They did. And down here we have the option names. I could say, you know, mud colors. I could say like, uh, orange logo. Or we can say a black logo and just give them some options here as far as what they purchase. Unfortunately, with this, it's not gonna be like an actual shopping cart system where if they pick, let's say, black logo, there's gonna be a new image showing up type thing. This is just a button in the menu. You guys, it's just something they're gonna choose is something we would need to do on our own putting on our Web pages. Each price is gonna be if you take a look because I got rid of the price up here. Each price could be different. I could say that the black logo, for instance, is 24 bucks. For some reason, it costs a lot to print that one, but I'm not gonna do that. But right now they're all the same price. That's fine. I'm gonna say the currency or choose the currency here, and we've got all of our options. And if you look over here on the right, it's gonna choose or let you set these up on the right. Now, it's not actually showing me the final options here. Uh, I just have to click on done here. There we go. And then I could go over and take a look and see. This is exactly what the customer is going to see. Now, when we take this information, we're gonna take what they are creating here, generating based on our choosing. Here are our options. They're gonna give us code. We're just gonna pace the same. And this is exactly what we're gonna get on our side. Okay, so we can do a drop down menu with pricing with options like that, that's a really good thing. Kind of an easy thing. We can also just add, like a drop down menu. If you decide that Now, this is this is something also to consider if you had a drop down menu with price slash option. That might mean that you wanna have them choose. Like I said, a long sleeve versus a short sleeve T shirt. Long sleeve is more expensive than a short sleep. You're gonna get different pricing for that. If we just wanted to do, like, different colors, something like a color on a mug or something like that, we could probably just use the ad drop down menu. This is just an option that's gonna get chosen. They choose it, there's gonna be a default option. And we could say, like, you know, read mug, you know, orange mug, black market type of thing. And what's gonna happen is this is not going to change the pricing at all. This is just information that we're going to receive, and we're gonna act on it if we want to. Okay, I know if that makes sense, but let me put this in here. I could say mug color. Okay, so I might say, Let's not do that. Drop down. Let's just do this one. There's the mud color. And if I say done right there and we can add more options if we won't want to. It's just gonna let them choose an option. That is not gonna be a price option, because it's just information we receive. So once they purchase, they choose one of these is not gonna change pricing at all. We're gonna get an email or see this back in our system are set up, and we just have to act on. So, for instance, if we're gonna ship this to them, we need to pick the Red Margon ship with them. OK, so that's kind of the idea. So these are some of the things that we're gonna We're gonna look at some options and you can see it's kinda kind of limiting. There's not a ton. Um, and you can get a little creative if you want to, but not that creative. Okay, that's where we have to take it further. But this is our option. These air options. Now, if you look down here, you're going to see that the last kind of things that we want to set up shipping shipping is kind of interesting. You're going to see that we actually have a specific amount. Now you can take this further. The better the account you have. I guess you could say. But if we decide that we want to do like, this is flat rate shipping, in other words, so if you sell a product cause this is not gonna be a shopping cart, we're just selling like one thing. Essentially, in this instance, we're gonna go out and say I'm not shortly. Could continue. We're going to say it's like five bucks to send a month, regardless, If I'm in the US, if I'm here etcetera, OK, but if we want to take this a little bit further, you can click on help. I'm not gonna go through a lot of this, but you can actually see that we have preferences and our profile weaken set, which can make things a little bit more dynamic. OK, so if you decide you want to go there and set up some shipping calculations, you can do that to your call, not going to go there. But that's what you could do. And if you do set up shipping calculations, you're gonna leave this blank. I believe this field. So that's a flat rate. Look down here, a tax rate. This is kind of interesting, but you just have a single tax rate that you can put in here. Okay, so you child, choose whatever states murder, you know, area you're in the tax rate based on that area, etcetera. You can put that in if you decide to. That doesn't to be attacks. If you look down here, you can If you want to use a merchant account, I d which is part of papal part of all this on, and they set it up. And to give you this I d to work with if you have the business business account or you could just use your email address, Which makes sense. Okay, The merchant account ideas is a little more. It's gonna hide your main email address essentially through the pain of process. So if you don't want your email address showing, you could use that. All right, down here, you can see we can also, if we want to track all this stuff now, you'll see that some of these options will not be available if you just have a free okay, a free account. If you just have the standard accounts, not a business account. But you can go in here and say. All right, let's set. Save this thing. We could save the button. It could be it'll be here next time we go in, we could just grab the content and go. You can do things like track inventory if you want to. It gets a little bit further along. I'm not gonna go through all this. You can actually go. Is faras and you guys this? Honestly, When I first started doing PayPal, I never thought this is possible. But if you have the business account, you could go in and say, uh let's say that there are 10 in stock and I want if it gets down to three and stock, I want you to alert me. So there's a lot of things like we can do as far as tracking is concerned. Attract inventory. You contract profit losses, and it just goes down down the rabbit hole a bit. I'm not gonna get to all of these options, but is there some of the things we can do now? This is interesting. Can customers buy when it's sold out? You decide. Yes. It could be on back order or not. You say no, you could take them to a page to say maybe maybe you make a page on your website that says this item is sold out. Sorry. You know, do something else or buy something else, etcetera. We can also, if you have the business account, we can customize down here at the bottom, customize some advanced features. And this, Like I said, you're not gonna get these if you have just the personal account. But if you want to let your customer change order quantities, you can do that. If they want to be able to choose. Hey, you know what? Instead of two, I want three. They could do that on the check out page. I can say yes or no can. They added special instructions a little bit of field. You guys will notice that I'm going through these a little bit faster because there's just a lot of these. They make sense. Do you need your customers shipping addressed? This is huge. If this is a big mistake, a lot of us make. If you say we will ship it to you for five bucks and all you capture is their email address in their name. What do you mean? So you gotta gotta think about that. Yes, I do. Um, you can Also, this is great. As soon as they check out, a lot of people get lost in system because they might stick on. It might stay on the papal Carter page, and they might be like, you know, how do we get back to the site? You know, that type of thing you can actually tell them? Let's go back over and you could have another page you create for this, like saying thank you or something like that. But I'll say, like cell with the bpd. Uprima training dot com. You can put your you are l in there and you could say, taking the home page. Or you can say, Take him to like, Ah, thanks Page or something like that. It's your call so you can set that up. I don't have a thank you. So it's on no babes. Also, you can say if they finish completely, you can take them to something else. There's a lot of ways you can handle this. Like I say, Let's just use the same page. There we go. And we also have advanced variables not going over this. If you decide you want to learn how to work with these, you could say, What's this? And go there on these air Just different things that you can work with during the payment process. It even gives you the option, if you will, to build a hook in with third party products to send information to them. So there's some cool things you could do here. Okay, that took a while, right? So we created the button we set up. Our different are our site, our customer content. We also went and set up our account to get this to work. Once we get this done, we can now say, Let's finally create the button. I'm gonna tell you right now if if some of this is boring to you when you look at this you like, I will never need that my life you could go a simple assay makeup pay Now button your buy. Now button, give the product name in a price and create the button and go Look at it. You can do that. You can always come back and here to edit this stuff. I'm gonna click on create button right now and it's gonna take me out. Take me out to the final page. Here is going to say OK, sold out. Redirect you are all is required. And I actually have a sold out every year. Redirect your are. But is that customize? Yes. Take customers in the cancel. I'm gonna turn that off. Where is the sold out, you Earl? Okay, so, yes, I'll just create the button that should do it for me. It's gonna give you those errors in case you have something wrong. Now you come to like rubber meets the road. You set this button up, you're ready to sell this thing on your site. Now we can do is if you come down here and if you don't deal with code, this might freak out a little bit. It's OK, but it's really easy. You're going to get right here. It's gonna say, OK, this is what you put on your website. The idea here is that we're going to select this code it's gonna selected for us. We're gonna copy it. I'm just getting pasted on a page. So what I'm gonna do is I'm gonna go out and copy that stuff, so I'll say, Copy it. And what's I? I will kind of throw a heads up to you in just a few minutes. Here. It's something that everybody makes a mistake on. But if you decide to edit the button, you're going to see that there are edit buttons. Go back to edit this button. You know, all kinds of things go to my safe buttons. If you go to edit it, you need to re copy repast. The code you have in there This is not gonna change dynamically. Okay, so when we pace the center website, we're going to paste it again. I've got that stuff copied. Let me go back over to my page. And what I'm gonna do is I'm gonna make a page for this so specifically typically will create some kind of like, you know, page in our site that has our products, like a product page. So I say, I'm gonna go to add a new page. I'm back in my WordPress site in my admin area, and I'll come in and say, All right, this is gonna be my products page, for instance. Pretty simple, because you don't have to do this. You could also, just if you have, ah, sidebar. Or if you have an existing page and just want to slap a PayPal button there, you can do that too. It doesn't really have to create a separate Pidge. And what I could do is say, OK, let me choose a template here. I'll say and make sure there's a right sidebar, for instance, that looks pretty good. And I'm gonna go and publish this page and I'll get that out there Now if we want to take that code that we got, What we need to do now is we need to actually just stick it on the page. You got to be careful, though. You're going to see right up here that in WordPress we have the two tabs and got the visual in the text. But I want you to do is I want to go to the text tab here because we're gonna be dealing in code. So once you go to the text tab, I'm gonna right click in here and just paste that stuff. And there it is, essentially, what it generated was it generated the form tag that's got an action on it and says somebody clicks this button, go to the PayPal website. You can see right here. Now, check this out. This is kind of cool. This u r l may make sense to you, but it's paypal dot com and check right here. Https. It is secure. Okay, Now it's gonna go in and give us fields. What I can do now is I can click on update. I've got that code in there and I could go take a look at it. I'm gonna go view the page here real quick and see what we get and take a look. There it is, right there. Mug color. I could choose that. White blag. Black Red. Now, I'm gonna tell you right now that the the theme that I have here the creative life theme I did some formatting to the fields. I made them look a little different. Typically, if you copy paste the papal stuff, it always looks the same. You know what I mean? But I went in and created some CSS that would kind of effect. He's a little to make him look a teeny bit better. And then we have the buy now button, And if I go in and click on by now. You're gonna see now this is gonna be one of the keys here. It's gonna replace the page that they're on. Okay, so it's going to do that and you're gonna see there's coffee mug, we go in and I can say, Let's accept the item price. I told them they could set the item price, which probably dumbest thing in the world. I could set the quantity right there. I could say I want to weaken update, and we go through a process because I have that business account because it's free the papal business account you're gonna see. Not only can they pay with the PayPal account, which is what the free one could do. But if I could look down here, they can also pay with a debit or credit card, one of the ones that they accept. So you can see here that it's off site click a button. Go Done. Pretty easy. Pretty easy to dio. Let me let me do this. I'm gonna go back over to the page itself. You just quickly go back, back and see if I can get there. Let me go back to the page. Now, if we look at the page, you're going to see that this is not how we want to sell stuff, right? Yes. We want a button. We want somebody to buy it, etcetera. The process is great when I'm talking about his user experience here. If you look at this, you look at the product page. You're gonna see mug color. And by now, what does that even mean? Well, we need to do using a button like this from Amazon from any one of these kinds of services. We're gonna try and put some of our own content in here. It's gonna be simple. Gonna be dead simple. But if I go back over to that page, you're going to see that I have the form here. There it is, right there. What I can do is I can go in and add an image at some text, do different things like that. I could do something like this right on top of that. We don't want to intermingle it with the form tag. You want to keep it kind of separate? I could say I got products here and I want to set up like this is actually gonna be Just keep it simple here. This is gonna be a coffee mug, and we're just going to do all this stuff manually. If you decide to change descriptions, the content, etcetera, you're going to do it right on your page here. Okay, I'm gonna also go in and add an image, So I'm gonna click on add Media. This lets me at an image, and I'm gonna go upload a file and I'll select files here. If you take a look. I actually have a whole bunch of product images that you can grab if you want to. Uh, these are just some that you can work with these air typically paying, or J pic files these air in that folder. And if you look out there, I have coffee cup topping. I'll just grab that one. It will upload it for me. I could insert that in the page if I want to. And a lot of times everybody just This is something to pay attention to. I'm sure a lot of us you have noticed this before, but if you ever insert a media file or an image using this method, it almost always creates a link to the media file, which just freaks me out. It's like somebody could click that and just go see the picture in a page by itself. I always turn this to none. Almost always. So they say, Don't link to anything. Just put the picture in there. Okay? I will insert it in the page. It'll just stick it in there, and we've got ourselves the image. I'll go an update and view the page. Take a look at it and we could see they've got products. Coffee, bug, vivo, donut. What color do you want by now? And at least now there's some context. But you can see that I'm adding this stuff manually. And if you go in new CSS and the styling and all that stuff, you could do all that yourself. Okay, But this is that This is a really, really simple payment method. That's the idea. Now I'm gonna go back over. Let me go back over to PayPal. Like I mentioned, if you decide that that button use messed up the option something's not working right. You don't like the image, etcetera. You're gonna go back to your paypal account you're gonna see, Go back and edit this button or even something like, you know, see my saved buttons. And if I go back to edit this one, I love the fact that it says Make a similar one. It's just quick, quick, make a copy. Keep moving. If I go back to edit this one, I can and go in and say, Hey, let's set the price That should have done that and just said options and that's it. Once you change these options, something simple maybe. Okay, I'm gonna go ahead and save changes, Make any kind of change. You need to make sure that it's gonna Where's the code? That's great. Okay, there's no code. Let me continue here and refresh. I've never seen that before. That's great. So just follow me here, OK? What it's gonna do is it's gonna give you the code again. You're going to select the code you're gonna copy and pasted on your page again. This is what I'm trying to say. Make a change. Got to redo it. Okay. Typically, if we have, like a full on cart or something like that, that's on site. If we make this change. It's gonna be in our database so we don't have to go to the actual pages to make the updates. So that's working in the PayPal button. Not too bad. I would suggest taking a look at a lot of these others. Take a look at Amazon payments. They have a very similar process. You create a button, they can take it much further. A lot of different options using in amazon dot com account essentially to do this.