Dynamic scripts are not loading in to iframe index.html rather loading if manually added to index.html

I am trying to load the scripts in iframe index.html dynamically which are loading if added manually in the iframe index.html, but not loading if dynamically added on UI shown in the below code.

Also shows an error that is

Already loaded path zone error

Here is the dynamic scripts loading in angular constructor code:

constructor() {
  const paymentGPIUS = [
    'href="https://sc-ols-onlinebooking-dev.s3-us-west-2.amazonaws.com/ols-onlinebooking-ui/add-card-widget/styles.css',
    'http://127.0.0.1:5500/dist/ols-onlinebooking-ui/add-card-widget/element.js'
  ];
  const node = document.createElement('script');
  node.src = paymentGPIUS[0];
  node.type = 'text/javascript';
  node.async = false;
  document.body.appendChild(node);
  // document.head.appendChild(node);
  const node2 = document.createElement('link');
  node2.rel = 'stylesheet'
  node2.href = paymentGPIUS[1];
  document.head.appendChild(node2);
}

Here is code to load scripts it's loading into iframe index.html but I cant see the button or UI on screen but I add manually its working and loading correctly

In the above image, scripts are loading below styles both link and scripts into iframe, which should also load the UI screen button but it is not.