Get nonce from Square

Question

I'm building a website. In this website, I need to process credit card payments via Square. My designers have an interesting UI that I want to use. For that reason, the Square Payment Form mentioned in the docs is too limiting for me. Yet, in order to process payments, I need to still get a nonce from Square.

My question is, is there a way to retrieve a nonce from Square without using the SqPaymentForm? If so, how? I don't see any documentation for this. However, the SqPaymentForm is just in a client-side JavaScript library so there should be a way to do it. But, that library is all obfuscated on the client and I don't see the code on the Square GitHub page. I'm hoping I'm just overlooking something.

Is there a way to get a nonce from Square programmatically?

Thank you!

Answer 1

The nonce seems to come from a postMessage to an iframe on https://connect.squareup.com

Code from https://js.squareup.com/v2/paymentform :

(r.prototype.requestCardNonceIfValidForm = function() {
  this.sendIframeMessage({
    eventName: 'requestCardNonceIfValidForm'
  });
}),
...
(r.prototype.sendIframeMessage = function(e) {
  var t = this.env.serviceUrl();
  this.iframeControllers.cardNumber.element.contentWindow.postMessage(e, t);
}),
...
service: 'https://connect.squareup.com'