如何在React项目中使用Stripe官方简易结账代码片段？

我帮你把这段纯JS的Stripe结账代码转换成React项目适用的版本，完全满足你只跳转至Stripe结账页、无需自定义表单的需求：

步骤1：安装官方Stripe依赖 #

推荐使用Stripe官方的React包，更符合React项目的开发习惯：

npm install @stripe/stripe-js
# 或者用yarn
yarn add @stripe/stripe-js

步骤2：创建结账按钮组件 #

新建一个StripeCheckoutButton.js组件，代码如下：

import { useState, useEffect } from 'react';
import { loadStripe } from '@stripe/stripe-js';

// 替换成你的Stripe Publishable Key
const stripePromise = loadStripe('pk_live_t5tyutrytutruytyutyufake....');

const StripeCheckoutButton = () => {
  const [stripe, setStripe] = useState(null);
  const [errorMessage, setErrorMessage] = useState('');

  useEffect(() => {
    // 异步加载Stripe实例，避免阻塞页面
    stripePromise.then((stripeInstance) => {
      setStripe(stripeInstance);
    });
  }, []);

  const handleCheckout = async () => {
    if (!stripe) {
      setErrorMessage('Stripe加载中，请稍后重试');
      return;
    }

    try {
      const { error } = await stripe.redirectToCheckout({
        lineItems: [{ price: 'price_1Heree568gerg54rtretrt', quantity: 1 }],
        mode: 'subscription', // 如果是一次性付款，改成'payment'
        successUrl: 'https://myweb.com/success',
        cancelUrl: 'https://myweb.com/canceled',
      });

      // 处理跳转失败的情况（比如网络错误）
      if (error) {
        setErrorMessage(error.message);
      }
    } catch (err) {
      setErrorMessage('结账请求失败，请稍后重试');
    }
  };

  return (
    <div>
      <button
        style={{
          backgroundColor: '#6772E5',
          color: '#FFF',
          padding: '8px 12px',
          border: 0,
          borderRadius: '4px',
          fontSize: '1em',
          cursor: stripe ? 'pointer' : 'not-allowed',
          opacity: stripe ? 1 : 0.7,
        }}
        onClick={handleCheckout}
        disabled={!stripe}
      >
        Checkout
      </button>
      {errorMessage && <div style={{ color: 'red', marginTop: '8px' }}>{errorMessage}</div>}
    </div>
  );
};

export default StripeCheckoutButton;

步骤3：在页面中使用组件 #

在需要添加结账按钮的页面组件中导入并使用：

import StripeCheckoutButton from './StripeCheckoutButton';

const ProductPage = () => {
  return (
    <div>
      <h1>你的产品名称</h1>
      <StripeCheckoutButton />
    </div>
  );
};

export default ProductPage;

关键注意事项 #

• 替换核心参数：记得把代码中的pk_live_...（你的Stripe公钥）、price_1...（你的产品价格ID）、successUrl和cancelUrl替换成你自己的实际值。
• 模式切换：如果你的产品是一次性付款，把mode从subscription改成payment即可。
• 订单履约提醒：和原代码注释的提醒一致，不要依赖successUrl来处理订单履约——用户可能在付款成功后不跳转回来。你需要通过Stripe的Webhooks接收付款成功事件，完成后续的订单处理。

如果你不想使用npm包，也可以在public/index.html中添加Stripe.js脚本：

<script src="https://js.stripe.com/v3"></script>

然后在组件中直接使用window.Stripe，但这种方式不如官方包灵活，也不利于代码维护。

内容的提问来源于stack exchange，提问作者Agustin Barros