item.component.ts

import { Component, OnInit, NgZone } from '@angular/core';
import { MatDialog } from '@angular/material';

import { DialogComponent } from '../dialog/dialog.component';

import { PagseguroService } from '../pagseguro.service';

declare let PagSeguroLightbox: any;

@Component({
  selector: 'app-item',
  templateUrl: './item.component.html',
  styleUrls: ['./item.component.css']
})
export class ItemComponent implements OnInit {

  constructor(
    private pagSegService: PagseguroService,
    public dialog: MatDialog,
    private ngZone: NgZone
  ) { }

  ngOnInit() {
  }

  checkout() {
    this.pagSegService.checkout({
      itemId1: '1',
      itemDescription1: 'Camisa Esportiva',
      itemAmount1: '1',
      itemPrice1: '200.00'
    }).subscribe((transactionCode: string) => this.lightbox(transactionCode));
  }

  lightbox(transactionCode) {
    PagSeguroLightbox(transactionCode, {
        success: () => this.ngZone.run(() => this.openDialog(true)),
        abort: () => this.ngZone.run(() => this.openDialog(false))
    });
  }

  openDialog(status): void {
    this.dialog.open(DialogComponent, {
      width: '250px',
      data: { status: status}
    });
  }

}