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 a 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 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 log out 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 log out 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.

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

2) If the embed code is the only thing on 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 additional 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...

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

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:

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 for 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!

Please let us know if you have any questions. 

Sincerely,
The PayWhirl Team