Expose SquarePaymentForm State as Context about react-square-payment-form

[maxbeatty]

The paymentFormLoaded prop will provide that information as you've sorta figured out in your PR.

function PaymentForm() {
  const [formLoaded, setFormLoaded] = React.useState(false)

  return (
    <SqPaymentForm paymentFormLoaded={() => setFormLoaded(true)} >
      <CardInput isReady={formLoaded} />
    </SqPaymentForm>
  )
}

I think there's a loose assumption that your SqPaymentForm component won't be too far away from payment method components like SimpleCard. If that's not the case, I think it's reasonable to expose formLoaded on the context.

[maxbeatty]

SqPaymentForm needs SimpleCard to exist so it can set up the payment method. (Underneath the hood, a div is populated with iframes so Square handles sensitive data, like credit card numbers, instead of you.) You're conditionally rendering the SimpleCard which explains the error- before the payment form is ready, there are no payment methods.

if (isReady) {
    return (
      <React.Fragment>
        <SimpleCard />
        <button onClick={() => context.onCreateNonce()}>{"SAVE CARD"}</button>
      </React.Fragment>
    );
  }
  return "Loading...";

Since SimpleCard is just an empty div to start, you could just conditionally render the button to allow the payment method to exist when initializing.

return (
    <React.Fragment>
      <SimpleCard />
      {isReady ? (
        <button onClick={() => context.onCreateNonce()}>{"SAVE CARD"}</button>
      ) : (
        "Loading..."
      )}
    </React.Fragment>
  );

Another path forward is to use CSS classes to control the display of elements based on state. Hope this helps!

[MStreet3]

Ok, got it! Makes sense.. the div needs to exist to load the iframe, but will just be empty until the iframe is loaded. yup yup, and the sandbox works now. So it's actually the non-null components that need to wait, not the <SimpleCard />.

Thanks a lot for the help.

[MStreet3]

#98

[MStreet3]

Ahh okay thanks. Yea that's reasonable, my eyes missed that prop for sure. Thanks a lot.

[MStreet3]

@maxbeatty I finally got a chance to try this and unfortunately it throws an error for me:

SqPaymentForm initialized without a payment method.

Here's a codesandbox with an implementation. I removed the application id, but once that's replaced the error shows in the console.

https://codesandbox.io/s/nostalgic-firefly-8g4ry?file=/src/App.js