如何使用React路由器应用程序访问Stripe.js元素？

npm install react-router-dom

import { Elements } from '@stripe/react-stripe-js';
import { loadStripe } from '@stripe/stripe-js';

const stripePromise = loadStripe('YOUR_STRIPE_PUBLISHABLE_KEY');

function App() {
  return (
    <Elements stripe={stripePromise}>
      {/* 其他组件和路由 */}
    </Elements>
  );
}

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import HomePage from './HomePage';
import PaymentPage from './PaymentPage';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route exact path="/payment" component={PaymentPage} />
      </Switch>
    </Router>
  );
}

import { useStripe, useElements, CardElement } from '@stripe/react-stripe-js';

function PaymentPage() {
  const stripe = useStripe();
  const elements = useElements();

  const handleSubmit = async (event) => {
    event.preventDefault();

    if (!stripe || !elements) {
      // Stripe尚未加载完全，或者未正确配置
      return;
    }

    // 处理支付逻辑
  };

  return (
    <form onSubmit={handleSubmit}>
      <CardElement />
      <button type="submit" disabled={!stripe}>
        Pay
      </button>
    </form>
  );
}