July 27, 2022
1 minute

Plugin - Square Embedded Payment (Square Web Payments SDK)

I created a plugin for embedding the Square Card Payment form into your Bubble pages. Similar to how Stripe card payments in Bubble work.  Previously there were no options in Bubble other than to bounce your Bubble users out to an external Square payment page.

It's an interesting problem taking an SDK and fitting it into Bubble. Bubble does not "think" like a normal web app. When working within Bubble, it's a joy. Productivity wise you can achieve things magnitudes quicker than traditional development .... until you need to do custom coding in Bubble. As soon as you are writing javascript in Bubble things get sloooow. After working in Bubble it is very painful to be reminded of how slow and costly traditional development is.

So I took all that code I wrote and made it into a plugin.

With PCI compliance card details can't be stored (in a database, in log files) in a non PCI compliant environment. Bubble isn't PCI compliant but Stripe, Square and others have an architecture of card tokenisation that sidesteps any card storage issues.

Payment card details are tokenised - 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.

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 https://developer.squareup.com/docs/web-payments/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.

Service page

Plugin page