Square Web Payments SDK & ACH - by Knowcode

This is for embedding the Square Card Payment form into your Bubble pages. Similar to Stripe card payments in Bubble.

Payment card details are tokenized - you create a card on file at Square. ie no card details are stored within Bubble - Square give you a token that you store in Bubble. (via actions in your workflows). Then you can use the Square API with this payment token, as if it was the card details, eg take payments.

This is so you do not have to navigate out of your Bubble app to a Square payment page. The user experience stays within your Bubble app.

Service page
https://square-payments-plugin.bubbleapps.io/version-test

Plugin page
https://bubble.io/plugin/square-payments-embedded-web-sdk-1654618927193x637538826809245700

It seems to work well responsively, both old and new responsive engine. :slight_smile:

The Square Web Payments SDK is a JavaScript browser-client SDK that provides a secure payment-card entry method, along with other secure payment methods. You can read about that here Web Payments SDK Overview

I built it because some Clients have payment infrastructure with Square, eg Point of Sale, and Inventory management, so they want to use Square, not Stripe, and didn’t want Users to be bounced out of the App to an external payment page.

There is nothing wrong with Stripe :slight_smile: - Stripe is very well integrated to Bubble - this is for people who need to use Square Payments within Bubble.

I’m happy to extend the functionality - get in touch. My initial use case was for Card-on-file for invoiced subscriptions so that inventory management would work nicely.

Cheers
@lindsay_knowcode

4 Likes

This is great @lindsay_knowcode - if my memory serves me, the Square SDK & API is extremely fiddly so this will have been no small task. To check, if someone uses Square POS could they extend their account to use Square for online payments as a Stripe alternative?

3 Likes

Yes very very fiddly, just about drove me mad. :slight_smile: Many hours mining the forum for gold nuggets.

You could always use Square previously if you were happy to bounce the user out of your Bubble app to an external Square payment page. But this is if:

  • you want to use Square, not Stripe - probably because you already use Square POS.
  • you want the checkout inside your Bubble app (like we all do with Stripe right now)
3 Likes

We’ve released a similar plugin to complement our other Square plugins, it’s definitely been tricky to get set up in Bubble, good job!

Phill

New release now supports Square ACH payments and ACH bank transfers. (very similar to Stripe ACH)

Hi, I am seeking to create a market place app that will be operating in South Africa, can Square processes subscriptions using South African bank accounts?

ACH is just for US payments. Do you mean Payshap? I can’t see any news about Square support Payshap or any ACH equivalent in SA.

Hi There, do you know if there are any Payment Gateways that can be used for South African Applications?

I’m not expert on SA payments - doesn’t look like Stripe & Square support SA :upside_down_face:

FWIW
https://portmoni.com/best-payment-gateway-south-africa/
https://thepaypers.com/payment-service-providers/south-africa/25

Thank you so much for all the help and advice- I really appreciate it.

1 Like

@lindsay_knowcode

I have a marketplace use case where I want vendors to import their square products and then allow users to checkout through our site but have it all processed through square using the iframe cc form approach.

Is your plugin setup to handle this if I have the vendor provide us their location ID?

Thanks,
Adam

I believe so - the plugin gives you the Iframe approach. Do you mean you have only the location ID, and no other credentials? I don’t think that is enough to process payments from Bubble.

More than just providing the location Id, you need to provide the application ID and an API token. These are all part of the requirements for the Square SDK to process payments.

1 Like

Thanks for the response. Sounds like if I have our vendors enter their Location ID, Application ID, and API token inside their settings are we can use that to process the payments?

Do you know if there is any sort of oAuth approach to handle this?

Side note: I’m also looking at using the Square API to allow vendors to import their products into our store vs. manually entering them.

I guess you are trying to make a SaaS app in Bubble with one Bubble app supporting multiple of your clients, each of your clients with their own Square credentials?

As is - my plugin won’t work to do this - I’d need to make the application Id and the location Id configurable as a Element variable not Plugin - that’s very possible - small change. And probably a reasonable idea anyway.

Regards running the Square API with Oauth authentication - it is definitely possible and probably just with the API connector. :thinking: :thinking: :thinking: This would be the smart way to do it.

So yes I think it would be possible.

If you are using this plugin for ACH payments - you will need to update the plugin before the 24th June 2024. Square has new additional required fields that need to be submitted - you don’t need to change anything in your app other than update the plugin.

You can see a warning in the Browser javascript console advising this - the fix is simply to update the plugin. :slight_smile: