How to navigate to 3rd party URL in Blazor WASM?

Cenk 991 Reputation points
2024-07-02T10:15:03.17+00:00

Hi,

I have an e-commerce solution. Using Blazor WASM .NET 6 for the client side. I am using a 3rd party payment gateway. Unfortunately, they don't have a great support and help desk so most of the time I am trying to find my way with trial and error. I am sending the necessary fields to the 3rd party service and get a successful result with some information.

...
"checkoutFormContent": "<script type=\"text/javascript\">if (typeof iyziInit == 'undefined') {var iyziInit = {currency:\"TRY\",token:\"2bbd1b79-63ec-49ae-8873-0e40ab511f0a\",price:1.20,pwiPrice:1.20,locale:\"tr\",baseUrl:\"https://sandbox-api.iyzipay.com\", merchantGatewayBaseUrl:\"https://sandbox-merchantgw.iyzipay.com\", registerCardEnabled:true,bkmEnabled:true,bankTransferEnabled:false,bankTransferTimeLimit:{\"value\":5,\"type\":\"day\"},bankTransferRedirectUrl:\"https://www.merchant.com/callback\",bankTransferCustomUIProps:{},campaignEnabled:false,campaignMarketingUiDisplay:null,paymentSourceName:\"\",plusInstallmentResponseList:null,payWithIyzicoSingleTab:false,payWithIyzicoSingleTabV2:false,payWithIyzicoOneTab:false,newDesignEnabled:false,mixPaymentEnabled:true,creditCardEnabled:true,bankTransferAccounts:[],userCards:[],fundEnabled:true,memberCheckoutOtpData:{},force3Ds:false,isSandbox:true,storeNewCardEnabled:true,paymentWithNewCardEnabled:true,enabledApmTypes:[\"SOFORT\",\"IDEAL\",\"QIWI\",\"GIROPAY\"],payWithIyzicoUsed:false,payWithIyzicoEnabled:true,payWithIyzicoCustomUI:{},buyerName:\"John\",buyerSurname:\"Doe\",merchantInfo:\"\",merchantName:\"Sandbox Merchant Name - 3397951\",cancelUrl:\"\",buyerProtectionEnabled:false,hide3DS:false,gsmNumber:\"\",email:\"email@email.com\",checkConsumerDetail:{},subscriptionPaymentEnabled:false,ucsEnabled:false,fingerprintEnabled:false,payWithIyzicoFirstTab:false,creditEnabled:false,payWithIyzicoLead:false,goBackUrl:\"\",metadata : {},createTag:function(){var iyziJSTag = document.createElement('script');iyziJSTag.setAttribute('src','https://sandbox-static.iyzipay.com/checkoutform/v2/bundle.js?v=1719893026454');document.head.appendChild(iyziJSTag);}};iyziInit.createTag();}</script>",
    "tokenExpireTime": 1800,
    "paymentPageUrl": "https://sandbox-cpp.iyzipay.com?token=2bbd1b79-63ec-49ae-8873-0e40ab511f0a&lang=tr",
...


I am navigating to the paymentPageUrl like this;

_navigationManager.NavigateTo(result.Data.ToString());

It redirects to the 3rd party checkout form.

Ekran görüntüsü 2024-07-02 123846

After the payment process is completed, it redirects to the correct address (http://localhost:7169/OrderConfirmation) but the page is empty. Why might this situation occur? Do I need to do something about the checkoutFormContent when redirecting to the checkout form? Or do I need to open the checkout form differently, without using paymentPageUrl?

Ekran görüntüsü 2024-07-02 123931

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,395 questions
Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,499 questions
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
10,639 questions
{count} votes

1 answer

Sort by: Most helpful
  1. Bruce (SqlWork.com) 61,491 Reputation points
    2024-07-02T15:38:26.5+00:00

    when your blazor app redirects to the payment server it unloads. when the payment server redirects back, the blazor app is restarted and navigates to the OrderConfirmation page. Unless you saved state, all state information is lost on the restart. if would be best if the payment redirect back could include a save session key, used to reload the saved session. otherwise save the key / session data in local storage. see:

    https://learn.microsoft.com/en-us/aspnet/core/blazor/state-management?view=aspnetcore-8.0&pivots=server