如何向React函数组件传入脚本以渲染LivePayphone支付按钮

你可以通过动态注入第三方脚本 + 配合React生命周期钩子的方式实现，具体实现步骤和代码如下：

实现步骤 #

• 先给支付按钮预留DOM挂载节点，用useRef绑定避免全局选择器的冲突问题
• 在useEffect钩子中动态创建script标签注入payphone的官方脚本，监听脚本加载完成事件后再初始化支付按钮实例
• 组件卸载时销毁相关实例，避免内存泄漏和重复挂载问题

完整代码示例 #

import { useEffect, useRef } from 'react'

const PayphonePaymentButton = () => {
  // 绑定按钮挂载节点
  const buttonContainerRef = useRef(null)

  useEffect(() => {
    // 避免重复加载脚本
    if (window.payphone) {
      initPayButton()
      return
    }
    // 动态创建script标签
    const script = document.createElement('script')
    // 请从Payphone官方文档获取正确的支付脚本地址，替换下方字段
    script.src = '替换为Payphone官方支付脚本地址'
    script.async = true
    script.onload = () => {
      // 脚本加载完成后初始化按钮
      initPayButton()
    }
    document.body.appendChild(script)

    // 初始化支付按钮方法
    function initPayButton() {
      if (!window.payphone || !buttonContainerRef.current) return
      window.payphone.Button({
        token: '替换为你的商户TOKEN',
        btnHorizontal: true,
        btnCard: true,
        createOrder: function(actions){
          return actions.prepare({
            amount: 100, // 单位为分，实际金额按业务调整
            amountWithoutTax: 100,
            currency: "USD",
            clientTransactionId: '替换为你生成的唯一订单ID'
          })
        },
        onComplete: function(model, actions){
          actions.confirm({
            id: model.id,
            clientTxId: model.clientTxId
          }).then(function(value){
            // 支付成功后续逻辑，比如跳转订单页、提示成功等
            console.log('支付成功', value)
          }).catch(function(err){
            // 支付失败后续逻辑，比如提示错误、刷新订单状态
            console.log('支付失败', err)
          })
        }
      }).render(buttonContainerRef.current)
    }

    // 组件卸载清理逻辑
    return () => {
      // 移除挂载的按钮节点，清理残留事件
      if (buttonContainerRef.current) {
        buttonContainerRef.current.innerHTML = ''
      }
    }
  }, [])

  return <div ref={buttonContainerRef}></div>
}

export default PayphonePaymentButton

注意事项 #

• 你需要将代码中的商户TOKEN、订单ID、金额、货币等参数替换为你实际业务的参数
• 支付成功/失败的回调逻辑需要根据你的业务需求自行实现，不要仅保留日志打印

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