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

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.