React Stripe.js实战：构建多支付方式电商平台

孙茹纳

190人浏览 · 2026-05-06 11:02:15

孙茹纳 · 2026-05-06 11:02:15 发布

React Stripe.js实战：构建多支付方式电商平台

【免费下载链接】react-stripe-js React components for Stripe.js and Stripe Elements 项目地址: https://gitcode.com/gh_mirrors/re/react-stripe-js

React Stripe.js是一个强大的库，它为React应用提供了与Stripe.js和Stripe Elements的无缝集成。通过这个工具，开发者可以轻松地在React应用中实现各种支付方式，为电商平台提供灵活多样的支付解决方案。

为什么选择React Stripe.js？

React Stripe.js作为Stripe官方提供的React组件库，具有以下优势：

简化集成流程：提供了直观的React组件，大大降低了Stripe支付功能的集成难度
丰富的支付方式支持：支持信用卡、借记卡以及多种区域性支付方式
响应式设计：内置的支付表单元素自动适应各种屏幕尺寸
安全性保障：所有支付信息直接发送给Stripe，无需经过你的服务器，降低PCI合规负担

快速开始：安装与基础配置

要开始使用React Stripe.js，首先需要安装必要的依赖包：

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

接下来，创建Stripe实例并配置Elements提供者：

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

// 加载Stripe
const stripePromise = loadStripe('your_publishable_key');

// 在应用中使用Elements提供者
function App() {
  return (
    <Elements stripe={stripePromise}>
      <CheckoutForm />
    </Elements>
  );
}

核心组件与Hooks

React Stripe.js提供了一系列核心组件和Hooks，简化支付流程的实现：

Elements组件

<Elements>组件是所有Stripe Elements的容器，它提供了Stripe对象和其他上下文信息。你可以在整个应用中只使用一个Elements组件，或者为不同的支付流程创建多个实例。

useStripe和useElements Hooks

这两个Hooks是React Stripe.js的核心，允许你在函数组件中访问Stripe对象和Elements实例：

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

function CheckoutForm() {
  const stripe = useStripe();
  const elements = useElements();
  
  // 使用stripe和elements对象处理支付
  // ...
}

实现多种支付方式

React Stripe.js支持多种支付方式，满足不同地区和用户的需求。以下是几种常见支付方式的实现方法：

1. 信用卡支付

信用卡支付是全球最常用的在线支付方式。使用CardElement组件可以快速实现一个功能完善的信用卡表单：

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

function CreditCardForm() {
  return (
    <div>
      <label>
        信用卡信息
        <CardElement options={/* 自定义样式选项 */} />
      </label>
      {/* 支付按钮和其他表单元素 */}
    </div>
  );
}

你还可以使用拆分式卡片元素，将卡号、过期日期和CVC分开显示，提供更清晰的用户体验，如examples/class-components/2-Split-Card.js中的实现。

2. 区域性支付方式

React Stripe.js支持多种区域性支付方式，让你的电商平台能够更好地服务全球用户：

iDEAL：荷兰流行的银行转账方式，实现方式可参考examples/class-components/5-iDEAL.js
EPS：奥地利的在线银行转账系统，实现方式可参考examples/class-components/8-EPS.js
P24：波兰的在线支付系统，实现方式可参考examples/class-components/7-P24.js
SEPA Direct Debit：适用于欧元区的直接借记方式，使用IBAN账户，实现方式可参考examples/class-components/4-IBAN.js

3. 支付请求按钮

支付请求按钮（如Apple Pay和Google Pay）提供了快速结账体验，让用户可以使用设备上保存的支付信息进行支付：

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

function PaymentRequestButton() {
  // 创建支付请求对象
  const paymentRequest = stripe.paymentRequest({
    currency: 'usd',
    total: {
      label: '订单总额',
      amount: 1000, // 以分为单位
    },
    // 其他支付请求选项
  });
  
  return (
    <PaymentRequestButtonElement
      options={{ paymentRequest }}
    />
  );
}

更详细的实现可以参考examples/class-components/3-Payment-Request-Button.js。

处理支付流程

使用React Stripe.js处理支付的基本流程如下：

创建支付方式（PaymentMethod）
确认支付
处理支付结果

以下是一个基本的支付处理函数示例：

const handleSubmit = async (event) => {
  event.preventDefault();
  
  if (!stripe || !elements) {
    // Stripe.js尚未加载完成
    return;
  }
  
  // 获取卡片元素
  const cardElement = elements.getElement(CardElement);
  
  // 创建支付方式
  const { error, paymentMethod } = await stripe.createPaymentMethod({
    type: 'card',
    card: cardElement,
  });
  
  if (error) {
    // 处理错误
    console.error(error.message);
  } else {
    // 支付方式创建成功，发送paymentMethod.id到你的服务器
    console.log('PaymentMethod创建成功:', paymentMethod.id);
    // 调用服务器端API确认支付
    // ...
  }
};

自定义支付表单样式

React Stripe.js允许你自定义支付表单元素的样式，使其与你的应用设计保持一致。你可以通过options属性设置样式：

<CardElement
  options={{
    style: {
      base: {
        fontSize: '16px',
        color: '#424770',
        '::placeholder': {
          color: '#aab7c4',
        },
      },
      invalid: {
        color: '#9e2146',
      },
    },
  }}
/>

更多样式定制选项可以参考Stripe官方文档。