Javascript 条带付款表单未显示在React中

我正在为一个项目构建一个React应用程序，我正在尝试将Stripe合并到其中，以便接受用户帐户余额的付款。当我单击按钮并显示支付组件的url时，不会显示支付组件。我怀疑这和我的路线有关。应用程序代码如下：

    import React, { Component } from 'react';
    import { Switch, Route, Redirect, withRouter } from "react-router-dom";
    //import { loadStripe } from "@stripe/stripe-js";
    import { connect } from 'react-redux'
    import { loggedIn } from "./actions/currentAccount.js"
    import { Elements, StripeProvider } from "react-stripe-elements";
    import PaymentNew from './components/PaymentNew'
    import AccountContainer from './containers/AccountContainer'
    import Navbar from './components/Navbar'
    import DepartmentsContainer from './containers/DepartmentsContainer'
    import Login from './components/registrations/Login'
    import Signup from './components/registrations/Signup'


    class App extends Component {

      componentDidMount() {
        if (localStorage.getItem("loggedIn")) {
          loggedIn(this.props.history);
        }
      }

      render() {

            //const stripe = loadStripe('pk_test_tZpOKpVsO8ccsjSLbrnuwwEH');
            const currentAccount = localStorage.getItem("loggedIn");
            console.log('current account is: ' + JSON.stringify(this.props.loginFormReducer));
    
        return (
          <div className="App">
                <h2>{ currentAccount ? 
            `Logged in as ${this.props.loginFormReducer.attributes.name}` :
            "Not logged in" }</h2> 
            <Switch>   
              <Route exact path='/api/v1/login' render={props => ( <Login {...props}/>)}/>
              <Route exact path='/api/v1/signup' render={props => ( <Signup {...props}/>)}/>
              <Redirect from="/logout" to="api/v1/login" />
              <Route exact path='/accounts/:id' render={props => {
                return <AccountContainer {...props} account={currentAccount}/>
              } }/>
              <Route exact path='/accounts/:id/departments' render={props => {
                return <DepartmentsContainer/>
              } }/>
              <Route path='/accounts/:id/payments/new' render={props => {
                <StripeProvider apiKey="pk_test_tZpOKpVsO8ccsjSLbrnuwwEH">
                  <Elements>
                    <PaymentNew {...props}/>
                  </Elements>
                </StripeProvider>
              }} />
            </Switch>
             { currentAccount ? <Navbar account={currentAccount}/> : null } 
        </div>
        );
      }
    }

    const mapStateToProps = state => { //what portion of state to provide to props 
      return { //executed with each change to the store. 
        ...state
      };
    }

    export default withRouter(connect(mapStateToProps, { loggedIn })(App)); // specifies 
    component to provide data to. ```

Routing is as follows:
Routes.rb

有关此文件中可用DSL的详细信息，请参阅

---

您将需要一层一层地分解这些内容，并确定是什么导致React组件无法渲染。不清楚您“缺少”了哪些组件。你能添加显示缺失内容的截图吗

您可以尝试的一件事是将

移动到路由器

外部，使其持久化

简化组件树。找出它失败的地方

Rails.application.routes.draw do

#root 'api/v1/login'
post 'api/v1/login',    to: 'api/v1/sessions#create'
delete 'api/v1/logout',   to: 'api/v1/sessions#destroy'
post 'api/v1/signup' => 'api/v1/accounts#create'
get 'api/v1/logged_in' => 'api/v1/sessions#is_logged_in?'

 namespace :api do
    namespace :v1 do 
    resources :accounts do 
        resources :departments 
        resources :payments
    end
  end
 end

end

The Payment form:

import React from 'react'
import { useState } from 'react';
import { withRouter } from "react-router-dom";
import { connect } from "react-redux";
import {injectStripe} from 'react-stripe-elements';
import { newPayment } from "../actions/currentPayments";


const PaymentNew = (props) => {

  const [form, setForm] = useState({
    amount: ''
  });

  console.log(this.props)

  //const accountId = this.props

  const handlePaymentFormChange = (event, target) => {
     setForm({
      ...form,
     [target]: event.target.value, 
    });
  }


  const handlePaymentFormSubmit = (event, accountId) => {
       event.preventDefault()
       newPayment(form, accountId)
  }

  return (
       <div className="NewPayment">
        <h1>New Payment</h1>
        <form onSubmit={handlePaymentFormSubmit}>
          <input
            placeholder="amount"
            type="text"
            name="amount"
            autoComplete="on"
            value={form.amount}
            onChange={(event)=> handlePaymentFormChange(event, "amount")}
          /><br/>
          <input
            placeholder="cardnumber"
            type="text"
            name="card number"
            autoComplete="on"
            value={form.cardnumber}
            onChange={(event)=> handlePaymentFormChange(event, "cardnumber")}
           /><br/>
          <input
            placeholder="expiration"
            type="text"
            name="expiration"
            autoComplete="on"
            value={form.expiry}
            onChange={(event)=> handlePaymentFormChange(event, "expiration")}
          /><br/>
          <input
            placeholder="cvc"
            type="text"
            name="cvc"
            autoComplete="on"
            value={form.cvc}
            onChange={(event)=> handlePaymentFormChange(event, "cvc")}
          /><br/>
        <button placeholder="submit" type="submit">
            Make Payment
           </button> 
          <br></br>     
          <br></br>             
          <div>
          </div>
          </form>
          <div>
        </div>
      </div>
  )
}

/*function InjectedCheckoutForm() {
  return (
    <ElementsConsumer>
      {({ stripe, elements }) => (
        <CheckoutForm stripe={stripe} elements={elements} />
      )}
    </ElementsConsumer>
  );
}*/

const mapStateToProps = state => {
   return {
     form: state.form 
  };
};

export default withRouter(connect(mapStateToProps, { newPayment } ), 
injectStripe(PaymentNew));

I have tried to change the route in app from exact path to just path. I have also removed elements and StripeProvider. In both cases the component still does not display and all that I see is the navbar. Any help and suggestions are appreciated.