Peachtree Fence Part 09: Review Lost Episode Changes & Tackle Online Payment Form

0:00:00
Alright guys welcome back to the Peach Tree fence and Gates build. I want to do before we move on to what I’m going to do today which is the payment form. I want to review the inquiry form and I want to review the split header that some of the changes from the lost episode, episode 8. First of all I mean you can see at the top that the header is now white. I feel it’s a bit cleaner, change the logo color out but this is all very straightforward stuff. Drop that little top navigation bar so we’re just doing kind of a more traditional look here. The inquiry form is a big change from episode 8 the lost episode and then the split header was so I’ll just review those two things. This is WS Form and WS Form has a Google address field which basically pulls from the Maps API which is awesome. So somebody starts typing it auto guesses their thing. So I’m going to do like this address, Primrose Drive. Alright so you can see that it’s giving me all these choices based on what I’ve typed so far but if I choose an address WS Form also can auto populate the city, state and zip code fields. Very very nice and their map facet ties in to this. This is actually one of my old addresses. Back way way way way way back when when I lived in townhomes. So if we zoom in it’s really cool and I’m going to ask Mark about this. I want it to auto zoom onto the person’s house basically and I’m going to actually do this for roof claim as well but they put in their address the map facet automatically goes to it. I’m going to refresh this again so that you can see.

0:01:40
See the map is right now on it’s actually hovering over Petri Fenson Gates office. Their office is in there somewhere but when somebody types in their address like I’ll do this one watch the map. The map swaps and automatically pins their address and then if they zoom in they can actually see their house right. It was right there I accidentally clicked the map and moved the pin but it was right there. That was my old townhomes right there but anyway you can see that that’s really cool. It’s like you’re going to show the person their property which I think is very personalized and then all they have to do is click next and they can actually fill out all their details and then they can hit request a quote. So I think that’s a really cool like interactive way to get somebody started into the inquiry process versus like all right fill out all these standard fields you fill out everywhere your name your email your phone instead it’s like hey what’s your address because we need that anyway to do the project and so they put it in and it finds them in the map and it auto fills all their fields it’s like a super easy first step then they just hit next and you know they’re I think much more inclined to fill out the rest of that form it all looks really good so that’s one of the things that was in episode eight and I can go over you know how actually let’s do that now let’s because I know some of you are probably interested in that stuff so want to see how that works on the back end with WS form and I need to log in anyway so I’m going to go to forms and we are going to go to the inquiry form and here we go so there’s two tabs and this that’s the way WS form has these tabs by default you just hit a plus on and you can add more tabs super easy the only difference is I if we go back to the inquiry form nope okay let’s do inquiry inquiry okay I hide the tabs I don’t always hide the tabs but I hid the tabs here but even though you hide the tabs you can still navigate between the tabs and if you look over here in the WS form area of like modules you can add you go down to buttons there’s a previous tab and a next tab button so you can see on my first half address I just added a next tab right there button and it auto navigates to the next tab so you don’t have to code that or do anything with settings you literally just drop in the next tab button and it will know to go to the next tab whenever you have a next tab and then on the next tab you can also put a previous tab button to take you back to the previous tab and WS form takes care of all that you know JavaScript however they’re doing it behind the scenes automatically for you here’s that map facet that I pulled in it’s right over here it says Google map here’s the Google address field literally just drag and drop these in when you do the settings here you get to choose from what what the field mapping is you know the address city state zip so all the stuff on the left is what Google is what is pulled in from Google maps automatically and then on the right you’re just telling it which fields are which so you say all right if we’re going to take the city and map it to my city field we’re going to take the state and map it to my state field we’re going to take the zip and map it to my zip field and WS form will do all of that for you automatically same thing with the Google map you can put a I put a default latitude and longitude in I put a default zoom level you can choose your map type I chose the hybrid map and if we go back to the address field where is it yeah here’s the Google map mapping so I’m telling it hey use this like populate this Google map field with the coordinates when an address is entered and that is this map right here you can see it ID 34 this is ID 34 and then it’s just WS form just handles the rest of it and then the rest the other side of this is just the typical you already saw the inquiry form that I was building previously all right so that’s how that works let’s also take a look at the split hero so if we go to the homepage or any of the service pages I built this new split hero and the reason I did that is because one I think it isolates the content really well and it preserves the image so that they’re we’re not dealing with darkening and overlay text and all that other stuff it’s just nice and clean and then it also allows us to perhaps put a video here like maybe he’s gonna have a drone video at one point we just swap it in and out we don’t have to worry about again darkening text overlay things like that and you know the person can see and it’s full glory whatever asset is there we could put a image slider so it can slide through the images we can do a lot of different things in this area let me go ahead and show you excuse me let me show you how I built that section because sometimes people get tripped up on that how to do this like split hero effect so it is a section let me open the structure panel and I actually can make this a little bit bigger let’s check and make sure we’re good on the recording okay so here’s this normal section it is not a full width section it is still a page with section I did take out the padding the top and bottom padding so it has no top and bottom padding and then I just put a div in I will open up the section I put a div and it’s got a grid of two on it so it’s a 5050 grid it’s got a stretch class on it it has it’s gonna break down at the L break point to one column and it has a large gap so that takes care of this side this is like you would normally build this and I just align the content to the middle basically the image is really the hard part so I just throw an image in and then the key here and I gave it a class hero asset so it can really be anything that has to be an image it could be a video whatever the width has to be 50 viewport width so 50 VW and what that’s gonna do because this is split down the middle 5050 it’s gonna take up the entire other half of the screen not the container okay or not the the grid that it’s in because remember this is in a div and if I made this 50% or even that 50% would be 50% of the div cell that it’s in that’s no good if it was a hundred percent it would stop at the edge of the grid but by using VW units it will now respond to the actual viewport so it will actually hop outside of the div that it’s in and go all the way to the edge of the viewport and we can use the 50 VW without any other calculations because of the design we’ve split it down the middle so we know that the rest of other 50 really 50% of the viewport needs to be taken up by this image and that’s what 50 VW does for you then I put a hundred percent height and make sure it always takes up the max height and then I also put a object that cover class on there so it doesn’t warp the image and now we can easily add alt text and all the other good stuff you can’t really do lazy loading because it’s the first image in the hero but it’s still much better than using a background image all right so if I go to the front end this is what it looks like and then you do have to do some work on mobile you know this comes in it is gonna break and then at that point I just I don’t even worry about the VW units anymore we just go 100% wide that retains padding on the left and the right and it just pops in basically it looks like a normal image at that point which is all good it’s fine and then I took away the overlap at that break point as well notice it overlaps here it overlaps at you know anytime this is a split design I have the overlap and then when it’s no longer a split design there’s also no overlap now I might fix that I might change that I don’t know but that’s how I have it right now and then I just added these down here so on our service pages we’re gonna have the same design effectively obviously different content and then I’ll be able to put those talking points that I was trying to fit in awkwardly I’ll be able to easily just pop them under here and we’re good to go so I think this solves a lot of you know challenges that I wasn’t liking about the old hero and the way that it was being done all right so with all of that said you are caught up on what happened during the last episode we’re gonna go ahead and tackle this online payment portal thing all right so the first thing I’m gonna do is I’m gonna go start a new page because I don’t think I have one let me just double check let me type in pay here and see if I okay here’s pay your invoice let’s view all right there’s nothing there though so I’m gonna edit it and that’s where we’re gonna get started on this general page structure and I think I am gonna retain this left-hand side over here so let’s open in the builder we don’t need that for right now we also need to open WS form so I will do this and go to the admin and WS form and here’s where we may want to let me see it looks like I already have all right I started quote sort of quote copy okay those aren’t those aren’t needed all right so I’m gonna add a new form and this is where you may want to look at the actual templates that are already done for you so we have calculators car payment math mortgage paycheck percentage savings tip I don’t know if they have any demos or abandonment I also need to make sure oh here’s e-commerce okay price quantity subtotal price price checkbox quantity subtotal what I often do sales here we go order order plus repeater which we don’t need sales lead order preview template let’s see what this does product is this to a price though okay now these aren’t pricing fields I need to go to WS form dot com I’m doing this on the fly like you know and I don’t build a lot of pricing forms so you’re gonna see the whole shebang like figuring out what what needs to happen like right now I don’t honestly don’t even know if I need an add-on for like stripe and and all that or any of the payment stuff so I’m just looking through here all right there is stripe elements user management that all right we’re gonna just try to do this without invoice request let me go back to the calculators what’s under demos I know for sure there’s there’s one that does like a product check out it’s probably just e-commerce let’s do the donation what’s the donation one look like interdonation amount this is kind of similar because this is what the person’s gonna have to do with their invoice they’re gonna have to put in a payment amount all right but we’re gonna need some other fields so this may not be the best one let’s preview this e-commerce oh okay this one allows you to enter your own price oh and it gives you a subtotal it adds shipping it adds handling it also has a spot for a discount which we’re not gonna add that but that’s cool it shows me the cart total this may be the way to go this may be the way to go it also has price options because what we’re gonna need to do if you look at this pay online portal I mean if we get past the first step here one fifty dollars okay test it test dot com next it has to show them how much they’re paying in fees that three percent processing fee and then it has to add that to the total that’s due and then it has to allow them to pay with card or stripe or paypal all right let’s I’m just gonna let’s just let’s go rogue let’s go rogue I’m gonna I’m gonna do a blank form let’s do it at this and we’re gonna do some side by side stuff so and you’ll see the tabs I guess because we’re gonna use two tabs so this tab will be called customer info and then this tab will be called let’s edit that payment info okay so we’ve customer info and we have payment info so under customer info we’re gonna drag in some fields here that’s my first name last name email address phone number and what else do we have I’m gonna leave that open okay pay invoice number and amount maybe we should just do all this on one form I don’t the tabs might be a little a little much we’ll do the tabs if we find out that we absolutely need to but I’m just gonna try to do this all on one tab for right now all right so we have this first name last name email phone I think those are all good we’ll do sections how about that so I had a new section this will be called customer info I’m not gonna probably show these labels but they’re good for me on the back end payment info all right this is gonna be an invoice number and payment amount okay invoice number how do we want to do this that’s a text field maybe we should do a number field for the invoice number so they can’t put any other text in so that’s gonna be invoice number and then let’s go down to e-commerce here we go price price checkbox price range cart total cart detail quantity what is price do let’s find out price all right I’ll do this invoice amount payment that’s what we’ll call it and okay so save and close that this is gonna be called invoice number show label hidden okay I think that’s all good email phone this will be last name definitely required this will be first name definitely required invoice number will be required all right let’s publish and see what we have so far as we build our page out here your invoice all right good so we’re gonna add a section we’re gonna have another section oh no we don’t want to call them another section this is gonna have the payment form in it but we are going to wrap it like this form wrapper split I think I did this I don’t know give the done okay yeah that’s already got two all right we’re gonna add an image here browse for our placeholder we’ll use this one okay that’s all looking good we’re gonna add a house that’s designed just a text in a heading so we do text and we’re gonna do a heading all right this is form a form wrapper split inner there we go and this is gonna be accent lined this is gonna be an h2 form wrapper split heading go have a heading meta image form our split image form our first split image wrapper form our first split inner okay we don’t have a heading so but we do have an image okay that probably does like object fit cover and stuff like that yep okay over here what we can do is obviously this is the ID level we’ll just center everything and then this is gonna say secure payment and this is gonna say pay your invoice online all right and then we’re gonna add a form and I cannot select the form yet because we open the editor prior to adding that form so I’m gonna go ahead and save and refresh all right while I do that let’s add a section and this is gonna be the payment details my my daughter’s dying apparently downstairs as usual when I’m recording cannot record a single episode without just you know chaos in the background that’s the life okay we are going to front end all right oh wait hold on sorry the crying has got me all discombobulated so I think I didn’t name it yet it’s called new form and oxygen is not letting me select it wow okay little bit of lag all right there it is let’s go margin top and we’ll do an L now that’s gonna be too much margin top we’re gonna do an M okay and we’re gonna do form we’re just gonna do on white for this and I am gonna change this inner over here or maybe it’s the entire form wrapper split does that have a background color on it it does not does this inner have a background color on it it does we’re gonna take that away okay that’s what I want my form to look like all right let’s see if we can type in an amount on the front in there so let’s say we’re gonna put in I think that’s just a placeholder you can actually put this anywhere so let’s say it’s gonna be five thousand dollars there it is nice five thousand dot 65 and it lets me edit the sentence too okay so that’s a good start I don’t know why there’s this up and down here invoice number 505 because letting me do that I don’t think I want to do that all right let’s where’s our form here we go I’m gonna put this at the beginning invoice number required show labeled default value placeholder placeholder can be like you know 5609 or something autocomplete select prefix I want to be a pound sign and then where is that behavior for ah steps increment is a decrement decrement decrement increment decrement I think it’s decrement by this value use any to allow any number of decimals let’s do any I mean we shouldn’t need decimals anyway okay data lists off maybe I shouldn’t use a number field maybe we should do text default number entered in field help text autocomplete prefix invoice number I’m gonna ask mark if there’s a way to get rid of that step field oh we would have to style that too if I put the number in there I’m not gonna do that okay that’s nice just too much extra work okay default value label position top top field restrictions minimum value this field can have zero maximum I don’t know step any ah yeah let’s just delete that let’s just let’s just go with a text field so we’re gonna say invoice number and placeholder help text autocomplete let’s look at our advanced options here read only disable minimum characters maximum characters input mask pattern 1 2 3 4 I wonder how many numbers his invoices are I don’t know that’s probably not a good a good thing to do all right I will just say we close that we should be able to validate whether it’s a number or not all I’ll ask mark about that but all right let’s publish oh we did publish those changes okay looks like a what we’ve got on the front end so now they can type in numbers and then there’s no little up and down boxes it’s a lot cleaner that way okay so invoice number payment amount what do we need to add now we need to add let’s go down here so we have our price price checkbox price radio price range quantity price subtotal that’s got to be in there somewhere what does this say required setting okay related price field payment amount okay saving close I think let’s do this I need to know where the stripe slash PayPal stuff gets added here’s a price select I think I just allowed you to select from different prices the same thing with radio and checkboxes and all that quantity cart detail all right let’s start on the cart detail and see what that does let’s start on a total and see what that does see what we’re working with here you know okay so the subtotal is zero dollars okay I don’t know what cart detail is going to do but we definitely have a total there all right what about do I have a pay button save submit all right let’s go to WS form and go to knowledge base and we’re going to go to payment stripe elements okay and then there’s probably a PayPal checkout as well so I think I’m going to need those add-ons so we’re going to go to my account downloads we’re going to come down to stripe elements will download that save to downloads save okay and then PayPal PayPal PayPal PayPal PayPal checkout will download that we’ll save that downloads downloads okay and we will go here so I’m going to open plugins in a new tab I don’t know why it’s going so slow on me okay add new upload and downloads where we downloads all right we’re going to throw in oh gosh you can’t see it all right PayPal gets added activate add new upload stripe elements all right activate now we’re going to have to do settings and all that I’m sure but I’m hoping that I can add these before I set up the settings so we’re going to go to settings PayPal checkout okay environment sandbox stripe elements environment test all good all right I don’t even have any keys to use yet I hopefully the fields will still to complete the PayPal checkout setup enter your API keys here yeah okay I’m hoping I don’t have to do all that stuff to just get a test form working okay let’s refresh the builder and let’s refresh our form builder now we should have maybe other options price radio price select advance okay maybe not price price select quantity price range okay I’m gonna pause the recording for a second I’m gonna go grab some stripe keys and I’m gonna put them in just to see if they are needed for any of this checkout stuff so I’ll be right back all right guys I am back let me make sure that this unpause because I’m using yeah it did okay so what I found out is if you put in you have to put on the add-on license keys you have to put in the license keys I believe because I put in the stripe keys and saved and I still didn’t have access to the features I put in the license key and now am I showing my license key to everybody that’s fantastic why don’t we edit that out in the editing portion of this okay so now I have this stripe card and stripe submit so I can actually put this in here and put this in here and it looks like let me see what other settings I have for this stuff so bottom icon hidden icons of the fault zero amount all right all that stuff’s good all right so we’re just gonna see what this looks like on the front end now so I’m gonna hit publish go to the front end and credit or debit card I’m not seeing is it because I don’t have a price payment amount 5,000 no all right I do not have a price credit card debit card form field settings show label transaction type amount to charge oh okay so let’s put this in this is gonna be payment amount or actually this should be the total not the payment amount so I’m gonna come down to cart total we’ll put that in saving close maybe that has to be set up in order for the form field to show nope all right so 5,000 all right let’s inspect this and see why we’re missing that field credit card label div okay why is all this hidden now this is invalid feedback this is the div for the actual stripe card yeah where is it want wait text line left got the label here’s the field all these are marked as hidden but I didn’t I didn’t market this hidden did I nope it’s not marked as hidden all right what is this oh I never saved this okay cart detail okay I don’t think I need a cart detail delete field cart total price sub total cart total transaction type one time currency dollar subscription payment to did it a customer do I want to create a customer no probably not do nothing what should happen to the cart total zero in the strike button is clicked do nothing show error message okay scroll to top error message duration show invalid feedback I’m just I’m not seeing what I’m missing here submit payment advance bottom primary removal with class it’s not disabled all right let’s go back in here and look and see what we’ve got going on test oh let’s do live because it’s a live key not a test key that may be what’s wrong there we go okay now I have a credit card number fields I’ve got the whole strike field ready to rock and roll okay so that will charge five thousand dollars to a credit card if I run that right now so we don’t want to do that what we do want to do I actually don’t want these fields I like I don’t want them shown I just want them to be hidden and I’m going to use maybe text fields to just show people the amounts I think all right let’s see how we’re going to do this so the first thing I need to do here’s payment info invoice number payment amount see I want to do this these things need to be up here with this cart total payment details yeah okay this isn’t payment info this is price pricing something like that okay I need to add maybe a HTML area like this and remember these are going to be hidden now so I’m going to hide this I’m going to hide this okay and now we have to do calculations so we have to do the payment amount calc so I hit that little button right there and it put the calc in there for me and I need to do this this allows me to dynamically insert data so I can insert the payment amount times and we need 3% so 0.03 I think it’s actually 3.2 so we’ll do times 0.032 and this is actually going to be advanced field wrapper is going to be a payment calc card like that all right this is actually going to be output as a number so we’re going to wrap this we’re going to say this is how do we want to do this first we’ll do a div no I don’t I don’t even know if we need the div we’re going to do span okay it’s typing it for me I think I can actually there’s there’s a way to make yeah this right here okay I can get that like full screen here okay so span class equals and this is going to be the cc fee like that I’ll do price cc fee like that how about that I think that works okay and this is going to say this is going to be an h4 maybe and this h4 is going to be processing fee maybe and just do an h5 here I don’t know okay saving close let’s just see what’s going on so I’m going to hit that open this so if I put 5,000 in here there you go you see it’s a hundred and sixty dollar processing fee so that’s calculating properly now what we have to do is inspect this and remember we did payment calc card and I’m going to give that a little styling so we’re going to go to I’m going to reload the builder here let’s save this I want to be to see what I’m doing with CSS in here okay so manage style sheets you make this a little bit bigger and we’re going to open up forms and we’re going to come down here and why is it lagging all right we’re going to go payment form yeah wow cap flock not working today all right I’m going to zoom in a lot on this so y’all can see what I’m typing all right so there’s payment calc card and immediately I’m going to go padding var space s and background color var whatever it was up here so let’s look at it looks like base light is what I was using for base light oh no no shade it’s got to be shade shade light shade ultra light okay that’s correct border radius var radius m is that m or s all right I don’t know why is it not in the grid like everything else those fields have some sort of default padding to them let’s take a look so if I look at this field it does look at that WS field wrapper has padding left oh WS have tile what if I make this zero then there’s no gap in the grid ah okay I don’t know man this will be so much easier when okay WS have tile so I think what I can do is just go to this HTML block and we’re going to call this processing fee and then in advance I can just put on this WS have tile class I’m hoping I’m hoping that that will fix it no it did it okay so I need to do okay well I think what I can do is we’ll just ditch everything that we just did and we’ll style these fields differently okay so processing fee we’re gonna disable it so that you can’t tie well I don’t maybe it’s like let me let me see how interactive it is oh yeah yeah okay we definitely need to disable it so people can’t just type in so let’s go to advanced disabled save and close publish okay now I can’t do that but it still does that okay so processing fee does it have a disabled class or are you disabled equals true processing fee 160 okay I’m just gonna give this a class field is gonna be pay form form fee something like that now form form cowke field something like this this is a I don’t know hopefully this stuff is good for like tutorials because I’m like I just hate when I’m having a figure out everything like step by step I don’t know if you guys like actually like watching that or don’t like watching that I have no idea but alas we’re gonna do it and see what the heck you guys think all right so form cowke fields we’re gonna need the background color to be base dark the color is gonna be shade white these are all gonna have to be important sized let’s just see how that looks with my luck it did absolutely nothing all right we don’t need to do anything there let’s just do this processing fee form cowke field there it is oh it’s got like a web kit text fill color oh field disabled it’s w oh okay interesting look at all this CSS that’s attached to these fields field disabled okay so form cowke field oh boy what are we how do we want to do this because I don’t want to style all disabled fields the same way so we can put a form on white we’ll just do a class of payment form and then we can come down here say I did something like this up here where I do payment form is any of these things and then I can open my styling all right so we want to test this out put that in save refresh and cross fingers whoo all right we’re making progress this needs to just be base color shade white is not doing anything unless that’s an opacity no opacity’s one it’s got this web kit text fill color okay so we’ll do that as var shade white important as well there we go processing fee zero dollars one sixty can’t type in it I don’t want that disabled thing and I don’t know what that’s called it’s a cursor there it is oh cursor not allowed okay so I’m just gonna do cursor inherit and that should just set it back to a normal cursor so I’ll refresh there you go cursor with this inspect cursor cursor cursor cursor inspect cursor cursor cursor I think that might just do that because it’s the default for an input field so let’s look at our CSS here form cowfield cursor inherit here as well but that might still inherit that little bar let me just refresh and see it’s not a huge deal I just yeah I just it makes them it makes them seem like that they can type in there I got to do more research on that we got to move along so processing fee now what I need is price subtotal let’s we may not have to do anymore calcs we needed disabled this field though unless it’s okay it’s not editable by default let’s save that let’s make it unhidden though publish and refresh okay it’s the subtitles not adding this field to this so is it something on here allow negative value please don’t help text exclude from emails it’s not excluded from the cart total always include in cart total save publish refresh still not included in the cart total or the subtotal let’s unhide this and see if it’s in the total all right it is in the cart total so we don’t need this subtotal field then so I’m going to delete subtotal cart total is good to go processing fee I want the class that I put on there form cowfield we’re going to put it on here as well form cowfield save and close publish and then form cowfield payment form I can color color cursor let’s put this up here as well okay inspect because this isn’t disabled that’s the thing is it’s not it’s not going to inherit these disabled stylings like this one because it’s not technically disabled so I’m going to see if there’s another class on it of some sort okay it’s just a normal form on white all of that okay so form cowfield though it is a form cowfield so it should be inheriting those styles form on white payment form form cowfield save I don’t know if that’s going to override it because it’s probably because it’s using that is why can I refresh this okay payment form okay is input type okay let’s do this save boom we in business okay good good good good processing fee all right I don’t want it to say cart total though I wanted to say total payment amount save and close publish we’ll refresh the builder while we’re at it all right so invoice number payment amount processing fee total payment amount I do want to make a note there so it’s going to say processing fee we’ll just drop it to a normal 0.03 so 3% and I’m actually going to have to pause this recording and because I have a call in me look at my thing yeah I have a call I have a call in like six minutes okay but I think we made good progress here when I come back I’m going to add the PayPal module and I’m going to see if there’s a selector between do you want to pay with credit card do you want to pay with PayPal but check that out we’ve got it will in fact process that charge for five thousand one hundred sixty dollars if we do it that way all right I’m gonna I’m gonna pause we’ll come back we’ll try to finish this up when I get back all right I’m back just did a long call with the client and I have another call in 15 minutes but we’re gonna try to get a little bit more done on this before I have to pause and then probably continue again this is the life okay so what I did is I also put in my PayPal key and then if you go to settings and you look at PayPal checkout it’s help don’t look at any of this stuff don’t look at my screen I’m just kidding you create a PayPal app right here so you just click the link create a PayPal app and then you put in the sandbox ID and then when you’re editing your form you get access to the PayPal button right here and so now I’m gonna put this in probably right there we’re gonna publish that and let’s go to what what am I doing here a peach tree fence pay okay and now you have these payment buttons PayPal pay later we don’t want to pay later I wonder if we can turn that off let’s check okay what if I do horizontal saving close publish let’s put this here so it’s closer to our other tab too easy ways to pay pay with PayPal pay later I guess you do want to maybe we do want to offer that but what we need to solve here is this yeah my busy cal alarm notice just came up for my next appointment all right so we don’t want both of these to show at the same time obviously so I think we’re just gonna need conditional logic here let me hide that okay so this is gonna be we can do a select box or we can do a radio button let’s do radio and this is gonna be payment method and then our options we’re gonna go to radios our options is gonna be credit card for PayPal we’ll delete that third option credit card will be our default selected okay and then let me move this up out of the way again save and close and then what we need to do is go into conditional logic here and we need to do payment method and we’re basically gonna say payment method row checked is credit card then and then we’re gonna target the submit payment credit or debit card field set visibility divisible else set this ability to hit it okay and then what we need to do okay this is me payment method credit card saving close I shouldn’t have said saving close I just wanted to save I’m gonna duplicate that this is gonna be PayPal and then this is if PayPal is checked then payment method checkout this is this checkout field right there that’s the that’s the PayPal one said visibility to visible we can delete this credit card one else set the checkout visibility to hidden we’ll save and close I think I’m gonna have to do this pay submit payment button as well so that’s gonna be under credit card then credit card and submit payment set visibility visible and then hidden it does it automatically okay so publish hopefully this isn’t blow up in our face so there’s credit card and I see a credit card form oh PayPal shows me a PayPal form right off the bat okay I like it a super clean all right I think we are good to go we need to do a couple things like invoice number needs to be required the phone number needs to be required we can also put an input mask on that I’m gonna copy that pace saving close email needs to be required first name and last name are already required those are good publish okay refresh and there we go people can put in their first name Kevin Geary Kevin and digital gravy.co 404 let’s do my business 770 250 7613 invoice number 5678 payment amount 4585 it’s got a $137.55 processing fee total payment amount is this right here I can pay with credit card or I can pay with PayPal let’s hit pay with PayPal and see what happens it’s gonna make me log in or I can say pay with debit or credit card so I’ll just pay with credit or debit card PayPal guest check out there’s the amount right there they put in their card number they fill in all their other information I I’m guessing with those mapping fields we can map some of this over so that would be cool but as you can see it’s all working they can absolutely pay through PayPal okay so I’m good with this for right now that’s gonna conclude and look at that I finished we were closer to being done than I thought we were all right so I got to do another call but that’s gonna be the end of this tutorial I’m gonna come back and finish off this page but at least I got the form done and working the only thing we’ll have to do now is swap in the client’s straight details the clients paypal details but that should be super easy all right peace