This tutorial shows how to install a PayWhirl payment widget into your Squarespace website using a native "code block" in SquareSpace to display your embed code. 

Note: If you are selling physical products, you can connect PayWhirl to ShipStation to easily manage orders and fulfillment.  

To get started you will need to add or EDIT A PAGE on your Squarespace website. Once you are in the edit mode of your page, you will need to locate the "Add Block" button (or plus symbol "+") which is usually in the top right corner of the page in squarespace:


Next, you will need to select the "Code" block option:


In PayWhirl, locate the embed code that you'd like to use. In this example we will use a WIDGET embed code that displays pricing table with subscription options. You can copy the embed code from your account from the EDIT WIDGET page.

Once you have copied your embed code from PayWhirl simply paste it into the code block section of Squarespace in the html mode and click apply:


Finally, you will need to save the page and logout of the Squarespace admin panel to preview your live payment widget. Unfortunately, the safe preview Squarespace offers doesn't always render the widget previews correctly so you need to logout to test:


Once you have installed your recurring payment widget into your Squarespace page and logged out of the system, you should see it displayed. 

If you notice the widget break down into a mobile/vertical layout by default (it does NOT display horizontally as pictured above) you can edit your themes "content inset" setting and/or use custom css to modify your page's width so the widget has more room to display horizontally.


TROUBLESHOOTING TIPS

If you have problems getting widgets to display properly or load within Squarespace there are a few things you can try to fix the problem:

1) Wrap your embed code in div tags to help the page display properly. Like so...

<div> EMBED CODE HERE </div>

2) If the embed code is the only thing in the page you can add other content (text, images, titles) above or below the widget to help it render properly sometimes. Certain Squarespace themes will see the page as empty if there is no other content on that page so they won't load anything, unless there is other content on the page.

3) Separate your embed code into TWO parts (usually not required but can solve problems) and embed the 1st script into the HEAD of the website and the 2nd one into the code block on the page.

https://support.squarespace.com/hc/en-us/articles/205815908

For example, if your embed code from PayWhirl looked like this normally...

<script type="text/javascript" id='pw_5995df5d2be2d' src="https://app.paywhirl.com/pw.js"></script>
<script>paywhirl('widget',{autoscroll: 1, domain:'paywhirl-demo' ,uuid:'77ab1c9a-77c6-4f88-affd-923d374c0254'},'pw_5995df5d2be2d'); </script>


You'll notice there are actually TWO scripts provided for each embed code...

<script type="text/javascript" id='pw_5995df5d2be2d' src="https://app.paywhirl.com/pw.js"></script>
<script>paywhirl('widget',{autoscroll: 1, domain:'paywhirl-demo' ,uuid:'77ab1c9a-77c6-4f88-affd-923d374c0254'},'pw_5995df5d2be2d'); </script>


If you take the FIRST script and put it into the HEAD of the page on your website (https://support.squarespace.com/hc/en-us/articles/205815908) it can help solve problems with certain themes. In this scenario, just the second part of the script with the widget info would be embedded with a code block. 

SquareSpace Per-page Code Injection:

You can inject code into a specific page on Squarespace:

  1. Open the page while in the Pages panel.
  2. Hover over the content area.
  3. Click Settings.
  4. In the Page Settings window, click Advanced in the top-right corner.

You can also try to put your entire PayWhirl embed code in the header code injection section of a page, but this shouldn't be necessary in most installations.

4) Disable Ajax Page Loading:
https://support.squarespace.com/hc/en-us/articles/115000253288-Ajax-loading

If you have any questions about how PayWhirl's recurring payment forms can be integrated with SquareSpace, please let us know!

Related Articles:

PayWhirl widgets & embed codes

How to create payment plans

How to offer upsells to customers during checkout (recurring or one-time)


Team PayWhirl

Did this answer your question?