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

Question

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.

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?

Answer 1

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