Add Payment Field with airSlate SignNow

How to add payment field

this video is brought to you by wpforms today you're going to learn how to easily add payments to your wordpress website this is great to get up and running super quickly if you don't want to add a complete ecommerce store or woocommerce shop on your wordpress website you can get up and running with a simple contact form and payment system and this is perfect if you're a service provider or if you're a business who you just want to offer a simple product or service from your website this will work really really well hey everyone i'm christina with wpbeginner where we teach all about wordpress so you can grow your website and reach your audience so if you're ready let's dive in you probably already have wp forms lite at least installed on your website it's just a simple to use drag and drop form builder contact form is an easy way to get on your website using wp forms but for this one we're actually going to go with their upgraded version you want to do a pro or higher so you can go to wp forms and you want to do forward slash wp beginner to get the best discount on getting wp forms you see a little banner up here that tells you that you are in the right place so go through here grab a license and then you can we can get started once you download it locally we can head back over to our wordpress dashboard and we'll go to plugins add new and instead of searching for a plugin like we normally do we're going to upload the plugin so you can either choose file and go and find it where you have it because i already have it down here i can simply left click and drag it up to the choose file location and you see it's already here so then we can click install now once it's installed you'll also want to stick around to activate the plugin as well great now that's activated you can go in here and create your first form what we're going to do is come over here and this is what you can do anytime you need to come back to wp forms we can go to wp forms and we're going to go to settings i want to make sure i add my license key in here and because i've installed it before it remembers it but i'm going to go ahead and show you and then you can verify it and then you should get a pop-up that says congratulations everything is good to go so you should be good to go with that now that we have that we want to head over to the add-ons since it's a payment piece we want to add an add-on wpforms integrates with several payment processors you have authorized.net which is super helpful if you already have a merchant account with them then you can simply do the add-on here scrolling down they also have two other ones that you can get started with you have the paypal standard add-on if you want to do paypal and then you also have the stripe add-on for this tutorial i'm going to walk you through the stripe add-on great now that's set to active we can go back to the settings so we can set up stripe in the settings so we can go to payments and from here you simply want to connect with your stripe account so if you click on that it'll take you out to stripe you should already have an account if you don't have one it's super simple to set one up and it takes really very little bit of time maybe 30 minutes to get everything going make sure you connect everything and since we're creating it for the first time i also want to put it in test mode because i want to go through the whole process like a potential customer or potential client would do and so i want to see what it's going to look like so i'm going to go through the whole process and in order to do the test mode you need to connect your account with with wp forms again it's just because we're going to be in test mode we'll click save settings and then we can do that then once you're done with that you can come back in here uncheck this and then we'll be in live you see when i'm clicking on it it switches from live to test so we're going to keep it in test mode and now we have payments selected now we need to create a form and we can give it a name here and you can choose the form down here they have a billing order form but then if you also wanted to you could go in and go to the add-ons page and add the form templates pack add-on that will add hundreds of other forms for you to choose from just to get a template that's really close to what you're needing but for this we're going to use the billing order form and that will automatically pop up the form for us and you see we still need to make sure that we click on the payments tab over here to configure our payment so we'll do that great now from here you can just choose which fields you want to have in here you can choose your address if you need that if you're sending a physical item i'm going to be doing services so it's going to be digitally sent so i'm going to remove all of that so you can either do a multiple choice or you could do a single since this is already here i'm just going to show you what this would look like the demo website that i have is all about adventure and backpacking so maybe we'll do backpack tour backpack weekend and maybe a vip backpack you can show the price after the label you see how that's looking and then i like down here the total amount so once they pick one it'll give the total amount down here so you could keep that as well and then you you want to have maybe a message from them that's cool let's go back up to fields because we actually need to add the credit card information and so these are all the payment fields that you can choose if it's just one item that you're selling you could do a single item i did that over the weekend and that worked out really well we'll click on the stripe credit card because that's where we want to get the information from them their credit card information i'm going to bring this up here and that looks good and i'm going to click on submit because i want to change the title of the submit button to something like order now it looks okay also because we are using stripe we have to enable ajax form submission so under we're under settings we're under general and i'm going to click enable that so that's good everything else looks good on here i'm going to save that and you see we still need to enable straight payments which we will do so i'm going to say ok and we're going to go back to payments click on stripe we need to enable this and we can give it a description choose where to send the stripe payment receipt we'll send it to the email of the person that ends up filling it out and you could also do recurring subscriptions so if it's a weekly thing or a monthly thing you could do that as well we're good with that so we'll just click save and we can go back to the fields just to see how everything looks i think that all looks pretty good great we can go back to settings and you can also double check your notifications so the notifications are the emails that get sent out and you can change this where it gets sent to by default it's the admin email of the website you can leave that here or you can also take that out and like put your actual email address in here you can change the subject line because this is what will come up every time you can even do if you show smart tags you could bring in a smart tag which would be helpful so in other words instead of just having this new entry order form every time in the subject line you can say new entry or new order colon and then use their name and then that way it's a little bit more specific each time so it's it's unique each time you get it you you can change all of this out as well if you want and then in the message you'll just bring in all the fields but the notifications look good so we're happy with that the confirmation is when they order or when they place the order then this is what they'll see so you can either change this obviously you want to say thanks for your order we'll be in touch with information shortly you can also get really fancy and switch it out to send them to maybe a thank you page with the information on what to expect now that they've sent in their order but for this we'll just keep it as the confirmation and we'll click save and i think that that's really good so now we can embed it so they're saying okay where do you want to embed it i like this because we can select an existing page i think i do have one that we can use be our services or you could have created a new page and it will take you there and they're telling us we can add a block up here which is perfect but i need to scroll down and find where i want to add that block so yeah i'm going to go here and i'm going to click on the add block button and i'm going to search for wp forms if you don't see it you can search for it and this is the one we want so we'll click on that and it brings that in but we also want to click on it and bring in the order form that we were just creating so i'm going to click on order form it looks okay i've probably messed everything up but for this tutorial i think this looks pretty good and then we can go up here to update this and then now that we've updated it we can preview it and see it in a new tab great so now i have my services so the cool thing about this is we are in test mode remember we went on in test mode so you can put whatever you want in here there are a list of numbers that you can test that stripe will allow you to test like i know 4 just four two four two four two can do that you can put any future date here and then any cvc which you can put here and then you can put your name on the card something like that and then you definitely want to add the comment because that's what it's asking for and then we can say order now cool so then we see thanks for your order we'll be in touch with you shortly and then they'll also get an email with the information and then what's cool is then you can go to stripe and you can see that it has gone through so let me show you that real quick and then you can come down here and say let's view test data and then when you do that you see today we have a test item that we just did you can even come up to payments to look at that and get the details of it and you see up here it's all test information so backpack vacation that comes over that came from the description that we gave and everything looks good so once you do that once you go through the process make sure everything looks good then you can go back into your wp forms to turn it on to live so let me show you where we need to go with that we're heading back over to our dashboard we're going back to wp forms settings and then we need to go back to payments area and that's where we had it checked for test mode so you can test everything i like doing that because if it goes live and something's wrong then i want to know about it before i lose payments so now we can take it out of test mode click save settings and now that that's live we can promote it share it with anybody and then it'll be real money so people will actually put in their real credit card and everything like that so i love how easy that was if you're looking for something a little bit more detailed like a membership site and accepting payments with the membership site then make sure you watch this video next where i walk you through step by step on how to set up a membership site and accept payments for that and thanks for watching