5 Easy Steps To Add A Recurring Payment Plan With Moonclerk

I moved my desk into the closet and painted my office wall!

I moved my desk into the closet and painted my office wall!

I am the first to admit that I don’t always have the technical answers to some of the challenges that come up during a web design project. In this case I was my own customer and this was my challenge:

How do I offer payment plans to those who are interested in my e-course but can’t quite afford the full amount at once?

Squarespace commerce does not offer recurring payments so I knew that I had to look for a 3rd party tool. I checked out Payolee, Paywhirl and Recurhub but decided to go with Moonclerk because their pricing is reasonable and they are recommended by Squarespace and I’ve also heard good things about them. This is not a sponsored post.

→ Click here to see a live example from my website. On this page I have two moonclerk buttons next to regular Squarespace pay buttons. I styled them so they all look the same.

At the end of this post there are also two supporting video tutorials. I no longer use the page shown in the video examples but they still give a good idea of what you can do. 

5 Easy Steps

1. Get your Moonclerk account

Signing up at www.moonclerk.com is very easy and their prices start at $15 per month and are automatically adjusted (up or down) depending on your sales volume. You can create forms and try the various settings for free. To embed the payment form on your website you need to upgrade to a paid account.

2. Create your payment form

Start by creating your first payment plan, Moonclerk's interface is nicely uncluttered and easy to use. Here you determine the amount of your installments, the frequency and you can also add custom fields. I added three custom fields:

  • One mandatory field to capture the customer's address as this is not automatically captured by Moonclerk who only require the credit card details, name and zip code.

  • One mandatory field to ask "Where did you hear about this course?"

  • One optional text box where people can leave comments or questions.

Note: I got a little confused when I set up the frequency of my payments which is determined by the number of periods. In my mind a period is a duration between two points, e.g. the time between the first and second payment is the first period, and the time between the second and third payment is the second period. Yep. That's my German brain going into overdrive! However, what they really mean here is number of payments so make sure you include the first one. In my case I am offering 3 installments so I set it to 3 periods.

3. Copy the embed code

On the Form Overview page go to the menu next to your form name and select Use. Scroll down to Embed Payment Form on your Website and copy the code.

4. Paste the code into your web page

  • On your web page insert a Code Block where you want the form to appear

  • Delete the <p>Hello, World!</p>

  • Paste in the Moonclerk script

  • Save your page and refresh

  • Now you should be able to see your Moonclerk form

Note: when you embed your script you will see a note that says "Embedded scripts are disabled while you are logged in and editing your site." However, with some scripts you can still see them while being logged in by simply refreshing the page. If this does not work for you open your page using your custom URL (not the Squarespace URL) in a private browsing window, then you can see the form.

5. Leave as is or customize

You can now start using the form, congratulations! Moonclerk also offers quite a few customization options so whether you want to bring the form into alignment with your branding colors or style it using CSS, Moonclerk lets you do that. I my second video below I take you through some of the customization options that I used. 

Here is the code that I used in the video:

.control-group a { color: #4298ae; }
.btn-large { text-transform: uppercase; }
.secure { display: none; }
.section { border: none !important; }|
.sub-section { text-align: center; }
.payment-options label { display: none !important; }
#period { padding: 20px 20px 0 20px; }
.control-group ul li { margin: 0 auto; }

Video Tutorials

Click on the fullscreen button in the bottom right corner to expand the screen. Click on HD next to the scrollbar and select 1080 for best viewing quality.

7:30 mins

4:30 mins

Recent Posts