推荐使用：React Stripe Checkout Component - 简化支付流程的利器

import React from 'react';
import StripeCheckout from 'react-stripe-checkout';
import { useHistory } from 'react-router-dom';
 
const StripeCheckoutButton = ({ price }) => {
  const history = useHistory();
 
  const handleToken = (token) => {
    console.log(token);
    alert('Payment Successful!');
    history.push('/user/profile');
  };
 
  return (
    <StripeCheckout
      label='Pay Now'
      name='Custom Name'
      billingAddress
      shippingAddress
      image='https://stripe.com/img/documentation/checkout/marketplace.png'
      description={`Your Order for $${price}`}
      panelLabel='Pay Now'
      amount={price * 100} // Convert to cents
      token={handleToken}
      stripeKey={process.env.REACT_APP_STRIPE_KEY}
    />
  );
};
 
export default StripeCheckoutButton;

这段代码示例展示了如何在React应用中集成Stripe Checkout组件，简化了支付流程。代码中使用了react-stripe-checkout库，并通过StripeCheckout组件提供了一个按钮，用户可以点击此按钮进行支付。支付成功后，会弹出提示，并且用户会被重定向到个人资料页面。这个例子很好地展示了如何将Stripe集成到React应用中，并处理支付流程。