Disabling #card-button onclick

Using the provided sq-cardpay.js and the sq-payment-flow.js files, what is the recommended method (how and where) for disabling the #card-button after it is clicked, to prevent double payments?

With our Quickstart here is our recommended example that disables the button on submission. :slightly_smiling_face:

     async function handlePaymentMethodSubmission(event, paymentMethod) {

          try {
            // disable the submit button as we await tokenization and make a payment request.
            cardButton.disabled = true;
            const token = await tokenize(paymentMethod);
            const paymentResults = await createPayment(token);

            console.debug('Payment Success', paymentResults);
          } catch (e) {
            cardButton.disabled = false;

Hiya Bryan,

Two JS files are provided for the Payment API and they are ones I’m using.
Here’s where I picked them up.

I’d like a recommendation for disabling the <button id=“card-button” type=button">Pay element.
As it has been provided using one of the two scripts: sq-card-pay.js or sq-payment-flow.js

There is no inline javascript as your example illustrates.

Thanks for bringing this to the attention. The team will be looking at improving this. We recommend using any simple disable method that waits for a response from the payment request. For example:

function DisableNextButton(btnId) {
    document.getElementById(btnId).disabled = 'true';

For anyone using the PHP Payment API and loading the provided sq-card-pay.js and sq-payment-flow.js files, the #card-button element can be disabled by editing the sq-card-pay.js file, as follows:
try { document.getElementById('card-button').disabled = true; const result = await card.tokenize(); if (result.status === 'OK') { ////and so on
In case of a card error, wrong expiration, whatever, the #card-button element can be enabled again in the sq-payment-flow.js file, as follows:
const data = await response.json();

if (data.errors && data.errors.length > 0) {
document.getElementById(‘card-button’).disabled = false;
///and so on
Very unfortunate that the documentation for this is non-existent. I can only assume that very few people are using the PHP Payment API.