Component details and process for CreditCardSubmitButton

[siakaramalegos]

Component Details

I was trying to understand how to customize the <CreditCardSubmitButton> component, but it's not on the Component list in your docs. I just found it by manually going to the URL https://square.github.io/react-square-payment-form/docs/components/CreditCardSubmitButton. So perhaps add the link to the left-hand menu?

Process Flow

The process flow using this component library is significantly different to the regular web flow from the payment form library. I'd like to not call the verification until I first do validation on other customer inputs, but clicking the button immediately calls for the nonce. Additionally, the button is required, and I can't instead just call a function similar to form.requestCardNonce() in the web payment form library. I'd prefer not to have a multi-step form, and to just submit all data at once.

This is a separate, question, but any way to add a styled <span> into the labels so I can style it like our other inputs with required fields?

[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'?