I want to include a payment method in my nextjs project. When I send the request to the server, a script is returned to me. I need to receive payment using a popup using this, but I couldn’t find how to show it on the page.

result:

"<script type="text/javascript">
   if (typeof iyziInit == 'undefined') {
      var iyziInit = {
         currency:"TRY",
         token:"7531ab23-4f95-44e0-9e93-0f80ae09ad06",
         price:125.00,
         pwiPrice:125.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:"",
         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 - 3399813",
         cancelUrl:"",
         buyerProtectionEnabled:false,
         hide3DS:false,
         gsmNumber:"",
         email:"[email protected]",
         checkConsumerDetail:{},
         subscriptionPaymentEnabled:false,
         disabledCardStorageInfoCheckbox: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=1725560479959');
                  document.head.appendChild(iyziJSTag);}};iyziInit.createTag();
         }
</script>"

i try this:

{data && <div id="script" dangerouslySetInnerHTML={{ __html: data.result.checkoutFormContent }} />}

if i do it like this it doesn’t work at all
and i try this:

{data && <Script strategy="afterInteractive" id="script" dangerouslySetInnerHTML={{ __html: data.result.checkoutFormContent }} />}

When I tried this I got an error saying unexpected token “<“

But if I run the incoming script in codepen, I can see the result I want, that is, there is no error in the incoming response, I just couldn’t figure out how to run it.
https://codepen.io/enesseval/pen/ZEdVGpN