thread Re: Transactions API - Generating a "minimal payment form" using JS in Archived Discussions (Read Only)

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

Bakelite — Wed, 18 Apr 2018 06:13:10 GMT

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?

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

Helen — Thu, 19 Apr 2018 23:28:10 GMT

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!

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

Bakelite — Thu, 26 Apr 2018 17:43:54 GMT

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?

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

Helen — Mon, 30 Apr 2018 19:53:10 GMT

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-form-to-your-payment-page

Furthermore, you can show the payment form when needed.