@stripe/stripe-react-native有效期年份与邮政编码校验异常问题

一、有效期年份上限校验缺失问题 #

Stripe CardField默认仅校验年份不早于当前年份，但未限制年份上限（Stripe后台通常只接受未来20年内的有效期，不同卡组织规则略有差异），导致输入过远期年份时前端显示校验通过，但支付请求被后台驳回。

解决方法：手动补充年份上限校验 #

在onCardChange回调中，自行判断年份是否超出合理范围，提前拦截无效输入：

import { useState } from 'react';

// 初始化状态
const [cardData, setCardData] = useState({});
const [isExpiryValid, setIsExpiryValid] = useState(true);
const [expiryError, setExpiryError] = useState('');

const currentFullYear = new Date().getFullYear();
const MAX_EXPIRY_YEAR_OFFSET = 20; // 允许的最大有效期年限，可按需调整
const maxAllowedFullYear = currentFullYear + MAX_EXPIRY_YEAR_OFFSET;

const handleCardChange = (info) => {
  setCardData(info);
  let isValid = info.validExpiryDate === 'Valid';
  let errorMsg = '';

  if (isValid) {
    // 将两位年份转为完整四位年份（比如85 → 2085）
    const inputFullYear = info.expiryYear < 100 ? 2000 + info.expiryYear : info.expiryYear;
    if (inputFullYear > maxAllowedFullYear) {
      isValid = false;
      errorMsg = `有效期年份不能超过${maxAllowedFullYear.toString().slice(-2)}（即${maxAllowedFullYear}年）`;
    }
  }

  setIsExpiryValid(isValid);
  setExpiryError(errorMsg);
};

UI层提示错误 #

在CardField下方添加错误提示：

<CardField
  postalCodeEnabled
  placeholder={{
    number: CLAUSE.CARD_NUMBER,
  }}
  cardStyle={styles.cardStyle}
  style={styles.containerStyle}
  onCardChange={handleCardChange}
/>
{!isExpiryValid && <Text style={{ color: 'red', marginTop: 8 }}>{expiryError}</Text>}

二、邮政编码无长度限制问题 #

CardField开启postalCodeEnabled仅显示输入框，默认不做长度/格式校验（因不同国家邮编规则差异大），需根据业务目标地区自行添加校验逻辑。

解决方法：添加自定义邮编校验 #

以美国5位数字邮编为例，在onCardChange中补充校验：

// 新增状态
const [isPostalValid, setIsPostalValid] = useState(true);
const [postalError, setPostalError] = useState('');

const handleCardChange = (info) => {
  // ... 保留之前的有效期校验逻辑

  // 邮编校验（美国5位规则）
  let postalValid = true;
  let postalMsg = '';
  if (info.postalCode) {
    const usPostalRegex = /^\d{5}$/;
    if (!usPostalRegex.test(info.postalCode)) {
      postalValid = false;
      postalMsg = '请输入有效的5位数字邮政编码';
    }
  }

  setIsPostalValid(postalValid);
  setPostalError(postalMsg);
};

UI层提示邮编错误 #

{!isPostalValid && <Text style={{ color: 'red', marginTop: 8 }}>{postalError}</Text>}

关键说明 #

CardField的前端校验仅做基础合法性检查，与Stripe后台校验规则存在差异，必须通过自定义前端校验提前拦截不符合后台规则的输入，避免支付请求失败。

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