Next.js集成Stripe调用createPaymentMethod报card参数为null问题

• 最核心的问题是Elements上下文重复嵌套：你的外层StripePaymentForm组件已经包裹了<Elements>标签提供Stripe上下文，但是内层的PaymentForm组件的返回值又套了一层<Elements>。两层独立的Elements上下文相互隔离，你在PaymentForm里调用useElements()拿到的是外层的Elements实例，而卡片元素是渲染在内层Elements下的，外层实例自然找不到对应的元素，返回null。
• 次要优化点：你当前只在提交时判断!stripe || !elements就终止执行，没有禁用提交按钮，可能会出现用户在Stripe初始化完成前点击提交的情况，虽然不会报错但也无法正常执行逻辑。
• 补充的代码小问题：你封装的StripeInput组件里focus方法写的是elementRef.current.focus，漏了调用括号，实际调用时不会触发聚焦。

1. 移除PaymentForm组件中多余的<Elements>嵌套，修改后的PaymentForm return部分直接返回表单即可：

// PaymentForm组件去掉外层的<Elements>标签
return (
  <form
    onSubmit={(e) => {
      handleSubmit(e);
    }}
  >
    {/* 原有表单内容不变 */}
  </form>
);

2. 新增按钮禁用逻辑，等Stripe初始化完成后才允许提交：

// 在PaymentForm组件的return里修改提交按钮
<button disabled={!stripe || !elements}>提交支付</button>

3. （可选）修复StripeInput的聚焦逻辑：

useImperativeHandle(inputRef, () => ({
  focus: () => {
    if (elementRef?.current) {
      elementRef.current.focus(); // 补充括号执行方法
    }
  },
}));

修改完成后elements.getElement()就能正常获取到渲染的卡片元素，不会再返回null。

内容的提问来源于stack exchange，提问作者Toni Michel Caubet