Blazor WASM集成第三方支付脚本及回调跳转问题解决

问题1：注入支付脚本时找不到iyzipay-checkout-form元素，无法显示信用卡表单 #

初始集成时，直接注入Iyzipay API返回的支付脚本，控制台抛出id为iyzipay-checkout-form的元素未找到错误，信用卡表单无法正常渲染。

解决方法：

• 调整JS注入时机：确保页面中iyzipay-checkout-form元素已完成DOM渲染后，再执行支付脚本的注入操作；
• 使用MarkupString渲染脚本：将从API获取的支付脚本字符串通过MarkupString直接渲染，避免脚本被Blazor自动转义或延迟加载。

示例代码：

<!-- 在组件中渲染支付脚本 -->
@((MarkupString)PaymentGatewayScript)

问题2：支付完成后第三方POST回调无法跳转至Blazor的OrderConfirmation页面 #

支付成功后，Iyzipay发起的POST回调请求无法触发Blazor单页应用的路由跳转，导致用户无法进入订单确认页面。

解决方法：

• 后端新增回调接收接口：在.NET后端API中创建专门的接口处理Iyzipay的POST回调；
• 接口内添加永久重定向：在回调接口中完成支付状态验证、订单更新等逻辑后，使用RedirectPermanent将请求重定向至Blazor应用的OrderConfirmation页面路由。

示例代码：

[HttpPost("iyzipay-callback")]
public IActionResult HandleIyzipayCallback()
{
    // 1. 验证Iyzipay回调签名的合法性
    // 2. 更新订单状态为已支付
    // 3. 重定向至订单确认页面
    return RedirectPermanent("/order-confirmation");
}

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