Blazor中调用Tyro在线支付JS库生成支付表单失败求助

核心问题分析 #

你遇到的问题主要和两个关键点有关：

1. Blazor的DOM生命周期：Blazor使用虚拟DOM，若在组件未完成真实DOM渲染时调用Tyro的JS方法，目标容器元素可能还未存在，导致注入失败。
2. ES模块的调用上下文：直接通过Blazor的IJSObjectReference调用Tyro模块的方法，可能存在作用域或初始化顺序的问题，导致方法未正确执行。

解决方案步骤 #

1. 自定义JS互操作包装函数

创建一个自定义的JS文件（比如wwwroot/tyro-interop.js），统一处理Tyro模块的导入和初始化逻辑，避免直接在Blazor中调用模块方法的上下文问题：

export async function initTyroPay(paySecret, containerSelector) {
    try {
        // 导入Tyro模块并初始化
        const tyro = await import('https://pay.connect.tyro.com/v1/tyro.js');
        tyro.init(paySecret);
        
        // 创建支付表单并注入到目标容器
        const payForm = tyro.createPayForm();
        payForm.inject(containerSelector);
        
        return payForm;
    } catch (error) {
        console.error('Tyro支付表单初始化失败:', error);
        throw error;
    }
}

2. 在Blazor组件中正确时机调用

利用OnAfterRenderAsync钩子（确保真实DOM已渲染），导入自定义JS模块并执行初始化：

@inject IJSRuntime JsRuntime
@implements IAsyncDisposable

<form id="pay-form">
    <div id="tyro-pay-form">
        <!-- Tyro.js 将注入支付输入字段 -->
    </div>
    <button id="pay-form-submit">Pay</button>
</form>

@code {
    private IJSObjectReference? _tyroInteropModule;
    private string? _paySecret;

    // 初始化时获取paySecret
    protected override async Task OnInitializedAsync()
    {
        // 替换为你实际获取paySecret的API调用逻辑
        var apiResponse = await FetchPaySecretFromBackend();
        TyroPayResponse response = JsonConvert.DeserializeObject<TyroPayResponse>(apiResponse);
        _paySecret = response.paySecret;
    }

    // 组件渲染完成后调用JS初始化支付表单
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && !string.IsNullOrEmpty(_paySecret))
        {
            _tyroInteropModule = await JsRuntime.InvokeAsync<IJSObjectReference>(
                "import", "./tyro-interop.js");
            
            await _tyroInteropModule.InvokeVoidAsync(
                "initTyroPay", _paySecret, "#tyro-pay-form");
        }
        await base.OnAfterRenderAsync(firstRender);
    }

    // 清理JS模块资源
    public async ValueTask DisposeAsync()
    {
        if (_tyroInteropModule != null)
        {
            await _tyroInteropModule.DisposeAsync();
        }
    }

    // 用于反序列化API响应的模型类
    private class TyroPayResponse
    {
        public string paySecret { get; set; } = string.Empty;
    }

    // 模拟后端API调用
    private async Task<string> FetchPaySecretFromBackend()
    {
        // 替换为真实的API请求逻辑
        return "{\"paySecret\": \"你的有效paySecret值\"}";
    }
}

关键检查点 #

• 浏览器控制台：打开开发者工具查看是否有JS错误（比如Tyro模块加载失败、paySecret无效等）。
• paySecret有效性：确保获取到的paySecret是最新且有效的，未过期或格式错误。
• 容器元素存在性：确认#tyro-pay-form在调用inject方法时已存在于真实DOM中（OnAfterRenderAsync的firstRender触发时已满足）。

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