How to Create A Checkout Page in WordPress without WooCommerce! Use a Simple & Cheap Plugin Instead

in this video i'm going to show you exactly how to create a highly customizable checkout page for your woocommerce site that's easy to build easy to manage and doesn't create a ton of stress and frustration in fact i'm going to show you how to do it without woocommerce and the typical dozen or so plug-ins that you need on top of woocommerce to get it to function and work the way that you want it to instead we're going to use a very simple and affordable plugin just one of them so if you want to create a checkout page for your course membership site or some other product where you don't need a full-blown e-commerce solution you should definitely watch this video my name is chris and i help membership site owners and course creators bring their vision to life in fact i was working with a client when i discovered the solution trying to solve my own frustration now i'm actually pretty good with wordpress i've been using it for over 10 years i've used woocommerce enough to get the results that i need for clients and for my own projects but it's typically a huge huge pain in the butt and creates a lot of frustration for me plus it takes up a ton of time and i just wanted something simple for this project and woocommerce was really overkill um because i didn't need the full-blown checkout system so i figured out this other way instead and that's what i'm going to show you in this video exactly what i did so that you can do it too step by step and hopefully save you the frustration that i went through and also save you a ton of time so you just get this done get it going and get your project on its way now ultimately what's going to happen is you'll have a beautiful high converting and very simple to create checkout process that you can tie to your sales page now before i get into the step-by-step details it's important to cover a few advantages and a few limitations that this system has so that you can make the right decision for you on the project that you're working on so to start with the advantages the first advantage is that you can design the checkout page the page where your customers actually put in their credit card details you can design that to look virtually however you want you're not limited by um woocommerce and you can use virtually any page builder or any theme that you want so your only limitation is the page builder or theme you're you're using and those are pretty pretty wide open advantage number two you can use strike or paypal and a few other payment systems when you use stripe you're able to allow the checkout to happen directly on your page without any redirects to a third-party site advantage number three there is a direct integration with a whole bunch of different email systems plus there's a zapier integration to send your customer data virtually anywhere that you would need it to go advantage number four order bumps are possible and they actually look pretty darn good advantage number five you can do coupons with the system so that's pretty cool advantage number six there is a customer area where your customers can log in and see a purchase history of what they bought plus if you have a subscription type model they can manage their subscriptions now this is only available for using stripe but it is available advantage number seven and this is really probably the best one the one i like the most is that it is fast and easy to set up literally it is i'm not just saying that it's not just hyperbole it's literally a few minutes to configure all the settings another few minutes to design the checkout form itself and then it's ready to place onto the checkout page and the other cool advantage with this is that you're not going to have to spend days and days googling and watching youtube videos trying to figure out how to get woocommerce to work and solving that stupid little glitch that always seems to pop up alright so now for a few limitations limitation number one is that there is no shopping cart like there is with woocommerce so it's not possible to add multiple products to the cart and then go through that typical standard checkout process limitation number two there is no inventory management like there is with woocommerce limitation number three a full-blown funnel process with upsells and down cells isn't possible but you do have the order bumps like i mentioned limitation number four the affiliate integrations are pretty sparse there's only one that i have found and it only works for stripe limitation number five the customer area to show those purchases and manage subscriptions like i said is very functional i'm actually pretty impressed by it it just doesn't look that great um so if you want it to look a certain way you can always dress it up with css but straight out of the box it's kind of less than ideal in my opinion but it is very functional so from a limitations perspective that's pretty much it there is one more thing to cover before i really get into the the details is that this system is not free i know a lot of people out there like to compare solutions to woocommerce especially since the core of woocommerce is free although when you need woocommerce to do certain things like subscription management that sort of thing you end up paying for additional functionality plus i feel like the speed to implementation that what i'm going to show you allows you to do and far less frustration is worth paying for that's my opinion and just something to think about as you consider what system you're going to use for your project all right now that you have a better understanding of what's possible and the few limitations of the setup let's get into building this out so that you can have it set up on your site in just a few short steps all right step number one is purchase and install the plugin and what you want to do is go to pixelsandtech.com fluent forms like what you see right here and that'll put you onto the flu forms website that's the form builder that we're going to use if you click over to pricing you'll see that it is very affordable especially for one domain um only 59 per year and you get a ton of functionality including the ability to create the checkout page like what i'm going to be teaching you how to do now a quick note on buying through my link is that it will give me a small reward it's not much but it's enough to help me create these free videos it's roughly enough to buy myself a burrito for lunch and i do love burritos so i would love it if you would use my link if not if you already have it that's cool or you don't want to use my link for whatever reason um go ahead and get fluent forms anyway it's that great um you're gonna love it all right so what you'll need to do is go ahead and purchase it and then download it and install it into wordpress i've already done that so i'm going to get the install package and the license key and go to the next step so now here i am on a fresh install of wordpress all i have installed so far for plugins is my preferred builder of choice which is the oxygen builder by the way if you don't have a builder that you really love or a theme that you really love i would highly recommend checking out oxygenbuilder.com and that is not an affiliate link i just really really enjoy this builder all right so to add in the fluent forms plug-in i'm going to click add new i'm going to upload plug-in choose file and choose it from my desktop right here there it is open and install now now once that's uploaded and installed and you still need to activate i'll click activate plug-in and then you'll see a warning message here at the top that fluent form pro add-on requires the fluent form base plug-in you can simply click the link that it gives to install that now once that's installed you need to activate the base plug-in so i'll go ahead and click the button to activate the base plugin and now now we have the fluent forms base plugin and the pro add-on pack once those two plugins are installed you're going to get a message right up here at the top that prompts you to activate your license so i'll go ahead and click that it'll take me into the fluent forms pro area for my license i already copied my license from when i purchased it at fluent forms website i'm going to go ahead and paste it in here and click activate and then once it's activated the form the fluent form plug-in is now ready to build there's one other thing that i'm going to do real quick i like to add in the classic builder or the classic editor here i'm probably a little bit old school but that's all i need i need my oxygen builder or a theme of some sort fluent forms and that's it and then classic editor if that's your cup of tea all right now we're ready for the next step so the next step that we're going to do is configure all of the payment settings so i like to do this before creating forms just so that i have it done and out of the way it doesn't slow me down or stop me when creating the form so what you'll need to do is click over to under fluent forms pro under the global settings that's where we're going to be working now it'll put you into the settings you don't really need to do anything here for the general settings what we need to work on are the payment settings and you'll get this message that you need to enable fluent forms payment module go ahead and click that button and that's it now it's enabled now there's a few settings here on the general tab business name business address and logo these actually really don't even show up anywhere where we're going to going to be using them but just for the sake of doing this demo i will do my name and i'm not going to worry about the logo or the address at this point click save settings next thing to look at is currency i am in the united states and i like the dollar sign on the left hand side and using a comma for the thousands and a dot for the decimal so i'm going to leave all that i do like this option to hide decimal points for round numbers which is really nice so i'm going to click save and then i'm going to go to pages and subscription management just to show you what this is for now i'm going to leave it blank we're going to come back at a later step and set these and this is one setting to take note of to allow users to manage their own subscription if you deselect this check box then they will not be able to manage their own subscription obviously and like i mentioned earlier this is only available for the stripe integration not for any of the other ones so that's it in the general settings now we're going to click over to the payment methods and i'm going to enable stripe i'm not going to worry about any of these other ones at this point in time i typically only use stripe anyway that's just a personal choice that i make and what this is going to do is going to authorize through stripe so i'm going to go ahead and click into that and be back in a moment all right now i have my stripe account connected to my fluent form here you can see that it's currently in test mode which is really nice it'll allow you to test the full functionality of the form without having a live payment go through so we're going to leave that in test mode for now we're going to come back later at the very end and we're going to switch that over to live mode one other thing to note down here for stripe web hooks in order for the subscription part of fluent forms to work properly you do have to take an additional step here they do have some good documentation um in this link to walk you through on how to set it up it's actually really easy i am not going to cover this at this point though i'm going to focus just on the one-time payment kind of a solution right now all right so now that that's set up we are ready to actually create the form there is one other setting in here to take a look at so there's payment methods general and then coupons i'm going to go ahead and enable that now it's pretty simple you just click that button and then it gives you this little interface now to add coupons and give you all sorts of information on adding coupons but at this point in time i'm not going to mess with a coupon but just so you know it's there super powerful very easy to use all right now we're ready for the next step now for the next step which was creating the actual form that we're going to use in the checkout process once we have the form created then we'll be able to put it onto the page that will become the checkout page so to create the form what we're going to do is come over here to you can either go to all forms or directly to new form here i've already created a couple of demos i'm going to go ahead and click the add a new form button here it gives you a bunch of options that you can choose from that are pre-made forms they have a four down here that are product forms i like to start with a blank one um i end up deleting most of everything off of it anyway and then start adding in what i want so we'll just go ahead and click the create form on blank it'll reload and it's completely blank to start with up here is the name i like to um title these so i know what it is so i'm just going to do check out demo number two what i typically do when i name it is the name of the product that i'm using it for just if that helps you out so click rename there now all it has obviously at this point is a button if you click name it'll just any of these fields that you click on it'll just add it um underneath whatever's already there so i got the name we'll do email and like i said i'm just going to do that first name last name um i like that i'm gonna keep that first name last name one thing that i like to do personally is i like to hide the labels so it just has the placeholder info within the field i'm gonna do the same thing for email i'm going to hide label for me it just makes it a little bit cleaner looking a little bit more minimalistic we do need to set both of these to required i do believe that name already is but i'll double check and you have to actually click into these to see if it's required or not and if it's not so yes i want it required for first name and last name so we'll set both of those as required all right so that's all i need for personal details now i'm going to add in the payment fields so i'm going to scroll back up and click on input fields down here are the payment options so here you have a few different options to choose from the first one that you need to add that's mandatory is payment field or subscription field i'm going to go payment field is a one-time payment then obviously subscription is multiple payments so i'm going to do payment field next and i'm going to drop it right there so what this payment field does is allows you to set the price so i'm going to change it to say 79 you can change the label to anything that you want for my purpose i'm going to change it to do now and it is required and then product display type you actually can select from a different a few different options here single item is what i'm going to leave it at you can technically have multiple options to choose from like multiple products to choose from essentially which is radio check box so radio would be selecting one of many options check box would be selecting multiple from many options so they could select one two or more options and then select field is like a radio but it just looks different it's basically like a large field for them to click on to choose that option again i'm doing a single product payment amount i'm going to set that back to 75 i think that's what i did i don't remember now and that's it for payment item actually there's one more thing the i element label up here currently says says payment item um this can be the name of your product and that is one way to do it what i like to do and the way that i'm going to show you is i'm actually going to hide the label altogether so all you see is the price and then i'm going to use my builder to describe above this form what the product is with a little bit more detail than just the name so effectively all this field does at this point that we've added is set the price and let them know how much it is that this price this item costs all right so now the next field that we need to add is this one right here payment method field and i'm gonna drag and drop it right below the previous one now this one is going to by default only show stripe because that's all that i've integrated at this point if you had integrated another payment method such as paypal you would see that over here as another additional option but of course i don't have that so it's not showing up one of the things that i do like to do here is i like to change the label here instead of paying with card stripe a lot of consumers don't know what stripe is that in my opinion is a little confusing so i just like to say credit or debit card so this is the label that is going to show up it's going to actually look a little bit differently than what's rendering right now on the screen once it renders on the front end it looks different and this will make more sense so just follow along see what it looks like and then you can change it if if you feel like you want to have it look differently leave this embedded checkout selected if you do not select that checkbox it will redirect the customer from your site to stripe site to finish the checkout i don't like that functionality i think that behavior is confusing so i like to embed the checkout directly on my site and the whole thing takes place on my site without any redirection verify a zip postal code i select that also with that i don't collect a address for my purposes i don't need to ship anything or i don't need to know their address but using the select box is going to help verify on the fraud level on stripe side all right and for now i'm going to leave this as default i'm not going to hide label i don't honestly remember at this point whether i typically do or not so we're gonna just go through the design process see how it looks and then i can come back and hide that if i need to so for the label i'm actually going to change this from payment method make a little bit more conversational and say how would you like to pay that way it's indicative that it's a payment method they're gonna see credit or debit card right beneath it and they will have the credit card field directly beneath that and i just realized i misspelled that so debit card all right so that's all set and honestly at this point that's all you need for checkout the last thing i'm gonna do just from a stylistic perspective is change this from submit form to something like complete order or join now or something like that i like i personally like join now but you can make it however you want one other thing that you can do is button style by default it's going to be this blue with white which is not bad at all in my opinion you can customize it so you can change the background color text and border color one thing i do like to do is change the min width to 100 and this will make more sense when we get into building the page out but essentially it's going to take up the whole width of the container that i'm going to drop the short code into and to me it just looks nicer instead of having this tiny little button on off to one side you can make it larger smaller if you get into css if you know css you can assign a class for the container you can also assign a class for the element itself and then completely stylize this page or this this form exactly how you like it but one of the things that i do like about fluent forms is it looks pretty minimalistic right out of the box and for me i the only thing i do change is the button and that's it i leave everything else the same all right so that takes care of that step and we're ready for the next one now that we have the form created we're ready for the next step which is configuring the settings and the integrations for this form in particular so here i am in on the editor i'm going to go ahead and click on save i don't think i've done that yet so i'll save the form and then click over to settings and integrations this first tab is where we get to set a few of the first settings on this form now the thank you page i'm just going to leave this now for same page as of as of right now later on i'm going to come set this to a page which as you can see i have no pages yet so i have nothing to set it to and then there's a few other settings down here where you can scheduling and where the labels and stuff align and stuff like that which i'm not going to mess with at this point everything's fine for me for my purposes so the next thing i'm going to do is i'm going to need to switch over to the payment settings tab and this is where we get to configure a few of the important settings of how information is passed to stripe so this first field that we need to set is their customer email field and this is pulling from the form that we just designed so we have an email field on that form and it knows that so it allows us to select that form that field and then the customer name this is also going to be pulled from the form that we just made so we're collecting first name and last name so i'm going to click uh click first name first space and then last name and what's really cool about this is it's going to pass this data over to stripe so in stripe you're going to have their email first name and last name which makes it super convenient if you ever have to go and do a refund or adjust a subscription that sort of thing now there are additional settings down here that you can push additional metadata if you needed to i have never needed to do that it's there though if that's something that you need um stripe payment receipt disable you can disable the straight payment receipt from here although to be honest i have never gotten this to work properly so i actually disable it in stripe directly so that it does not send the receipt from stripe and instead i send the receipt out of fluent forms which will be the next setting that we'll get into so i'm going to leave that deselected uh statement descriptor again i have never gotten this to work properly because it seems to be overwritten by stripe and what's set at stripe so just make sure that your descriptor at stripe is set properly and now we're ready to configure email settings click save first and then go over to email so by default this is going to be disabled and this is for admin i do not typically want the admin notification but if you do it's there and you can just configure this how you want it's going to give all data so whatever is entered in the form you will see this as entered into this email the thing that i do want though is i will go back to add in another notification um the email that i'm going to send to is um instead of enter email which you could freeform type any email address there i'm going to select a field and select email from the form that way whatever the customer enters as their email address that's going to be sent that's going to be used to send this notification to now what i'm going to do here is subject is going to be order seat for course name something that they know what it is that they're getting and then here in the email body you can add any sort of text here like you know thank you for joining my course here's a receipt for your records you know something like that uh maybe make it sound a little bit better than that but you get the gist and add short codes so what i'm going to do is down here under payment details payment receipt is what i want and so this short code is going to render what they bought so the name the price and if it's a subscription it'll show like subscription details that sort of thing and really that's it i mean in my opinion that's all they need for a receipt is to know what they bought and how much it cost and who they bought it from which all of that will be rendered within this short code so that's all we need for the email notifications now the next thing is linking this up to our crm system so this is the page where we would do that and i'm going to show you how i link it again i use activecampaign so i'm going to show you how to link it with activecampaign the other ones any of the other ones are going to be very similar where you're going to have like an api url and an api key that's all most of them need to um to integrate and then you can pass data from fluent forms over to your your email system your crm so what i'm going to do here is click configure modules it's going to bump me out to this integration modules section here and you can see they have like i said they have a ton of them here the one that i'm going to choose though is activecampaign i'm going to click that to activate it and then this is going to this cog is going to appear i'm going to click on that little gear icon and then all i need is my api url and my api key which i'm going to go and grab that and i'll be back in a minute all right now i have my api url and api key put in here i'm going to click save it's going to do its thing now i have an active connection and now i can go back to my form that i was just working on check out demo number two settings here and then i'm going to go go back down to marketing and crm integrations and now i can actually select from that integration active campaign so you can name anything that you want i just leave it alone i have one list called master contact list in my active campaign account email address is the only required field as you can see so this is the active campaign field of email address and i'm going to match it up with the email that's going to be entered in the checkout process first name last name you can sync up first name here and last name here and then if you have any other custom fields they're going to show up down here the really cool thing too about this integration is you can tag them with any of the tags that you would need to kick off automations in your crm with activecampaign i like to start my tags with a name of trigger and i use that to trigger any automations in my account so and i'll just call it trigger course course name which does not exist so nothing will happen but if it did exist it would apply that tag and then trigger the automation in activecampaign and that's all i do i don't mess with any of the other stuff i'll go ahead and create activecampaignfeed now that is active as we can see and fully ready to go now there's one other thing one other setting that you might need to do if you're wanting to create an account on your site for them to be able to manage their subscription and see their payment history and in fact an account is required for them to see that information their history and their subscription then you have to do one other thing you have to go back to integration modules and enable the user registration now if i go back here to all forms go back into the settings for checkout demo number two and then go back to the crm integrations it's going to have user registration integration and again i would select email first name last name i can set and you can set the default user role which i always leave a subscriber if you have any custom user roles that would show up here also and you can actually do some really cool things like auto log and after purchase so once they purchase you could auto log them in and allow them to access their course or membership right away if that's what you're offering and that's all i'm gonna do here um going through that full entire setup process of creating the whole membership site that's definitely outside of this tutorial um but that this setting here makes all of that possible just so you know all right so that's it for this step we've created the form set the integration and now we are ready for the next step in this step i'm going to create the pages that we're going to need for the checkout process get that linked up with the form that we just created and then go back into those pages and design them and make them look like the way that i want them to look so first steps first is i'm going to create a few pages come in here click add new and the first one i'm going to do is subscription management subscription management there we go i'm going to click publish and one thing i just noticed is my slugs are not the way i want them so i'm going to go into permalinks and click on post name is what i like click save and then come back over here and update and there we go all right so subscription management i'm going to click add new again i'm going to say thank you and publish and then add new once more check out page so this is going to pay me the page that we're going to embed the shortcode on for the form publish and the last one is sales page and we'll click publish so now that i have these pages created i'm going to go back into a few of the settings areas and connect the form to these pages so i don't forget to do it later the first one is in the global settings i'm going to go to payment and then to pages and subscription and the payment management is what i need subscription management that'll tell fluent forms where to find that page and this will make more sense later once we set up that page fully so that is saved and then i'm going to go back into the form that i created and go to settings and then here i am going to set the confirmation type currently it's on the same page i don't want that i want it to redirect to a new page which is my thank you page right here so once the payment is complete they will redirect to my thank you page now i'm going to go back and actually create my pages so i'm going to start with the thank you page and then just go from there so for me again i'm using oxygen so i'm going to edit with oxygen and go through and fully lay out and design the thank you page and then i'll do the the subsequent pages after that all right there we have a very very simple thank you page i definitely spend a lot more time making this look nice if this were real but that's my thank you page welcome to the course got my little logo and that's pretty much it so now i'm going to be designing the customer area page and all i really need for this page is a headline of some sort to describe what the page is and the short code for the the payment history and subscription management to show up so that's what i'm going to do here real quick i'll add in a section add in a heading and then i'm gonna go back into the admin area of wordpress back into integration no global settings payment settings subscription management and this is the short code that i need so we'll copy that we'll go back in here we'll add in a shortcode paste in the shortcode and nothing will render because i do not have an account as an admin user that has made any purchases so nothing's going to render here but i will be able to show you at a later step what this looks like exactly so right now i'm going to just change this to your account something very generic at this point just to get it done so you can see all right so that is the the customer account page now i'm going to go and design the actual checkout page i did a little bit of work on the checkout page got it to the point where it's it's uh looking better than a blank page for sure but i definitely spend more time on it if it were a legit checkout page but for the purposes of this demo i just wanted to show you what's possible so here i'm going to go back into the checkout page and click edit with oxygen i actually also why that's loading there what i need to do is go back to the fluent forms all forms and i need to get the short code so if i just click here it's going to copy that to my click clipboard and then if i click over to the tab for the oxygen builder this is what i have so far so again super simple i definitely spend more time making this look better telling the story of this product in a better way but essentially what i have here is i have a section at the top with a logo i have a two column layout here left side we have the name of the product a little bit of explanation on what it is what to expect and a 30-day guarantee on the right side what i have is another section here it's a div div tag with a little bit of a drop shadow if you can see that there a little bit of drop shadow along it just to give it a little bit of a um a difference from the background separation and then i have purchase summary the logo the name again and the total do per month so again in a typical checkout system all of that stuff right there is basically baked into how it happens for example with woocommerce it is just how it is or you have to use a lot of customization to make it look different now with this this is fully controlled by my builder my page builder so if i wanted to change this font size to really large if i wanted to change the color i can do all that just as simple as i would with anything else on my page with a page builder now obviously i am missing the actual form to check out to collect money to get the person's name and email address so what i'm going to do here is i'm going to drop in a short code in this section here which is i left that blank for the checkout form so i'm going to go over to this section of my form and click add and search for shortcode which is right there i have that pasted to my clipboard still so i'm going to paste that in right there and this is going to give me an error because of stripe um this configuration for the builder itself it'll work fine on the front end so i'm just going to close that out and again this is from what we built earlier so got the name email the amount due and then the credit card and join now so i'm gonna click save and then i'm going to go to the front end and this is all now rendering properly it is in test mode so that's why that stripe test mode activated message is there one thing that i can change the do now um is showing up i like to have it up here um you can't have it there you can just delete this if you want and leave that there if you do want to have this up here the way that you would do that is i will go back to here to edit and there is a way to hide this but still make it functional because you would need this field if you delete this field it will not charge anything because that's what sets the value for charging so down here in advanced options there is container class and i can do ff hidden and i just know this from before if you use that container class on any of the elements it hides it from the the view of the user now if i go back over here to my page and refresh that it is now hidden again it's really just a stylistic preference i like to have it up here rather than down there but either way is fine there is supposed to be a little bit of a divider here that i need to select there we go and then i'm going to set the color to like a kind of a light gray there now if i go back to this page and refresh it there's my little divider all right so there we have it i've completely designed and configured my checkout page last step is to link my sales page to my checkout page so i'm going to do that next so one last little thing that i need to change that i just noticed is this says per month so a little ocd here maybe is kicking in but i just want to change that to 75 so there we have it all right now we're ready for the next step here i am on the sales page now and my my funnel is going to be pretty simple it's just sales page checkout page thank you page and that's it so all i need to do now is link my sales page to my checkout page so here's my checkout page that i created just a moment ago i'm going to grab the url copy that come back here and edit with oxygen to paste in the link on the buy now button to the sales page so here on the sales page my join now buttons right here i'm going to update this url to point to my checkout page now and i'm going to click save and i'm going to view the front end and here we go my nice new sales page click join now and that's going to put me right on to my checkout page and now my checkout page is ready it's configured and i can test it i'm going to test that here in a moment i'm going to show you a couple of alternatives that you can do with this to do the order bent the order bump and the subscription check out option i'm going to show you two different variations that you can make on the order form the first one is to take multiple payments meaning that you can have like a payment plan or a subscription it's handled essentially the same way and the second option is to do the order bump that i was talking about earlier in this video okay so the first one is the multiple payments or subscription plan so what i'm going to do here is i'm going to just duplicate this form make it easier for myself i'm going to change the name to reflect that it is um multi-pay and we'll just call it that even though it could be a subscription so over here the payment field here actually needs to be changed so what i'm going to do is i'm going to delete this and you hover and click the trash and confirm now back here in payment fields i'm going to add in the subscription right above the credit card field so this one when you click on it actually gives you quite a lot of options here so down here under payment plan what i'm going to do is change this name and i'm going i'm going to change it to uh payment plan and i'm going to set this up for first as a payment plan to have say two payments so what i'm going to do is total billing times if you keep it on xero that's where it becomes a subscription it'll just keep on billing unlimited so i'm gonna do two so they're gonna be billed twice at we're just gonna leave it at 9.99 so the pay a total of just under 20 dollars i'm gonna check this as yes required and that's it again if i want to leave this label there then i would need to change it to something that's more descriptive of what this is for i again like to hide it and then i also like to completely hide this from showing up all together which is under container class ff hidden like so now if i click save and then i go back to my checkout page i first need this form id which is form id number four come back over here click on edit with um and then click edit with oxygen all right so now i can come to this form here and change the id from three to four for my new form and again that form field for the number of installments is completely hidden so that's where i'd have to change this up here to say something like um to payment option of was it 9.99 i'd need to think a little bit more on how to word that exactly right so it's very clear otherwise if i wanted to just unhide this it would be very clear if i just unhid this it may not look quite as nice but it gets the job done and there will be no confusion so what i'm going to do is refresh this page on the front end now and 2.99 for each month for two installments so that should be pretty darn clear i can leave this up there also or i could completely delete that all right so that's for two installments basically a multi-pay type of payment option if i wanted to do the ongoing subscription i would just leave in this example i could just leave this form id as number four and then i would just come over here and instead of having two i would just delete that and put zero and that's gonna be unlimited and then this i can do as again i think what i'm gonna do here is i'm going actually going to hide this i do like this option better so fff hidden and then save that form and then back over here this is where i change this to um monthly payment option and i do something like 9.99 per month just so it's very clear up here and again i can style it type in whatever i want up here because i'm using the builder not the form if i click save and then i'll let that save come back over here and refresh this page 9.99 for each month um total payment or monthly payment option 99 per month all right so there's your first variation is the payments or subscription all right for the second variation we're going to add an order bump so to do this i'm actually going to add a new form and i'm going to select from one of the pre-made ones because they have an order bump example right here that's pretty pretty good well done so again we have first name email up here at the top i'm not going to really edit this form much just so you can see what happens when i add it to the checkout page now uh first name email product so this is the the payment field that we added to our other one um payment method again stripe is used and down here this is where the order bump information is now they have up here a little higher level they have a one column container with a container class a css class so this is going to add a bit of styling around the section and then they have another payment field down here and the key here is to do it as a check box selection that way the person going through the checkout can select this item if they want it otherwise if you use single item or radio selection it's going to be added by default and they can't deselect it or choose to select it on their own and then down here this is what they call a custom html field simply to allow putting in some text to describe what the order bump is and why they would want it now another cool thing that they've done here with the payment button is they've used this little um dynamic field for payment total so this is actually going to show the total with the order bump and without the order bump depending on whether it's selected or not so what i'm going to do here is i'm going to just save the form the form id is number six now so i'm going to come back over here to my editor and right now we have it on number four so i'm gonna do six and you can see that changed changed what was rendered it's still not fully rendered it's missing some of the design element around this section so i'm going to save this and then go to the front end and refresh and there we got it so name email price and then we got this cool little area for the order bump and once you select it it'll change the price dynamically 49 to 78 pretty sweet so if you know css you can fully customize how this looks otherwise it's kind of just baked in to how the standard class is on this particular form so there you go there's the second variation on how to add an order bump now that we have the form created it's on the checkout page the checkout page is linked to from our sales page we have our thank you page done also we are ready to test so that's what this step is all about is about testing and then going live so now if you remember back early on in the video um when we were setting up the payment options i left it in test mode just to double check it's still there we're going to go into the global settings go to payment settings go to payment methods and then it is on test mode so we're good plus you can just double check here it's going to stay say stripe test mode activated so what i'm going to do is i'm going to put in some test details here tessa.com and then the card number is just 42 all the way down so there we go so now i'm ready to click join now and see what happens so if we did everything right it should redirect to my thank you page and then i also should get a email as the customer with the payment details obviously it's a test email address i'm not going to get anything but that's what would happen all right so there we go it redirected to my thank you page and that's it we can actually at this point we're ready and safe to put it into live mode and really all you have to do is go back to the global settings click live mode and you will have to reconnect to live instead of test mode with your stripe account once you do that once you go through the reconnection process and then you click save stripe settings and you're set and ready to go one last thing that i wanted to show you is the customer center where they can go in and see their payment history and manage their subscription now this is actually a different website that i've set up where i have a full membership plug-in and all of those need and necessary items to be able to do this but i just wanted to show what it looks like so you have an idea what you're getting into if you want to set this up so this is where you're going to see the subscriptions area so they can view payments and then they can cancel the subscription and then they could also view the basically the payment details of the transaction history again it's not the most beautiful thing you've ever seen but it's functional and it does the job so anywhere there's that i just wanted you to see that to give you an insight into what it looks like so there you have it a simple yet fully capable checkout system that you can make to look however you want all you need is wordpress a theme or a page builder and fluent forms with a little bit of time to set it up you don't need woocommerce and i think it's much much easier to set up than woocommerce is plus you get a heck of a lot of functionality still you get a very capable checkout system you can create the page to look any way you want really you get subscription management you get single pay options multi-pay options you can email the receipt to your customer you can do coupons you can do order bumps you can use multiple payment systems including stripe or paypal and you can literally integrate with pretty much any any email system out there including zapier which opens the door to pretty much everything else on the internet now i know how frustrating it can be to bring your vision to life when stuff like this gets in your way so if you have any questions need any additional clarification you can post below this video in the comments or you can go to pixelsandtech.com help i would love to help you bring your vision to life now if you haven't subscribed yet go ahead and hit that subscribe button below to get more goodness like this to help you in your journey as a course creator or membership site owner

Channel: Pixels And Tech

Views: 2,745

Keywords: Fluent Forms payment, Fluent Forms paypal, Fluent Forms woocommerce, Fluent Forms stripe, WordPress Checkout, WordPress Checkout page, WordPress Checkout plugin, WordPress Checkout form, WordPress Checkout page plugin, WordPress custom checkout, online payment form wordpress, payment form wordpress, how to create payment form in wordpress, wordpress order form with payment, wordpress payment plugin, wppayform new version

Id: nHXAD3Ek6p8

Length: 54min 3sec (3243 seconds)

Published: Wed Nov 03 2021