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.
If you scroll to the end of this post there are also two supporting video tutorials.
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.
If you have any questions about Moonclerk or recurring payments please leave comment below and I will be happy to answer them!
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.
Subscribe to my newsletter and receive Squarespace news and tips, blog post summaries and the occasional personal musings. Always with pretty pictures! And I never share your email address.