Customizing the Payment Button Styles of the Stripe Payments Plugin

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:


[accept_stripe_payment name="Test Digital Item" price="25" url="http://example.com/downloads/my-script.zip" button_text="Buy Now"]

example-default-stripe-payment-buy-now-button
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:


[accept_stripe_payment name="Test Digital Item" price="25" url="http://example.com/downloads/my-script.zip" button_text="Buy Now" class=""]

example-stripe-buy-now-button-using-themes-style

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:


.my-super-cool-button {
-moz-box-shadow: 3px 4px 0px 0px #1564ad;
-webkit-box-shadow: 3px 4px 0px 0px #1564ad;
box-shadow: 3px 4px 0px 0px #1564ad;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5));
background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5',GradientType=0);
background-color:#79bbff;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #337bc4;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
font-weight:bold;
padding:12px 44px;
text-decoration:none;
text-shadow:0px 1px 0px #528ecc;
}
.my-super-cool-button:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff));
background:-moz-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-webkit-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-o-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-ms-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff',GradientType=0);
background-color:#378de5;
}
.my-super-cool-button:active {
position:relative;
top:1px;
}

You need to add this CSS code to your theme’s stylesheet or insert it into your site using a plugin like this custom css plugin. Then specify the CSS class name in the shortcode like the following example:


[accept_stripe_payment name="Test Digital Item" price="25" url="http://example.com/downloads/my-script.zip" button_text="Buy Now" class="my-super-cool-button"]

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

example-stripe-buy-now-button-using-custom-style


Customizing the Payment Button Styles of the Stripe Payments Plugin originally posted at TipsAndTricks-HQ

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s