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:
Here is the OrderConfirmation:
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:
C#:
[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:
C#:
@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;
}
}