如何在React.js中集成2checkout支付网关

基础准备 #

• 从Verifone后台获取你的商家ID和公钥（沙箱/生产环境分别对应不同密钥）
• 在项目的public/index.html中引入2Pay.js脚本：

  <script src="https://secure.2checkout.com/static/checkout/javascript/direct.min.js"></script>
  

React组件示例代码 #

以下是一个基础的支付表单组件实现：

import { useEffect, useRef } from 'react';

const TwoCheckoutPayment = () => {
  const checkoutFormRef = useRef(null);

  useEffect(() => {
    // 加载对应环境的公钥
    window.TCO.loadPubKey('sandbox'); // 生产环境替换为 'production'

    const handlePaymentSubmit = (e) => {
      e.preventDefault();

      // 组装支付所需参数
      const paymentPayload = {
        sellerId: '你的商家ID',
        publishableKey: '你的公钥',
        ccNo: document.getElementById('card-number').value,
        cvv: document.getElementById('card-cvv').value,
        expMonth: document.getElementById('exp-month').value,
        expYear: document.getElementById('exp-year').value,
        billingAddr: {
          name: '用户姓名',
          addrLine1: '收货地址',
          city: '城市',
          state: '省份/州',
          zipCode: '邮编',
          country: '国家代码（如US/CN）',
          email: '用户邮箱',
          phoneNumber: '用户手机号'
        }
      };

      // 请求支付Token
      window.TCO.requestToken(paymentPayload, (response) => {
        if (response.responseCode === '200') {
          // Token获取成功，将其发送到后端完成最终扣款
          console.log('支付Token:', response.token);
          // 此处调用你的后端API，传入Token执行扣款逻辑
        } else {
          // 处理支付错误
          console.error('支付失败:', response.errorMsg);
        }
      });
    };

    // 绑定表单提交事件
    if (checkoutFormRef.current) {
      checkoutFormRef.current.addEventListener('submit', handlePaymentSubmit);
    }

    // 组件卸载时移除事件监听
    return () => {
      if (checkoutFormRef.current) {
        checkoutFormRef.current.removeEventListener('submit', handlePaymentSubmit);
      }
    };
  }, []);

  return (
    <form ref={checkoutFormRef} className="payment-form">
      <div className="form-group">
        <label>银行卡号</label>
        <input type="text" id="card-number" placeholder="4111 1111 1111 1111" required />
      </div>
      <div className="form-group">
        <label>CVV码</label>
        <input type="text" id="card-cvv" placeholder="123" required />
      </div>
      <div className="form-group">
        <label>有效期（月）</label>
        <input type="text" id="exp-month" placeholder="12" required />
      </div>
      <div className="form-group">
        <label>有效期（年）</label>
        <input type="text" id="exp-year" placeholder="2025" required />
      </div>
      <button type="submit" className="pay-btn">完成支付</button>
    </form>
  );
};

export default TwoCheckoutPayment;

关键注意事项 #

• 环境区分：沙箱测试时使用sandbox公钥，正式上线切换为production公钥，避免混淆
• PCI合规：卡号等敏感信息由2Pay.js直接加密传输，不会经过你的服务器，确保合规
• 后端配合：前端仅能获取支付Token，必须通过后端调用2Checkout的服务器端API完成扣款（需使用商家私钥）
• 错误处理：根据返回的responseCode和errorMsg处理各类异常，如卡号无效、过期、金额超限等

内容的提问来源于stack exchange，提问作者Zelal Hossain