网站自定义支付金额功能求助：动态传值至window.PUM.setData

看起来你遇到的问题主要是代码执行时机不对，以及缺少必要的事件触发逻辑，我来帮你一步步解决：

问题根源分析 #

你原来的固定金额代码能生效，是因为它直接赋值了一个静态数字，不需要依赖DOM元素。但后来的代码：

var rupees=document.getElementById("rs").value;
window.PUM.setData(rupees);

有两个常见问题：

1. DOM加载顺序问题：如果这段脚本在页面的<input id="rs">元素之前执行，浏览器还没解析到这个输入框，document.getElementById("rs")会返回null，调用.value直接报错。
2. 缺少触发时机：页面加载时输入框是空的，你直接取值传递的是空字符串，而window.PUM.setData大概率期望接收数字类型的参数，自然无法生效。

完整解决方案 #

我们需要等到用户输入金额后，在点击「Pay now」按钮时再去获取输入值并传递给支付函数，同时处理DOM加载和数据类型转换的问题：

1. 确保HTML结构正确 #

首先确认你的输入框和按钮的HTML结构（如果还没写全的话）：

<!-- 数字输入框，限制输入合法金额 -->
<input type="number" id="rs" placeholder="请输入支付金额" min="1" step="1">
<!-- 支付按钮 -->
<button id="payNowBtn">Pay now</button>

2. 编写正确的JavaScript逻辑 #

把脚本放在页面底部（或者用DOMContentLoaded事件包裹），绑定按钮的点击事件：

// 等待整个DOM加载完成后再执行代码
document.addEventListener('DOMContentLoaded', function() {
  // 获取按钮和输入框元素
  const payButton = document.getElementById('payNowBtn');
  const amountInput = document.getElementById('rs');

  // 给支付按钮绑定点击事件
  payButton.addEventListener('click', function() {
    // 获取输入值并转换为数字类型
    const rupees = parseFloat(amountInput.value);

    // 验证输入是否有效
    if (isNaN(rupees) || rupees <= 0) {
      alert('请输入有效的正整数金额');
      return; // 验证不通过就停止执行
    }

    // 调用支付函数传递金额
    window.PUM.setData(rupees);
    
    // 如果需要触发后续支付流程，比如弹出支付窗口等，可以在这里添加对应代码
  });
});

关键注意点 #

• DOM加载时机：用DOMContentLoaded确保脚本在所有DOM元素解析完成后再执行，避免找不到元素的问题。
• 数据类型转换：输入框的value属性返回的是字符串，必须转成数字（用parseFloat或parseInt），否则支付函数可能无法识别。
• 输入验证：添加简单的验证逻辑，防止用户输入非数字、负数或空值，提升代码健壮性。
• 元素ID正确性：确保输入框的id确实是rs，没有拼写错误，按钮的id和脚本里的对应上。

如果你的「Pay now」按钮已经有现成的点击事件处理函数，只需要把「获取输入值→验证→调用setData」的逻辑整合到现有函数里即可。

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