pagseguro.html

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons navPop left>
      <button ion-button icon-only>
        <ion-icon name="close-circle"></ion-icon>
      </button>
    </ion-buttons>

    <ion-title>PagSeguro</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-row>
    <ion-col col-7>
      <ion-item>
        <ion-label stacked>Número do cartão</ion-label>
        <ion-input type="text" [(ngModel)]="dados.cardNumber" (blur)="buscaBandeira()" ></ion-input>
      </ion-item>
    </ion-col>
    <ion-col col-5>
      <ion-item>
        <ion-label stacked>Cód. Segurança</ion-label>
        <ion-input type="text" [(ngModel)]="dados.cvv" ></ion-input>
      </ion-item>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col>
      <ion-item>
        <ion-label stacked>Mes de Validade</ion-label>
        <ion-input type="text" [(ngModel)]="dados.expirationMonth" mask="99" placeholder="MM"></ion-input>
      </ion-item>
    </ion-col>
    <ion-col>
      <ion-item>
        <ion-label stacked>Ano de Validade</ion-label>
        <ion-input type="text" [(ngModel)]="dados.expirationYear" mask="9999" placeholder="AAAA"></ion-input>
      </ion-item>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-item>
      <ion-label stacked>Nome impresso no cartão</ion-label>
      <ion-input type="text" [(ngModel)]="dados.nome" ></ion-input>
    </ion-item>
  </ion-row>

  <ion-row>
    <ion-item>
      <ion-label stacked>CPF</ion-label>
      <ion-input type="text" [(ngModel)]="dados.cpf" mask="999.999.999-99" ></ion-input>
    </ion-item>
  </ion-row>

  <ion-row>
    <ion-item>
      <ion-label stacked>Data de nascimento</ion-label>
      <ion-input type="text" [(ngModel)]="dados.dataNascimento" mask="99/99/9999" placeholder="DD/MM/AAAA" ></ion-input>
    </ion-item>
  </ion-row>

  <ion-row>
    <button ion-button full type="button" (click)="finaliza()" >Confirmar</button>
  </ion-row>

</ion-content>

pagseguro.ts

import {Component, NgZone, ViewChild} from '@angular/core';
import {
    AlertController, IonicPage, LoadingController, NavController, NavParams, Segment,
    ViewController
} from 'ionic-angular';
import {PaymentHttp} from "../../providers/payment-http";
import scriptjs from 'scriptjs';
import {Cart} from "../../providers/cart";
import {ProductsListPage} from "../products-list/products-list";

declare let PagSeguroDirectPayment;

/**
 * Generated class for the CheckoutPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@IonicPage()
@Component({
    selector: 'page-checkout',
    templateUrl: 'checkout.html',
})
export class CheckoutPage {

    status:boolean = false;
    session: any;

    credentials:any;

    empresa_id:any;


    dados = {
        'empresa'        : '',
        'pedido'         : '',
        'cardNumber'     : '',
        'cvv'            : '',
        'expirationMonth': '',
        'expirationYear' : '',
        'brand'          : '',
        'nome'           : '',
        'cpf'            : '',
        'dataNascimento' : '',
    }
    returnData:any = false;



    constructor(
        public navCtrl: NavController,
        public navParams: NavParams,
        public httpService: PaymentHttp,
        public loading: LoadingController,
        public viewCtrl: ViewController,
        public alertCtrl: AlertController
    ) {
        //--Recebe dados do pedido por parameto
        this.dados.pedido  = this.navParams.get('pedido');
        this.dados.empresa = this.navParams.get('empresa');
        this.returnData    = this.navParams.get('returnData') || false;
        //--INICIA SESSAO NO PAGSEGUTO
        let loader = this.loading.create({content: 'Iniciando sessão...',});
        loader.present();
        this.startSession(this.dados.empresa).then(result => {
            loader.dismiss();
            if (!result)
                this.viewCtrl.dismiss({error:'Falha ao iniciar sessão! Tente novamente por favor!'});
        });
    }

    startSession(empresa_id){
        this.empresa_id = empresa_id;
        return new Promise( (resolve) => {
            scriptjs('https://stc.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.directpayment.js', () => {
                this.getSession(resolve);
            })
        })
    }

    private getSession(resolve){
        let data = {'id':this.empresa_id};
        this.httpService.getSession()
            .subscribe(
                (dados: any)=>{
                    //if (dados[0]==1) {
                        this.session = {id: dados.sessionId};
                        console.log(this.session.id);
                        PagSeguroDirectPayment.setSessionId(this.session.id);
                        resolve(true);
                    /*} else {
                        resolve(false);
                    }*/
                },(err)=>{
                    console.log(err);
                    resolve(false);
                }
            );
    }


    buscaBandeira(){
        if (this.dados.cardNumber.trim().length){
            console.log(this.dados.cardNumber);
            this.getBrand(
                this.dados.cardNumber,
                (response) => {
                    this.dados.brand = response.brand.name;
                    console.log('Bandeira do cartão: ' + this.dados.brand);
                },
                (response) => {
                    console.log(response);
                }
            );
        }
    }

    getBrand(numCard,success,error){
        PagSeguroDirectPayment.getBrand({
            cardBin: numCard,
            success: success,
            error: error
        });
    }

    finaliza(){
        let loader = this.loading.create({content: 'Verificando dados...'});
        loader.present();
        this.createCardToken(this.dados).then(
            (dados)=>{
                loader.dismiss();
                if (this.returnData){
                    this.viewCtrl.dismiss(this.getDataPayment());
                } else {
                    this.postPayment();
                }
            }, (err)=>{
                console.log(err);
                let error = [];
                for (let prop in err.errors ) error.push(err.errors[prop]);
                let alert = this.alertCtrl.create({
                    title: 'Erro!',
                    message: error.join(', '),
                    buttons: ['Ok']
                });
                loader.dismiss();
                alert.present();
            }
        );
    }

    createCardToken(credentials){
        credentials['hashVendedor'] = PagSeguroDirectPayment.getSenderHash();
        return new Promise((response,reject)=>{
            PagSeguroDirectPayment.createCardToken({
                cardNumber:       credentials.cardNumber.replace(/\D/g,''),
                cvv:              credentials.cvv,
                expirationMonth:  credentials.expirationMonth,
                expirationYear:   credentials.expirationYear,
                brand:            credentials.brand,
                success: data => {
                    credentials['hashCard'] = data.card.token;
                    this.credentials = credentials;
                    response(credentials);
                },
                error: reject,
            });
        });
    }

    getDataPayment(){
        return {
            'pedido'         : this.credentials.pedido,
            'brand'          : this.credentials.brand,
            'nome'           : this.credentials.nome,
            'cpf'            : this.credentials.cpf.replace(/\D/g,''),
            'dataNascimento' : this.credentials.dataNascimento,
            'hashVendedor'   : this.credentials.hashVendedor,
            'hash'       : this.credentials.hashCard
        }
    }

    postPayment(){
        this.navCtrl.push(ProductsListPage);
        //--Enviando pagamento para servidor
        let loader = this.loading.create({content: 'Realizando pagamento...'});
        loader.present();
        let hashData = this.getDataPayment();
        this.httpService.doPayment(hashData)
            .subscribe((dados)=>{
                if (dados[0]==1){
                    this.viewCtrl.dismiss();
                }else{
                    console.log(dados[1]);
                    //--Aviso de erro!
                    let erro = '';
                    if (Array.isArray(dados[1]) ) erro = dados[1].join(',<br>');
                    else erro = dados[1];
                    //--Exibe erros
                    this.alertCtrl.create({
                        title: 'Erro!',
                        message: erro,
                        buttons: ['Ok']
                    }).present();
                }
                loader.dismiss();
            },(err)=>{
                loader.dismiss();
                console.log(err);
            });
    }

}