onClick doesn't work

[bpitman]

Describe the bug

In the old square form, I managed the click behavior myself. The first thing I did was start a pinwheel to let the user know we're doing something. I've tried using onClick in CreditCard, but it never gets called. So far, all of my attempts to hack the ability to waitch the event have failed. Even using onClick as documented, I never see the function called.

Your Example Website or App

Not public

Steps to Reproduce the Bug or Issue

Follow onClick example here: https://react-square-payments.weareseeed.com/docs/card/props In body, add console.info("Clicked"). Now use the credit card form. You'll never see console log.

Expected behavior

I was expecting to see my function called before any square activity is performed. Instead, I see nothing. So clients now click the pay button and nothing happens until square responds, which can be long enough that users don't understand what's happening.

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Firefox

Additional context

No response

[mattjbrill]

Hi @bpitman.

I don't help maintain this package, so take what I say with a grain of salt.

Some of the documentation is outdated, including that example you linked to. Here's something to help get you going. Be sure to replace the applicationId and locationId with whatever square says your details are. I copied this from another document they have around here somewhere, but I can't recall where I snagged it from.

import React, { useState } from "react";

import { CreditCard, PaymentForm } from 'react-square-web-payments-sdk';

function SquareForm() {
  const [disablePayButton, setDisablePayButton] = useState(true);
  
  return (
         <PaymentForm
             /**
              * Identifies the calling form with a verified application ID generated from
              * the Square Application Dashboard.
              */
             applicationId="your-square-sandbox-id"        
             locationId="your-square-location-id"
             /**
     * Invoked when payment form receives the result of a tokenize generation
     * request. The result will be a valid credit card or wallet token, or an error.
     */
    cardTokenizeResponseReceived={(token, buyer) => {
        console.info({ token, buyer });
      }}
      /**
       * This function enable the Strong Customer Authentication (SCA) flow
       *
       * We strongly recommend use this function to verify the buyer and reduce
       * the chance of fraudulent transactions.
       */
      createVerificationDetails={() => ({
        /* omit amount key if you want to store the card details */
        amount: '1.00',
        /* collected from the buyer */
        billingContact: {
          addressLines: ['123 Main Street', 'Apartment 1'],
          familyName: 'Doe',
          givenName: 'John',
          countryCode: 'GB',
          city: 'London',
        },
        currencyCode: 'GBP',
        intent: 'CHARGE',
      })}
             >
                <CreditCard
                    callbacks={{
                      cardBrandChanged(event) {
                        console.info("cardBrandChanged: ", event);
                        setDisablePayButton(event?.detail?.currentState?.isCompletelyValid);
                      },
                      focusClassAdded(event) {
                        console.info("focusClassAdded: ", event);
                        setDisablePayButton(event?.detail?.currentState?.isCompletelyValid);
                      },
                      errorClassAdded(event) {
                        console.info("errorClassAdded: ", event);
                        setDisablePayButton(event?.detail?.currentState?.isCompletelyValid);
                      },
                      errorClassRemoved(event) {
                        console.info("errorClassRemoved: ", event);
                        setDisablePayButton(event?.detail?.currentState?.isCompletelyValid);
                      },
                      escape(event) {
                        console.info("escape: ", event);
                        setDisablePayButton(event?.detail?.currentState?.isCompletelyValid);
                      },
                      focusClassAdded(event) {
                        console.info("focusClassAdded: ", event);
                        setDisablePayButton(event?.detail?.currentState?.isCompletelyValid);
                      },
                      focusClassRemoved(event) {
                        console.info("focusClassRemoved: ", event);
                        setDisablePayButton(event?.detail?.currentState?.isCompletelyValid);
                      },
                      submit(event) {
                        console.info("submit: ", event);
                      },
                      click(event) {
                        console.info("click: ", event);
                      }
                    }}
                    focus="cardNumber"
                    buttonProps={{
                      isLoading: !disablePayButton,
                    }}
                    onClick={() => {
                      console.log("payment button clicked");
                    }}
                >
                    Submit Payment
                </CreditCard>
          </PaymentForm>
    );
}

export default SquareForm;

Note that the onClick prop has been replaced with callbacks, which creates javascript event listeners. The following code is located here

if (callbacks) {
    for (const callback of Object.keys(callbacks)) {
      card?.addEventListener(callback, callbacks[callback]);
    }
  }

[Grumpier]

I am experiencing the same behavior. How does one do something as simple as add a waiting progress icon after the pay submit? I've tried both the submit and click callbacks and they are never triggered. Nor is the OnClick prop (which I see is still shown in the example above). Is there no one else encountering this problem?

[tud111317]

I've looked for some workarounds on this, but haven't found anything that works well.

1. Using the render() prop to replace the default button with your own, which can then use onClick(). See the example in the docs.

<CreditCard render={(PayButton) => <Button onClick={...}>Pay $10</Button>} />

This, hoever, removes the whole functionality of the payment button.

2. Using onMouseDown() for an outer component

<Container
  onMouseDown={() => {
    console.log("clicked")
  }}
>
  <CreditCard>Pay</CreditCard>

This works reasonably well for this example, but I can't get it to work with useState() to switch to a progress icon.