Disabling #card-button onclick

Questions
1

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?

2

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

     async function handlePaymentMethodSubmission(event, paymentMethod) {
          event.preventDefault();

          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);
            displayPaymentResults('SUCCESS');

            console.debug('Payment Success', paymentResults);
          } catch (e) {
            cardButton.disabled = false;
            displayPaymentResults('FAILURE');
            console.error(e.message);
          }
        }
3

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.

4

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';
}
5

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.