Как вставить HTML в Blazor WASM? ⇐ C#

[Anonymous]

Я работаю над решением для электронной коммерции. Клиентская часть — это проект Blazor WASM .Net 6. Я пытаюсь использовать сторонний платежный шлюз, но, к сожалению, их поддержка очень плохая. Я пытаюсь прогрессировать методом проб и ошибок.
На странице оформления заказа я пытаюсь внедрить сценарий, который отображает информацию о кредитной карте на странице, и я получаю этот сценарий в качестве ответа от API стороннего шлюза. .
Вот пример содержимого сценария и его отображения (https://codebeautify.org/htmlviewer#):


Вот Checkout.razor (только связанные части)
@page "/ECommerce/Checkout"
@page "/ECommerce/Checkout/{StandardDeliveryCharge:double}"

@inject IJSRuntime _jsRuntime
@inject ILocalStorageService _localStorage
@inject IProductService _productService
@inject IPaymentService _paymentService
@inject IOrderService _orderService
@inject NavigationManager _navigationManager
@using Microsoft.AspNetCore.Authorization
@attribute [Authorize]

@if (IsProcessing)
{



}
else
{







Billing Details





First Name *






Address *





City *




State / Country *



Posta / Zip *






Email Address *



Phone *











Your Order



Product
Total


@foreach (var prod in Order.OrderDetails)
{


@prod.ProductName x @prod.Count

@prod.Price.ToString("c")

}



Cart Subtotal (Shipment)

@StandardDeliveryCharge.ToString("c")



Order Total


@((Order.OrderHeader.OrderTotal + @StandardDeliveryCharge).ToString("c"))





Payment Method





@SelectedPayment

• Available Payment Methods
• Stripe Payment
• Iyzipay Payment

Place Order














}
@code {

private string checkout;
private string SelectedPayment { get; set; } = "Stripe";

private SuccessModelDTO result = new SuccessModelDTO()
{
StatusCode = 0
};

private async Task HandleCheckout()
{
if(SelectedPayment == "Stripe")
{
await StripePayment();
}
else if (SelectedPayment == "Iyzico")
{
await IyzicoPayment(Order);
}

}

private async Task IyzicoPayment(OrderDTO order)
{
try
{
IsProcessing = true;
var iyzicoPaymentDto = new IyzicoPaymentDTO()
{
Order = Order
};

result = await _paymentService.Checkout(iyzicoPaymentDto);

if(result.StatusCode == 200)
{

checkout = result.Data.ToString();

var orderDtoSaved = await _orderService.CreateForIyzico(iyzicoPaymentDto);

await _localStorage.SetItemAsync(SD.Local_OrderDetails, orderDtoSaved);

await _jsRuntime.InvokeVoidAsync("injectIyzicoScript", checkout);
}

IsProcessing = false;
}
catch (Exception e)
{
await _jsRuntime.ToastrError(e.Message);
}
}

}

Вот код JavaScript, который я пытаюсь внедрить:
function injectIyzicoScript(scriptContent) {
const div = document.getElementById("iyzipay-checkout-form");
if (div != null) {
div.insertAdjacentHTML("beforeend", scriptContent);
} else {
console.error('Element with id "iyzipay-checkout-form" not found.');
}
}

Но я получаю элемент с идентификатором «iyzipay-checkout-form», который не найден. в консоли браузера, и страница с информацией о карте не отображается.Вот пример содержимого сценария, полученного из стороннего API.
if (typeof iyziInit == 'undefined') {var iyziInit = {currency:"TRY",token:"dce6b28f-f7c6-45b0-af50-30473899f11f",price:1000.00,pwiPrice:1000.00,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:"http://localhost:7169/OrderConfirmation ... edApmTypes:["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/chec ... 9940949305');document.head.appendChild(iyziJSTag);}};iyziInit.createTag();}

Как отобразить этот скрипт карточки на странице?
Изменить 1:
Мне удалось отобразить карточку на странице, вот что я сделал на данный момент.

• Изменил JS
  function injectScript(scriptContent) {
  var script = document.createElement('script');
  const subject = document.querySelector("#iyzipay-checkout-form");
  script.type = 'text/javascript';
  script.innerHTML = scriptContent;
  subject.appendChild(script);
  
  
  Добавлена ​​MarkupString на razor
  @((MarkupString)checkout)
• Удаление кавычки
  result = await _payService.Checkout(iyzicoPaymentDto);
  if(result.StatusCode == 200)
  {
  // Assuming result.Data.ToString() contains the script as a string
  checkout = result.Data.ToString();
  
  // Remove the beginning and end single quotes and tags
  var scriptContent = checkout.Trim('\'');
  var startIndex = scriptContent.IndexOf("") + "".Length;
  var endIndex = scriptContent.IndexOf("");
  scriptContent = scriptContent[startIndex..endIndex];
  
  var orderDtoSaved = await _orderService.CreateForIyzico(iyzicoPaymentDto);
  
  await _localStorage.SetItemAsync(SD.Local_OrderDetails, orderDtoSaved);
  
  // Execute the JavaScript code
  await _jsRuntime.InvokeVoidAsync("eval", scriptContent);
  }

Теперь проблема в том, что после оплаты он не перезванивает на мою страницу бритвы Blazor WASM, поскольку третья сторона совершает POST-запрос.


Изменить 2:
Это действие API получает ответ, но я не уверен, как перейти на страницу бритвы OrderConfirmation в Blazor WASM?
[HttpPost]
[AllowAnonymous]
[ActionName("PaymentCallback")]
public async Task 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 });
}


Подробнее здесь: https://stackoverflow.com/questions/786 ... lazor-wasm