How to add a 3rd party payment gateway to your Squarespace site (2022 update)

Squarespace has undergone a few changes since we wrote this blog (namely the new fluid engine) but with regards to payment gateway’s, the only new option we’ve received is Square.

We still don’t have the option to natively connect any of the other gateways mentioned in this blog post.

PayPal and Stripe are two of the largest and most dependable payment providers for transactions on the web; However, PayPal and Stripe are not supported in every country.

Square is also making its Squarespace debut, but is only available in the US.

Squarespace facilitates three payment processors (PayPal, Stripe and now Square), but due to technical limitations, Squarespace cannot provide payment processors outside of what’s already integrated with the platform, meaning some people have to seek alternatives.

Squarespace facilitates three payment processors (PayPal, Stripe and now Square).

As we don’t have access to Squarespace’s backend code, we cannot integrate another payment processor with Squarespace' own eCommerce features; we have to integrate different eCommerce software.

PLEASE NOTE: Different eCommerce software isn’t a new payment provider, it’s a new Product Management System for which you will need to pay a subscription.

Popular choices that are easy to combine with Squarespace are Shopify and SendOwl; both of which allow you to embed β€˜Buy Buttons’ into your Squarespace site, accepting transactions from the payment processor of your choice.

The β€œLite” plan for Shopify, and the β€œBasic” plan for SendOwl are both $9 per month.

Whenever going through any payment gateway, it’s always advised to look for any hidden fees. Our recommendation is to look at two or three different options and then comparing them to make sure you have a solution that best suits your needs.

For example, Shopify will charge 2.2% + 20p per credit card transaction (outside of its own payment provider), whereas SendOwl doesn’t issue transaction fees.

How to guide:

The following illustrates how you can use Shopify to choose a payment gateway of your choice and then add it to your Squarespace site.

Please bear in mind that this guide requires you to have the β€œBusiness” hosting plan.

How to add your payment gateway to Shopify

1) Create a Shopify account and start a free trial by clicking here.

2) Click the β€œSettings” option in the lower left-hand corner, and then click the β€œPayments” option.

3) Scroll down to the β€œSupported payment methods” section and click on the β€œAdd payment methods” button.

4) You can search for your preferred payment method either by payment method or by provider.

5) After you’ve found your preferred method, click on the β€œActivate” button.

6) As each payment method is different, there will be varying details you’ll need to provide based on your chosen payment method, but after you’ve provided the necessary details, click on the β€œActive” button at the bottom of the page.

How to add a Shopify β€œBuy” button to your Squarespace site:

Shopify Section

1) Create a Shopify account and start a free trial by clicking here.

2) Click on β€œProducts” from the left-hand sidebar, and click β€œCreate Product”.

3) Create a product that matches a product you already have in your Squarespace store.

4) After you’ve created your product, from the left-hand sidebar, click on β€œSales channels” and when prompted type in and search for β€œBuy button”.

5) The Shopify App store will open in another tab; you should select the β€œBuy Button channel” app, then click β€œAdd app”, scroll down to the bottom of the page and select the β€œAdd sales channel” button.

6) Click the β€œCreate a Buy Button” button, then select the β€œProduct Buy Button” option and select the product you want to create the button for.

7) Switch the β€œLayout style” to β€œBasic” and ensure the β€œAction when people click” option is set to β€œAdd product to cart”, then click β€œNext”. You can also change the appearance of the button under the β€œButton style” option and change the layout options (such as alignment, etc…) under the β€œLayout” options.

8) Copy the code and switch over to your Squarespace site (I’d leave the tab open so you can re-copy the code if need be).

Squarespace section

1) In your Squarespace admin site, navigate to your store page.

2) Find the product which matches the product you created in Shopify, click the 3 dots (settings) and click β€œEdit”.

3) Under the β€œDetails” section and click on the β€œAdditional Info” option.

4) Add a code block to the page and paste the code from Shopify.

5) Click the β€œApply” button and then click the β€œSave” button.

Optional

You’ll notice that after you click β€œSave” your product will have 2 buy buttons. If you want to give your users the option to choose whether they pay via Squarespace and your new payment method then you can ignore this part.

However, if you only want to take payments through the new payment method, then copy and paste the code below into the CSS editor under the Design settings.

The code will remove the "Product Variants", "Quantity" and "Add to Cart" options from all products on your Squarespace store.

/*Removes Squarespace "Product Variants", "Quantity" and "Add to Cart" button*/
.product-variants,
.product-quantity-input,
.sqs-add-to-cart-button-wrapper{
  display:none !important;
}

Here is a list of the payment processors that are supported by Shopify and SendOwl (Updated 2019):

 
  • 2Checkout

  • Adyen

  • Affirm

  • Afterpay

  • Alipay Global

  • Asiabill

  • Authorize.net

  • Bambora

  • Bancontact via Mollie

  • BitPay

  • CartΓ£o de CrΓ©dito e Boleto via EBANX

  • CartΓ£o de CrΓ©dito em atΓ© 12x via EBANX

  • Chase Paymentech (Orbital)

  • Checkout.com

  • Coinbase Commerce

  • ComproPago - Efectivo(Oxxo, 7Eleven,..), SPEI, Criptomonedas

  • Credit Card Payments Powered by PayTabs

  • CyberSource

  • Divido

  • EBANX Payments in Latin America

  • Elavon Converge

  • ePay / Payment Solutions

  • eWAY Rapid 3.1

  • First Data Payeezy

  • G2A Pay

  • GoCoin

  • HiTRUST

  • IATS Payments

  • iDEAL via Mollie

  • Ignite Payments

  • Kash Direct Debit

  • KNPay

  • Laybuy

  • Mercado Pago

  • Mondido Payments

  • Moneris

  • MultiSafepay

  • MyFatoorah

  • Ogone DirectLink

  • PagBrasil

  • PagSeguro

  • PayBright

  • PayDollar

  • PayFort

  • Payment Express PxPay

  • PaymentExpress

  • PAYMILL

  • PayPal Express Checkout

  • PayPal Payflow Pro

  • Paysafe

  • Paystation

  • PayU Latam

  • Pin Payments

  • PinwheelPay

  • POLi Internet Banking

  • Psigate

  • PUT IT ON LAY-BUY

  • QuickPay

  • Realex Payments (Offsite)

  • Sage Payment Solutions

  • SecurePay (Australia)

  • Sezzle

  • Shopify Payments

  • Skrill

  • SOFORT Banking (DIRECTebanking)

  • Stripe

  • Tap

  • Vantiv Integrated Payments

  • WorldPay (Direct)

  • WorldPay (Offsite)

  • Zip

 

Previous
Previous

Building a home office, a stone’s throw from your doorstep

Next
Next

How to add a Google Drive folder to your Mac Finder's favourites sidebar