google-pay/react-button集成Moneris网关时MonerisGooglePay未定义问题求解

场景说明 #

• 开发使用google-pay/react-button组件对接Moneris支付网关的Google Pay能力，按照官方指引需在index.html加载Moneris提供的功能脚本，在googlePay.js文件中完成支付详情传递与流程处理
• 运行阶段googlePay.js直接抛出未定义变量的报错

现有代码配置 #

index.html 中的Moneris脚本引入代码 #

<script async src="https://esqa.moneris.com/googlepay/googlepay-api.js"
onload="MonerisGooglePay.onReady()"></script>

googlePay.js 中的支付调用逻辑 #

paymentData["orderId"] = "Unique Order ID";
paymentData["amount"] = "Same as GoogleTransactionInfo()[`Total Price´]";
MonerisGooglePay.purchase(paymentData, function(response)
{
if ( response && response.receipt && response.receipt.ResponseCode &&
!isNaN(response.receipt.ResponseCode) )
{
if ( parseInt(response.receipt.ResponseCode) < 50 )
{
alert("Looks like the transaction is approved.");
}
else
{
alert("Looks like the transaction is declined.");
}
}
else
{
throw ("Error processing receipt.");
}
});

报错常见触发原因 #

• 脚本加载时序不匹配：Moneris脚本设置了async异步加载属性，独立执行的googlePay.js逻辑没有等待全局MonerisGooglePay变量挂载完成就发起调用，触发未定义错误
• 脚本加载失败无兜底：当前配置未对Moneris脚本的加载异常做捕获，若出现网络拦截、拉取超时的情况，全局变量自然无法生成
• 全局作用域隔离：在React打包环境下，若构建配置开启了严格的作用域隔离规则，原本挂载到window上的MonerisGooglePay全局变量可能被业务脚本的执行环境屏蔽，导致读取不到变量

内容的提问来源于stack exchange，提问作者qaxim al