How to Use Stripe Payments Plugin on Your WordPress Site

In this tutorial I am going to show you how you can customize the payment button styles of the Stripe Payments plugin.

You can customize your button styling using “class” parameter of the shortcode. If it’s omitted, your button will retain the default style provided by Stripe:

If you put an empty value (e.g. class=””), your button will use your theme’s default button look. This is how it would look like if you’re using Twenty Sixteen WP theme:

Custom Button Styling

You can use your own custom styling if you want to. Let’s say you have css code with class name “my-super-cool-button” and it looks like this:

You need to add this CSS code to your theme’s stylesheet. Then specify the CSS class name in the shortcode like the following example:

And here’s how your button will look like if you used the above CSS:

More Button Styles

Using the following CSS code, you can customize buttons even further.

The custom CSS code offered below has 3 button styles and 7 different colors for each of those.

Simple (class=”aspButton simple”):

Fancy (class=”aspButton fancy”):

Biggy (class=”aspButton biggy”):

Let’s say you want your button to look fancy green. You need to add following parameter to your shortcode: class=”aspButton fancy green”

If you want a biggy gold button, you should put class=”aspButton biggy gold” in your shortcode:

The CSS Code

Here is the CSS code for it. You can copy and paste the CSS code using a plugin like the custom CSS plugin.

Latest posts by Steve (see all)