Accept Credit Card Payments via JavaScript

Question

I have a Square Account. I also have a web page. On this web page, I'm collecting credit card details (name, number, expiration date, cvv). I want to charge the user an amount against the credit card details they've provided. I thought that Square had an API that allowed this. However, I don't see it. It looks like everything has to be done on the server.

Isn't there a way to securely do this from JavaScript purely on the client-side? It seems riskier to send details over the internet to a server, just to pass that information onto Square.

At this time, I have the following:

var creditCardNumber = '....';
var credidCardHolderName = 'Joe Smith';
var creditCardExpiration = '10/2020';
var creditCardCvv = '...';

var purchaseAmount = 50.50;

Is there a way to charge the purchaseAmount against the user's credit card using JavaScript on the client-side via Square? If so, how?

Thank you

Answer 1

Unfortunately, I am unable to find the specific documentation you would need to do this. It appears you need to log into the developer portal using your account credentials. If you are unable to find the documentation you need then you should reach out to Square support. That being said, I can give you some basic guidance.

1. DO NOT store any credit card information in your website. Do not store in javascript variables, send to your sever, or store them in any database. There is specific code Square will have you use that keeps that data secure and ensures it only ever is shared with Square.

2. Try digging around in the documentation of the product you're trying to use. What you are trying to accomplish should be found in some kind of "Setup" or "Get Started" type documentation that will be prominently displayed.

Answer 2

To process the payment you probably need to send some API credentials which wouldn't be safe to show on your frontend. That's why you may need some backend for that.

And of course you would allow customer to change the payment amount, which usually isn't OK.

Square documentation has got few nice diagrams and images showing how their API works and how to understand integrating it, e.g.

Take a look at "Get started" guide on their website, especially how it works.

Answer 3

You can't cut your own server out of the equation entirely. That would mean you would never get to know about the order. Money would just appear in your account.

You shouldn't be collecting credit card information though. Look at the Square Documentation for online transactions.

As part of the process, the user is redirected to Square's website where the credit card information is collected. You never need to send the credit card details to your server.

1. Merchant - Create a POST request: . Package the order information as a JSON message. NOTE: Currently, Square Checkout cannot calculate shipping costs or taxes dynamically, those totals must be provided in the POST request as line items in the order.
   2. Add an authorization token to the header.
2. Merchant - Send the generated POST request to Square Checkout and process the response:
   1. Save the returned checkout ID.
   2. Automatically redirect the customer to the returned Checkout page URL.
3. Customer - Provide payment details using the Square Checkout UI.
4. Square Checkout - Process the transaction and sends email confirmation to merchant and customer.
5. Merchant - Verify the transaction results.