I usually see a lot of developers using stripe checkout to handle stripe payments. Checkouts holds an advantage when it comes to security, but I never liked how the styles of the website changed whenever you went to checkouts. I also thought it was going to take too long & too much code to style elements. I'm glad I was wrong.

We're going to create a html file with a stripe element in a form. Then, we're going to make a js file that will create a stripe element. You need to have an account with stripe in order to get your public & secret keys. You also need to install the stripe package & create an instance of the elements object. We're going to use the elements.create() method to make a stripe payment card. This method takes 2 arguments, the type of stripe element you want & the options object that can update the element as well as style the element. Right now, we're going to use "card" as our first & only argument. We're going to call the element.mount() method to attach the element to the document. The mount method takes 1 argument, the querySelector of the document element you want to attach the stripe element to. This will be the cardElement div on the document.

The catch to styling a stripe element is that you barely style it directly. You wrap it in a div & style the div. We're going to give some styles to the form & the inputs in the form. One of the only properties you can style from the css for the stripe element is the padding. Most of the styling needs to be done in js. Their is one important style you need to be aware of. To center the stripe element vertically, you can use flexbox. The flex-direction has to be column, then you can justify-content center to vertically align the element. I tried with flex-row & it didn't work. This allows to change the height of the wrapper & stripe element when you need to.

We're going inside the js file to create the second argument for the elements.create() method. This argument takes an options object which will use to style our element. The stripe element has different states that can be styled for right now we're going to be styling the base, which is the base styles. For more on the different states you can click this link. This is pretty basic css styles, we're going to style the background-color, icon-color, font-size & color. We're going to use a placeholder psuedo attribute to style the text when there is nothing in the element.

The stripe elements have events just like a dom element. We're going to use focus & blur to change the color of our wrapper div when we enter & exit the stripe element. This is a link to the final result.