Добавление фрагмента HTML к представлению в Angular 6

Можно ли этот скрипт завернуть в div?

Если да, то просто используйте синтаксис привязки свойства [innerHTML] к пустому div и используйте str в качестве его значения.

Однако после этого вы получите ошибку небезопасных сценариев, которую вы можете исправить, пропустив ее через канал очистки, который вы можете создать следующим образом:

import {
  Pipe,
  PipeTransform
} from '@angular/core';
import {
  DomSanitizer,
  SafeHtml
} from '@angular/platform-browser';

@Pipe({
  name: 'sanitize'
})
export class SanitizePipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) {}

  transform(html: string): SafeHtml {
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }
}

Создание канала поможет вам повторно использовать эту логику в нескольких местах вашего приложения.

И в вашем шаблоне вы можете просто использовать str как:

<div [innerHTML]="str | sanitize">
</div>

Я смог увидеть любой контент из этого div в пользовательском интерфейсе.

Даже документация Angular говорит то же самое.

Обойти безопасность и доверять данному значению как безопасному HTML. Используйте это только в том случае, если связанный HTML-код небезопасен (например, содержит теги) и код должен быть выполнен. Дезинфицирующее средство оставит безопасный HTML-код нетронутым, поэтому в большинстве случаев этот метод не следует использовать.

Вы можете попробовать использовать класс DOMSanitizer

import {BrowserModule, DomSanitizer} from '@angular/platform-browser';

constructor(private sanitizer: DomSanitizer) {
    this.html = sanitizer.bypassSecurityTrustHtml('<div 
  id='paysonContainer'
  url='https://test-www.payson.se/embedded/checkout?id=af1ebee5-40bd-410a-90d1-a94401553414'>
</div>') ;
  }