How do I prevent react from reloading page when form is submitted

Question

I can't figure out why event.preventDefault() isn't working in my chargeCardNow function.

The page is refreshing when the button in the form is clicked. Am I missing something obvious?

  chargeCardNow = (event, tickets) => {
    event.preventDefault();
    if (this.props.purchaseErrorsExist(tickets)) {return}  
    this.props.clearMessage()
    this.toggleDisablePurchaseButton()
    let message = "Checking for tickets. Please Wait..."
    this.props.updateMessage(message)
    this.getClientSecret() 
  };

      <form>

        <input type="email" placeholder="Email Address" 
          required
          value={this.props.purchaserEmail}
          disabled = {this.isUserLoggedIn()}
          onChange={event => this.props.changeEmail(event)}
          className={'match-stripe'}
        />

        <CardElement/>

        <button onSubmit={(e) => this.chargeCardNow(e, this.props.tickets)}>
            {`Purchase Tickets`}
        </button>
  
     </form>