Transactions API - Generating a "minimal payment form" using JS

We're able to generate and successfully test the sqPaymentForm (outlined here)

But when we try to do the same thing, generating the form dynamically using JS, the Square-hosted sqPaymentForm library doesn't recognize it.

 

Is it possible to get this to work?

1,325 Views
Message 1 of 4
Report
3 REPLIES 3
Alumni

Sorry for the confusion @Bakelite. At this time it's not possible to generate the form dynamically using JS with our payment form. We'll share your request with the API team. Thanks for your post! 

️ Helen
Seller Community Manager

1,303 Views
Message 2 of 4
Report

Helen, thanks for your response.  Actually in thinking through what we're trying to do, it would seem possible with our without support.  Of course I may be misunderstanding something, but here's the logic:

 

Creating the "sqPaymentForm" involves 3 elements, 

1 - An HTML form (the id-"nonce" form) described here 

2 - The "SqPaymentForm library" at https://js.squareup.com/v2/paymentform

3 - The "local SqPaymentForm initialization" library.

 

Correct me if I'm wrong: It shouldn't matter whether #1 is static HTML on the page or was generated by custom JS, as long as the order of things is correct.  I would assume the following order:

a - The form has to be on the page

b - The "SqPaymentForm library" is loaded

c - The "local SqPaymentForm initialization" triggers the Form's contained DIVs to become Inputs embedded in iFrames.

 

Neither steps B or C should care nor even be able to distinguish whether the form was static HTML or JS -generated.  Since my attempts to do the above failed, no doubt I'm overlooking something.

 

The reason we're interested in making this work is twofold: 1) most all the pages we generate are dynamic -- for more control over the UX; 2) We want to be able have the payment process on one page via ajax, not require multiple pages.

 

How can we make this happen?

1,288 Views
Message 3 of 4
Report
Alumni

Hi again @Bakelite. Sorry for the delay. I just checked with our API specialist team who confirmed you won't be able to load the payment form dynamically.

 

They suggested as a possible workaround your count try putting the payment form in a hidden div. It’s a warning in our developer doc: https://docs.connect.squareup.com/payments/sqpaymentform/sqpaymentform-setup#step-2-add-the-html-for...


Furthermore, you can show the payment form when needed.

️ Helen
Seller Community Manager

1,260 Views
Message 4 of 4
Report