集成Flutterwave支付报NodeList无法克隆及邮箱无效错误如何解决？

错误原因排查 #

1. 两个报错的共同核心问题：document.getElementsByName 用法错误 #

• document.getElementsByName() 返回的是匹配指定name属性的所有DOM元素组成的NodeList集合，不是单个DOM元素，所以直接调用.value会得到undefined，直接把NodeList对象赋值给参数会导致postMessage无法序列化该对象，抛出克隆失败错误。

2. "An invalid email passed"报错额外原因 #

除了NodeList取值逻辑错误外，代码中还存在两处语法/拼写错误：

• 取手机号的代码括号位置错误：document.getElementsByName("orderUser[phone]".value) 括号包裹范围错误，应该先取NodeList再取value
• 取用户名的属性名拼写错误：orderUSer[name] 中多写了大写S，实际表单里的属性是orderUser[name]

3. postMessage克隆失败报错额外原因 #

meta.consumer_id 直接赋值了document.getElementsByName('user_id')返回的NodeList对象，没有取对应的值，该对象无法被postMessage序列化。

修复方案 #

核心修正点 #

所有getElementsByName调用后，需要取集合第一个元素的value，即补充[0].value，同时修正拼写、括号位置错误，给public_key加上字符串引号。

修正后的完整集成脚本 #

<script>
function makePayment() {
  FlutterwaveCheckout({
    public_key: "替换为你自己的Flutterwave公钥",
    tx_ref: ("KDA_" + Math.floor(Math.random() * 1000000000) + 1),
    amount: document.getElementsByName("order[price]")[0].value,
    currency: "NGN",
    country: "NG",
    payment_options: " ",
    redirect_url: "http://localhost:8000/courses",
    meta: {
      consumer_id: document.getElementsByName('user_id')[0].value,
    },
    customer: {
      email: document.getElementsByName("orderUser[email]")[0].value,
      phone_number: document.getElementsByName("orderUser[phone]")[0].value,
      name: document.getElementsByName("orderUser[name]")[0].value,
    },
    callback: function (data) {
      console.log(data);
    },
    onclose: function() {
      // 关闭弹窗后的自定义逻辑
    },
    customizations: {
      title: "My store",
      description: "Payment for items in cart",
      logo: "http://localhost:8000/images/KDA%20logo.jpg",
    },
  });
}
</script>

验证建议 #

可以在makePayment函数开头添加console.log打印各个字段的取值，确认email、手机号、金额等参数都能正常获取，不存在undefined的情况即可。

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