Leslies Blogger: 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"]

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=""]

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: