Add a Square Checkout Button to your Website
After you create a Checkout Button on your online Square Dashboard, you can add it to your own website or blog outside of Square.
The process of adding embed code to your website’s source HTML is a bit different depending on how and where you want your Checkout Button to appear, on your publishing platform, and sometimes on the theme you’re using on that platform.
Note: If you need help with adding embed code to publishing platforms outside of Square (such as Squarespace or WordPress blogs), then contact your website provider or publishing platform directly for support. While we cannot guarantee that your third party website will be able to support Square’s Checkout Button, these instructions are examples of how to add your Checkout Button to a site outside of Square.
Check out more info on creating Checkout Buttons.
Adding a Checkout Button to a WordPress blog
You can add a Checkout Button to individual posts and to the menu on the home page of your WordPress.org blog.
Note: Embedded Checkout Buttons are compatible with the WordPress.org platform but not with WordPress.com. This documentation describes WordPress 4.2.2. Your version might be different. You can learn more about WordPress versions on the WordPress support site.
Add Checkout Button embed code to a WordPress post
From your online Square Dashboard, create a Checkout Button.
Select the Checkout Button you wish to embed on your website and click Copy the embed code.
To paste the Checkout Button embed code on a Wordpress post:
From your WordPress dashboard, go to your posts.
Create a new post, or edit an existing post where you want to display a Checkout Button.
Depending on the WordPress version you’re using, complete one of the following steps:* In the post, change the text editor from Visual to Text mode.* From the block editor, click the + button, search for Custom HTML, and then click Custom HTML.
Paste the embed code into the text field in the place where you want the Buy Button or collection to appear.
When you’re done, click Save Draft, Preview, or Publish.
Add Checkout Button embed code to a Wordpress menu
To add your Checkout Button embed code to a Wordpress menu:
From your WordPress dashboard, click Appearance.
Click Customize to open the theme editor, and then click Widgets.
Click the name of the area where you want to add the Checkout Button.
Open an existing Text widget, or click Add a Widget, and then click Text.
Paste the embed code into the main text field within the Text widget.
Save your changes.
Adding embed code to Squarespace website
You can add embed code to individual posts in Squarespace and to the menus on your home page. In some cases, you might want to do both. For example, you can embed a cart on your home page to receive purchases from Buy Buttons that you embed on individual posts.
Note Some advanced customizations on Squarespace are theme-specific. These customizations aren’t supported by Square.
To get started:
From your Squarespace dashboard, open the webpage where you want to add the Checkout Button embed code.
Find the element on the page where you want the Checkout Button to appear, move your cursor over the Page Content area, and then click Edit.
Click the insert point where you want to add the embed code.
In the More section of the Content Blocks dialog, click Code.
In a new browser window, visit your online Square Dashboard and create a Checkout Button.
Once you have already created a Checkout Button on your Square Dashboard, select the Checkout Button you wish to embed on your website and click Copy the embed code.
From your Squarespace dashboard, paste the embed code into the CODE dialog. Make sure that the text field is set to receive HTML.
Click APPLY on the EDIT CODE dialog.
If you complete the steps and your Checkout Button is not loading, then you might need to disable Ajax loading. To see more details, go to Enable or disable Ajax.
Note: If you add an embedded cart to a menu on your Squarespace home page, then it receives orders from Checkout Buttons that you embed on individual posts.
Adding the Checkout Button embed code to Wix
After you’ve created a Checkout Button or collection in your Shopify admin, you can add it to your Wix website using the Wix Website Editor.
Note: If you want to embed Checkout Buttons for multiple items, then you need to edit the embed code before adding it to the Wix HTML code widget. If you embed more than one Checkout Button into your Wix website without editing the embed code, then customers trying to buy more than one product see a separate cart for each product.
If you want to display more than one product on your Wix website without editing the embed code, then you can embed a collection. You can create a new collection in your Shopify admin for the products that you want to display on Wix.
From your online Square Dashboard, create a Checkout Button, and then copy its embed code.
Note: When you create your Buy Button for a Wix website, you cannot use the Redirect in the same tab option because of Wix limitations.
To paste your Checkout Button embed code onto a Wix site:
From your Wix account, find the site you want to edit in the My Sites section, and then click Edit Site.
In the Wix Website Editor, click the plus sign button, and then click More.
Click HTML Code to add an HTML code widget to the page.
Click Enter Code.
On the HTML Settings dialog, paste the embed code for your Buy Button or collection in the Add your code here field and then click Update.
Resize the HTML code widget to fit its contents. If you are creating an embed with a cart, then make sure the cart tab appears in the right place.
When you’re done, click Save.