React集成react-square-web-payments-sdk：添加持卡人姓名与设置扣款金额

1. 移除邮编字段 #

直接给CreditCard组件添加postalCode={false}属性即可隐藏邮编输入框：

<CreditCard postalCode={false} />

2. 添加持卡人姓名字段 #

Square的CreditCard组件本身不自带姓名字段，需要手动添加自定义输入框，并在支付请求中传入持卡人姓名：

• 先在组件中添加姓名输入框并绑定状态：

const [cardholderName, setCardholderName] = useState('');

// 渲染部分
<input
  type="text"
  placeholder="持卡人姓名"
  value={cardholderName}
  onChange={(e) => setCardholderName(e.target.value)}
  required
/>

• 在支付提交时，将姓名传入createPayment参数：

const handleSubmit = async (event) => {
  event.preventDefault();
  try {
    const paymentResult = await createPayment({
      cardholderName, // 传入持卡人姓名
      sourceId: event.target.paymentMethodId.value,
      idempotencyKey: crypto.randomUUID(),
      amountMoney: {
        amount: 100, // 金额单位为分（示例为1美元）
        currency: 'USD'
      }
    });
    // 处理支付成功逻辑
    console.log('支付成功:', paymentResult);
  } catch (error) {
    // 处理支付失败逻辑
    console.error('支付失败:', error);
  }
};

3. 设置扣款金额 #

扣款金额通过createPayment方法中的amountMoney对象配置：

• amount：必须是整数，代表分（比如要扣10美元，就写1000）
• currency：货币代码，比如USD、CNY（需匹配你的Square账号支持的货币类型）

如果是从用户输入获取金额，记得做单位转换：

// 假设用户输入10.50美元，转换为分
const userInputAmount = 10.50;
const amountInCents = Math.round(userInputAmount * 100); // 得到1050

完整示例组件代码 #

import React, { useState } from 'react';
import {
  PaymentForm,
  CreditCard,
  createPayment,
} from 'react-square-web-payments-sdk';

const PaymentComponent = () => {
  const [cardholderName, setCardholderName] = useState('');

  const handleSubmit = async (event) => {
    event.preventDefault();
    if (!cardholderName.trim()) {
      alert('请输入持卡人姓名');
      return;
    }

    try {
      const paymentResult = await createPayment({
        cardholderName,
        sourceId: event.target.paymentMethodId.value,
        idempotencyKey: crypto.randomUUID(),
        amountMoney: {
          amount: 1500, // 15美元，单位分
          currency: 'USD'
        }
      });
      console.log('支付成功:', paymentResult);
      // 这里可添加支付成功后的跳转或提示逻辑
    } catch (error) {
      console.error('支付失败:', error);
      alert(`支付失败: ${error.message}`);
    }
  };

  return (
    <PaymentForm
      applicationId="你的Square应用ID"
      locationId="你的Square位置ID"
      onSubmit={handleSubmit}
    >
      <div>
        <label>持卡人姓名</label>
        <input
          type="text"
          value={cardholderName}
          onChange={(e) => setCardholderName(e.target.value)}
          placeholder="请输入持卡人姓名"
          required
        />
      </div>
      <CreditCard postalCode={false} />
      <button type="submit">确认支付</button>
    </PaymentForm>
  );
};

export default PaymentComponent;

额外注意事项 #

• 确保你的Square账号已开通支付权限，且应用ID、位置ID配置正确
• idempotencyKey用于防止重复提交，建议用UUID生成
• 持卡人姓名会用于银行卡信息验证，需确保输入格式正确

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