如何将Tinkoff支付原生代码改写为合法的React可运行代码？

w.pay 函数支持两种合法入参，你原本传入form.current的写法本身是合规的，未正常运行核心是遗漏了表单默认提交行为阻止、DOM属性规范等React适配细节，完整修正逻辑如下：

入参可选格式 #

• 第一种：直接传入符合结构要求的form DOM元素，就是你原本的写法，只要表单结构正确就能正常运行
• 第二种：传入包含所有支付参数的对象，更适配React状态管理逻辑，无需依赖DOM结构，格式示例：

w.pay({
  terminalkey: 'TinkoffBankTest',
  frame: true,
  language: 'ru',
  amount: 订单金额,
  order: 订单编号,
  description: 订单描述,
  name: 付款人姓名,
  email: 付款人邮箱,
  phone: 付款人手机号
})

完整可运行组件示例 #

import { useRef, FormEvent } from 'react'

const TinkoffPayForm = () => {
  const formRef = useRef<HTMLFormElement>(null)
  const w = window as any

  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    // 必须阻止默认提交行为，否则页面会刷新导致支付逻辑中断
    e.preventDefault()
    // 前置校验避免脚本未加载完成时报错
    if (!formRef.current || typeof w.pay !== 'function') return
    w.pay(formRef.current)
  }

  return (
    <form 
      name="TinkoffPayForm" 
      onSubmit={handleSubmit}
      ref={formRef}
    >
      <input className="tinkoffPayRow" type="hidden" name="terminalkey" value="TinkoffBankTest" />
      <input className="tinkoffPayRow" type="hidden" name="frame" value="true" />
      <input className="tinkoffPayRow" type="hidden" name="language" value="ru" />
      <input className="tinkoffPayRow" type="text" placeholder="Сумма заказа" name="amount" required />
      <input className="tinkoffPayRow" type="text" placeholder="Номер заказа" name="order" />
      <input className="tinkoffPayRow" type="text" placeholder="Описание заказа" name="description" />
      <input className="tinkoffPayRow" type="text" placeholder="ФИО плательщика" name="name" />
      <input className="tinkoffPayRow" type="text" placeholder="E-mail" name="email" />
      <input className="tinkoffPayRow" type="text" placeholder="Контактный телефон" name="phone" />
      <input className="tinkoffPayRow" type="submit" value="Оплатить" />
    </form>
  )
}

export default TinkoffPayForm

注意事项 #

• 所有input的name属性必须和官方要求完全一致，否则参数会识别失败
• 调用pay方法前要确保Tinkoff的JS脚本已经加载完成，避免出现pay is not a function报错
• 金额、手机号等字段要符合官方格式要求，否则会触发校验失败

内容的提问来源于stack exchange，提问作者evgeniya.osmakova