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 } from '@angular/core';
import { IonicPage, NavController, NavParams, LoadingController, ViewController, AlertController } from 'ionic-angular';
import {HttpService} from '../../services/http-service'
import {Observable} from 'rxjs/Observable';

import scriptjs from 'scriptjs';
declare var PagSeguroDirectPayment;

/**
* Generated class for the PagSeguroPage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
@IonicPage()
@Component({
    selector: 'page-pagseguro',
    templateUrl: 'pagseguro.html',
})
export class PagSeguroPage {

    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: HttpService,
        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.postData(data,'pagsegsessao')
        .subscribe(
            (dados: any)=>{
                if (dados[0]==1) {
                    this.session = dados[1];
                    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,
            'hashCard'       : this.credentials.hashCard
        }
    }

    postPayment(){
        //--Enviando pagamento para servidor
        let loader = this.loading.create({content: 'Realizando pagamento...'});
        loader.present();
        let hashData = this.getDataPayment();
        this.httpService.postData(hashData,'pagsegend')
        .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);
        });
    }

}