Design Setup for SaaS application that accepts payments using Square

I am investigating payment service options for a new SaaS application we are building. In the process, we would like to build a proof-of-concept app that uses Square to process payments.

Is there a succinct document I can read to help determine what my payment loop component diagram should contain, specific to Square requirements? Our SaaS product will have three subscription SKUs and everything needs to be accomplished online. There will be no POS hardware used, and no in-person transactions. Phase one is web site, phase 2 will be phone application rollout. Finally, we need to adhere to our branding guide in everything the customer sees. So, the best approach for us will be where we provide as much of the user interface as possible while adhering to best practice privacy and security policies while handling payments.

I guess the summary question is: “What call flow do we use, and what components to we implement to process Square payments on a web site?”

As an aside, we are building the site from the ground up. CMS systems such as WordPress will not be in the recipe.

Any guidance you might offer will be greatly appreciated.

:wave: Welcome, if your building your site from the ground up you can definitely integrate with our Web Payments SDK which has the form fields that your customer uses to enter their card information. You can add these form fields to your custom site and use our style guide so you can adhere to your branding guide. :slightly_smiling_face:


If I understand the flow, it’s create an App identity (access) token, give it to a client-side JS method that displays a form in frame, the user fills in the details, the JS method makes REST calls to your service which returns a payment token (JWT?) with claims so we can record save the payment information in our database. e.g., keep our own payment history for our customers. Do I have that correct?

This is going to sound weird, but we want to avoid JavaScript to the extent possible. Is there a REST API that we can use to accomplish the same task? I understand we would need to craft the form.

Yep, you have it correct! Currently you’ll need to use the client side JS to tokenize the card. There isn’t any REST APIs that accept raw card data. You can use the Cards API to store the cards on file if your going to be charging them in the future however you’ll still need to use the client side JS to tokenize the card when first saving it on file. :slightly_smiling_face: