javascript.netblazorplaidblazor-jsinterop

JSInvokable Blazor method not being called


I'm trying to invoke a Blazor method in JavaScript inside of an OnSuccess callback for the Plaid API.

Here's the JavaScript that's being run:

async function InitializePlaidLink(objRef, linkToken) {
    //console.log("linkToken:" + linkToken);

    const handler = Plaid.create({
        token: linkToken,
        onSuccess: (public_token, metadata) => {
            //console.log("public_token: ");
            //console.log(public_token);
            objRef.invokeMethodAsync('OnPlaidLinkSuccess', public_token);
            //console.log("After Invoke Method Async")
        },
        onLoad: () => {},
        onExit: (err, metadata) => {},
        onEvent: (eventName, metadata) => {},
        //required for OAuth; if not using OAuth, set to null or omit:
        //receivedRedirectUri: window.location.href,
    });

    handler.open();
}

Here's the Blazor code being used:

private string LinkToken { get; set; } = string.Empty;

private string PublicToken { get; set; } = string.Empty;

private async Task InitializePlaid()
{
    this.LinkToken = await this.apiService.GetPlaidLinkToken();

    var dotNetReference = DotNetObjectReference.Create(this);

    await this.jsRuntime.InvokeVoidAsync
        (
            "InitializePlaidLink",
            dotNetReference,
            this.LinkToken
        );
}

[JSInvokable]
public void OnPlaidLinkSuccess(string publicToken)
{
    this.PublicToken = publicToken;
}

The Blazor method InitializePlaid is being called to invoke the JS method InitializePlaidLink. Then, on success, the Blazor method OnPlaidLink Success should be called.

I used log statements to confirm that there is a public_token and the JS after the objRef.invokeMethodAsync() is being reached. Also I was able to invoke a Blazor method in a similar way with a different JS method, just not a method with the Plaid API and the onSuccess callback.


Solution

  • OnPlaidLinkSuccess was being called correctly. The property this.PublicToken was being correctly updated, but the DOM was not being updated for the user to see. Calling this.StateHasChanged() fixed this.