Component details and process for CreditCardSubmitButton about react-square-payment-form

[siakaramalegos]

For example, I can't submit the customer details for SCA until I have first validated those inputs, but I can't do that before they click the CreditCardSubmitButton.

[maxbeatty]

You can create your own submit button and leverage ContextConsumer (another undocumented component) similar to how CreditCardSubmitButton works:

class MySubmitButton extends React.Component {
  handleSubmit = createNonce => evt => {
    evt.preventDefault();

    console.log("validate inputs");

    createNonce(evt);
  };

  render() {
    return (
      <ContextConsumer>
        {context => (
          <button
            className="sq-creditcard"
            onClick={this.handleSubmit(context.onCreateNonce)}
          >
            Pay
          </button>
        )}
      </ContextConsumer>
    );
  }
}

Here's an example form using that custom component: https://codesandbox.io/s/react-square-payment-form-starter-41-4cbpn

You'll also notice that styles.css in that sandbox customizes the label style using .sq-label class.

Hope this helps!

[siakaramalegos]

Oh thanks! I'll definitely try this out.

[siakaramalegos]

Unless I'm misunderstanding, there's no way to do this with an uncontrolled form, right @maxbeatty? I'd prefer not to do controlled inputs and a button click handler, and instead grab form data and use a <form> onSubmit. Regardless, your solution still helps me a lot. Thanks!

[maxbeatty]

As long as your component that consumes the context is nested in SquarePaymentForm, you should be able to attach to any event handler. Pseudo-code:

<SquarePaymentForm>
    <MyForm onSubmit={/* call context.onCreateNonce */} >
      <MyCustomerInfo />

      <CreditCardNumberInput />

       <button type="submit">Pay</button>
    </MyForm>
</SquarePaymentForm>

[siakaramalegos]

Thanks for all your help @maxbeatty ! I got this to work, but I'll have to figure out something more creative for the times that the dollar amount is $0. If I put the conditional around the element, the context gets lost and can't find the form. Is there a way to make the inputs smart enough that when the dollar amount is zero, they don't show up?

[maxbeatty]

Hmm I'm not sure of the best way to handle $0 charges but maybe someone in the community Slack can help https://squ.re/2Hks3YE

[siakaramalegos]

Thanks for pointing me to the slack group! Turns out I might be able to do this with display: none, though it does give a lot of warnings

ElementNotVisibleError: SqPaymentForm element with id 'sq-payment-form-sq-card-number' is not visible. Does it or a parent element have 'display:none'?