Как вставить 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)
{

[img]images/Spinner@1x-1.0s-200px-200px.gif[/img]

}
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 [b]x[/b]  @prod.Count

@prod.Price.ToString("c")

}



[b]Cart Subtotal (Shipment)[/b]

@StandardDeliveryCharge.ToString("c")



[b]Order Total[/b]


[b]@((Order.OrderHeader.OrderTotal + @StandardDeliveryCharge).ToString("c"))[/b]





Payment Method





@SelectedPayment

[list]
[*]
Available Payment Methods

[*]
Stripe Payment

[*]


[*]
Iyzipay Payment

[/list]

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",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=1719940949305');document.head.appendChild(iyziJSTag);}};iyziInit.createTag();}

Как отобразить этот скрипт карточки на странице?

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