Styling PayPal Buttons in Squarespace

styling paypal buttons in squarespace.png

I recently added a Membership option for my clients, to allow me to stay on retainer for small updates to their Squarespace websites. I wanted to set a recurring payment, but unfortunately Squarespace doesn't offer a built-in option. Their suggestion is to use MoonClerk which looks like a lovely solution, except that the lowest price point is $15/month. Which seems much too high for my small volume.

I decided to use PayPal and create a Subscription button. That's pretty easy to do, following PayPal's guide to Create an Automatic Billing Button. But the drawback is that the button on your site looks like this:

 
paypal-subscribe-btn.png
 

And that's just pretty darn ugly. I'm not sure why PayPal still thinks this is okay in 2018, but I didn't want that black and gold button on my site. 

There are two solutions that I came up with. The first is a much more elegant solution, but requires some finesse with CSS. If you aren't comfortable with finding source code and copying it to your Custom CSS, then skip to the slightly wonky, but much better than the PayPal button, second solution below.

Note: Both solutions involve adding custom code to your Squarespace site. 

Solution 1 : Change the PayPal button code and customize your CSS to match the rest of your website.

First, find the line of your PayPal button code that looks like this: 

<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_subscribe_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">

And replace it with this:

<input type="submit" value="Sign up for $20/month" name="submit" title="PayPal - The safer, easier way to pay online!" class="membershipButton">

Then in Squarespace navigate to Design > Custom CSS and create a style for membershipButton that matches the other buttons on your site. Mine looks like this:

.membershipButton {  
    border-width: 2px;
    border-style: solid;
    backgroundpadding: 21px 34px;
    font-family: europa;
    font-size: 15px;
    color: #8caab1;
    padding: 21px 34px;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-color: #8caab1;-color: transparent;
    display: inline-block;
    width: auto;
    height: auto;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    line-height: normal;
    background: transparent;
}

Then don't forget to create a hover style as well:

.membershipButton:hover {
   background: #8caab1;
   color: white;
 }

The last step, if you want to center your button, is to go back to the PayPal code and include a <div> tag around it:

<div style="text-align: center;">
 PayPal form code here
</div>

And now your button should look just as nice and clean as the rest of your website:

 
membership-subscription.png
 

 

Solution 2 : Use your own image to replace the PayPal button.

First, you'll need to create the image. I did this by adding a button to my site that looked the way I wanted using the Button Content Block. Then I took a screenshot of the button and saved it as a .png.

Next, add the .png image somewhere on your site. Publish and either view source or right-click on the image to find the filename given by Squarespace. It's something like: 

https://static1.squarespace.com/static/5a1db1cffe54efb296285a9a/t/5a1dc032c83025aa86de3762/1516482409411/?format=1500w

Then you can either use that link in the PayPal button builder when you select a custom button image, or simply switch out the filename in the button code, changing the image line from this:

<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_subscribe_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">

to something like this, using the Squarespace filename you found in the last step:

<input type="image" src="https://static1.squarespace.com/static/5a1db1cffe54efb296285a9a/t/5a1dc032c83025aa86de3762/1516482409411/?format=1500w" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">

If the button is too large, you can add spacers on either side of the Code Content Block, or you can force a width in the code, like this: 

<input type="image" src="https://static1.squarespace.com/static/5a1db1cffe54efb296285a9a/t/5a1dc032c83025aa86de3762/1516482409411/?format=1500w" border="0" width="278px" name="submit" alt="PayPal - The safer, easier way to pay online!">

Finally, remember to delete the .png button image you added in the beginning or hide the page. Don't worry - Squarespace still keeps it behind the scenes so your link will still work!


I hope you found this Squarespace tip useful!