Styling PayPal Buttons in Squarespace

I used to offer 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. The best workaround would be to use a service like MoonClerk or PayPal. I like MoonClerk better, but at the time, I needed a free solution.

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:

And that's just pretty darn ugly. I'm not sure why PayPal still thinks this is okay after 1999, 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 $120/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!

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, upload the .png image to your site by going to Design > Custom CSS. At the bottom of the sidebar, you’ll want to click the “Manage Custom Files” button and then add your image. After it uploads, click on the uploaded image name and you’ll see your image URL in the large white box above. 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!">

And that’s it! You did it!

---

*This fix requires adding custom code to your Squarespace website. Please check that your account level includes the ability to add custom code.

Update: Squarespace now offers a subscription option on their more expensive Commerce plans. But if you choose to stick with PayPal, the options below will still work.

This post contains an affiliate link to MoonClerk. If you click through and pay for their service I’ll be compensated, at no extra cost to you.

---