Create Petitioner Credit Card with airSlate SignNow

Add esigning credit card

alright guys in this video we are going to take a look at a pretty cool package that deals with credit cards the package we will be using is react credit cards basically what this gives you is a card component with some styles and animation that looks as though you are viewing an actual credit card while you enter your information let's quickly see how to make use of this library as always I have started off by creating a new project using create react app now open the terminal and run the command yarned add react - credit - cards once the installation is done we should be able to use the component provided by this package I'm going to head over to AB Dodgers and clear out the header section next I'm going to import two things the first one is the cards component from the library so import cards from react credit cards the second one is the CSS that the library provides import react credit cards / es / styles compiled dot CSS now when you enter your details for your card we have the credit card number the name on the card the expiry date and the three-digit CVC on the other side in our example as well we need to collect that information from the user that means we need to add a basic form with input elements and to keep track of the form values we need state variables let's start off by importing your state from react so import react and you state next we declare five different state variables to save us the time I'm going to copy paste the code for those five variables so within the app component five variables the first one is number which is for the credit card number we then have the setter function and the initial value is an empty string similarly we have state variables for name expiry and the three digit CVC they all have empty strings as their initial value the last variable is a different one this is a variable that the library component needs for styling and animation I'll come back to this in a bit now that we have the state variables the next step is to define the form that collects these values so in the JSX I'm going to add a form tag within the form tag we add the form input elements for the first input we except the credit card number so input type is equal to te l or telephone just to open the number keypad name is equal to number and placeholder which says card number value is going to be equal to number which is the state payable and on change we update the state variable so gives us the event we call set number passing in event dot target dot value quickly going to format this and add the final prop this is going to be on focus over here we get again access to the event and we call set focus passing in event dot target dot name the name here is number which corresponds to the number field for our credit card similarly the next input is for the name of the cardholder so I'm going to copy paste and make the necessary changes input type is equal to text name is going to be equal to name placeholder is name again value is going to be equal to name on change you know target dot value on focus or target dot name next we have the expiry again I'm going to copy paste and make the necessary changes input type is equal to text name is equal to expiry placeholder is going to be mm /yy and then expiry value is going to be expiry on change is going to be set expiry which reminds me that I have to change this to set name and of course on focus remains the same the last input is for the three digit CVC it's a copy-paste it type is equal to te L name is equal to CBC placeholder is equal to cv C value is equal to CBC on change said CBC and on focus remains the same alright now that we have the data collected from the user we can view that in the form of a credit card for that we use this card's component that we have imported so at the top above the form tag I'm going to add this card's component now this component accepts five props which are pretty much the five state variables number which is equal to number name is equal to name expiry is equal to expiry CBC is equal to CBC and finally a slight change the prop is called focused and the value is going to be focus it is as simple as that the final bit I'm going to do is just add some styling to the input element so I'm going to open app dot CSS and on the input element add some styling let's save the file open the terminal and run the command you aren't starred when the page loads you can see that we have four input fields and above the fields we have the card component if I focus on the number field the number in the card gets highlighted as I type it out the card also reflects the number I focus on the name the card focuses on the name you type in your name you see the name the expiry the expiry and then the cool animation when you focus on the CVC the card flips and you see what's on the other side of the card focus on the other fields again and the card flips so a really cool package that I wanted to show you guys and what is also awesome is that if you try to enter a valid credit card number it actually reflects that credit card provider CSS so if I start with five five you can see that it's a MasterCard I start with the four it's visa it supports other cards as well and I will leave that for you guys to explore but this pretty much is the react garsh library I wanted to show you guys thank you guys for watching don't forget to subscribe and I'll see you guys in the next video