Question How to handle POST request to a Blazor WASM razor page?

[raysefo]

Hi,

I am working on an e-commerce solution, having Blazor WASM, Blazor Server, and ASP.NET Core API projects inside. There is a 3rd party payment gateway popup (javascript) that I am displaying on checkout on a razor page. After payment has been completed, the third-party payment gateway makes a POST request based on a callback URL. I implemented an action method in the API to retrieve the POST request from the third-party payment gateway. So far so good, I can retrieve the data (token) in the API action method but I need to navigate to a razor page (OrderConfirmation) to Blazor WASM.

Here is the API action:

[HttpPost]
[AllowAnonymous]
[ActionName("PaymentCallback")]
public async Task<IActionResult> PaymentCallback([FromForm] string token)
{
    var confirmationUrl = "http://localhost:7169/OrderConfirmation";
    try
    {
        // Process the payment result
        
        var tokenValue = token;

        
    }
    catch (Exception ex)
    {
        return BadRequest(new { message = ex.Message });
    }

    // Return the URL to the client
    return Ok(new { RedirectUrl = confirmationUrl });
}

Here is the OrderConfirmation:

@page "/OrderConfirmation"
@using Microsoft.AspNetCore.Authorization

@inject ILocalStorageService _localStorage
@inject IOrderService _orderService
@inject ICartService _cartService


<div class="container">
    @if (IsProcessing)
{
    <div style="position: fixed; top: 50%; left: 50%; margin-top: -50px; margin-left: -100px;">
        <img src="images/Spinner@1x-1.0s-200px-200px.gif" alt="waiting"/>
    </div>
    }
    else
    {
        @if (Order.OrderHeader.Status == SD.Status_Confirmed)
        {
            <div class="row mt-4 pt-4">
             <div class="col-10 offset-1 text-center">
                <h2 class="text-warning">Order Confirmed</h2>
                    <p>Your order has been placed successfully with order id : <span style="font-weight: bold; font-size: larger;">@Order.OrderHeader.Id</span></p>

            </div>
             <div class="col-8 offset-2">
                 <img src="/images/confirmation.png" width="100%" style="border-radius:30px;" alt="Confirmed"/>
             </div>
            </div>
        }
        else
        {
             <div class="row mt-4 pt-4">
                <div class="col-10 offset-1 text-center">
                <h2 class="text-danger">Order Issue!</h2>
                <p>Your order had payment issue please contact us with Order ID:  @Order.OrderHeader.Id</p>
            </div>
            <div class="col-8 offset-2">
                <img src="/images/error.jpg" width="100%" style="border-radius:30px;" alt="Not Confirmed"/>
            </div>
            </div>
        }

    }
</div>


@code {
    private bool IsProcessing { get; set; } = false;
    private OrderDTO Order { get; set; }
  
    protected override async Task OnInitializedAsync()
    {
        IsProcessing = true;

        Order = await _localStorage.GetItemAsync<OrderDTO>(SD.Local_OrderDetails);
        
        var updatedOrder = await _orderService.MarkPaymentSuccessful(Order.OrderHeader);

        if (updatedOrder.Status==SD.Status_Confirmed)
        {
            Order.OrderHeader.Status=updatedOrder.Status;

            await _localStorage.RemoveItemAsync(SD.ShoppingCart);
            await _localStorage.RemoveItemAsync(SD.Local_OrderDetails);
            await _cartService.ClearCart();
        }
        
        IsProcessing = false;
    }
}

 

[Skydiver]

In general, you don't want a web service to post back directly to your UI. Most people will design things so that the web service posts back to your web service. Then your web service informs the UI that a response has been received, and then the UI will update to reflect this new state. How the web service informs the UI is up to you: set a row value in a database, set a semaphore, send data into a named pipe, update a global variable, etc.