Last active
February 13, 2019 18:20
-
-
Save NiltonMorais/13300bd85f5ee8f856892a0f68e12e5e to your computer and use it in GitHub Desktop.
Filtrando somente seguimentos que serão utilizados no pagseguro e criando label para nome de exibição em pt-br. https://www.schoolofnet.com/forum/topico/remover-segments-que-nao-estao-sendo-usados-e-renomear-2348
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
Generated template for the CheckoutPage page. | |
See http://ionicframework.com/docs/components/#navigation for more info on | |
Ionic pages and navigation. | |
--> | |
<ion-header> | |
<ion-navbar> | |
<ion-title>checkout</ion-title> | |
</ion-navbar> | |
</ion-header> | |
<ion-content padding> | |
<div padding> | |
<ion-segment [(ngModel)]="paymentMethod"> | |
<ion-segment-button *ngFor="let payment of paymentMethods" [value]="payment.name"> | |
{{payment.label}} | |
</ion-segment-button> | |
</ion-segment> | |
</div> | |
<div [ngSwitch]="paymentMethod"> | |
<div *ngSwitchCase="'BOLETO'"> | |
area do boleto | |
</div> | |
<div *ngSwitchCase="'CREDIT_CARD'"> | |
<ion-item> | |
<ion-label>Numero do cartao</ion-label> | |
<ion-input type="text" [(ngModel)]="creditCard.num"></ion-input> | |
</ion-item> | |
<ion-item> | |
<ion-label>Código de segurança</ion-label> | |
<ion-input type="text" [(ngModel)]="creditCard.cvv"></ion-input> | |
</ion-item> | |
<ion-item> | |
<ion-label>Mês - Expiração</ion-label> | |
<ion-input type="text" [(ngModel)]="creditCard.monthExp"></ion-input> | |
</ion-item> | |
<ion-item> | |
<ion-label>Ano - Expiração</ion-label> | |
<ion-input type="text" [(ngModel)]="creditCard.yearExp"></ion-input> | |
</ion-item> | |
</div> | |
<div *ngSwitchCase="'BALANCE'"> | |
area do balanço | |
</div> | |
</div> | |
<ion-card> | |
<ion-card-header text-center> | |
Total a pagar: <strong>{{cart.total}}</strong> | |
</ion-card-header> | |
<ion-card-content> | |
<button ion-button full (click)="makePayment()">Concluir pagamento</button> | |
</ion-card-content> | |
</ion-card> | |
</ion-content> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {Component, NgZone, ViewChild} from '@angular/core'; | |
import {IonicPage, NavController, NavParams, Segment} from 'ionic-angular'; | |
import {PaymentHttp} from "../../providers/payment-http"; | |
import scriptjs from 'scriptjs'; | |
import {Cart} from "../../providers/cart"; | |
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 { | |
@ViewChild(Segment) | |
segment: Segment; | |
paymentMethod = 'BOLETO'; | |
paymentMethods: Array<any> = []; | |
creditCard = { | |
num: '', | |
cvv: '', | |
monthExp: '', | |
yearExp: '', | |
brand: '', | |
token: '' | |
}; | |
constructor(public navCtrl: NavController, | |
public navParams: NavParams, | |
public paymentHttp: PaymentHttp, | |
public cart: Cart, | |
public zone: NgZone) { | |
} | |
ionViewDidLoad() { | |
scriptjs('https://stc.sandbox.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.directpayment.js', () => { | |
this.paymentHttp.getSession() | |
.subscribe(data => { | |
this.initSession(data); | |
this.getPaymentMethods(); | |
}) | |
}); | |
} | |
initSession(data) { | |
PagSeguroDirectPayment.setSessionId(data.sessionId); | |
} | |
getPaymentMethods() { | |
PagSeguroDirectPayment.getPaymentMethods({ | |
amount: 100, | |
success: (response) => { | |
this.zone.run(() => { | |
let paymentMethods = response.paymentMethods; | |
this.paymentMethods = Object.keys(paymentMethods) | |
.map((key) => paymentMethods[key]) | |
.filter((payment) => { | |
// adicionando label para os objetos | |
switch (payment.name) { | |
case 'BOLETO': | |
payment.label = "BOLETO"; | |
break; | |
case 'CREDIT_CARD': | |
payment.label = "CARTÃO DE CRÉDITO"; | |
break; | |
default: | |
payment.label = payment.name; | |
} | |
// filtrando somente BOLETO E CREDIT_CARD | |
return payment.name == "BOLETO" || payment.name == "CREDIT_CARD"; | |
}); | |
setTimeout(() => { | |
this.segment._inputUpdated(); | |
this.segment.ngAfterContentInit(); | |
}); | |
}); | |
} | |
}); | |
} | |
makePayment() { | |
let data = { | |
items: this.cart.items, | |
hash: PagSeguroDirectPayment.getSenderHash(), | |
method: this.paymentMethod, | |
total: this.cart.total | |
}; | |
let doPayment = () => { | |
this.paymentHttp.doPayment(data).subscribe(() => { | |
console.log('deu certo') | |
}); | |
}; | |
if (this.paymentMethod == 'CREDIT_CARD') { | |
this.prepareCreditCard().then(() => { | |
(<any>data).token = this.creditCard.token; | |
doPayment(); | |
}, (error) => console.log(error)); | |
return; | |
} | |
doPayment(); | |
} | |
prepareCreditCard(): Promise<any> { | |
return this.getCreditCardBrand().then(() => { | |
return this.getCreditCardToken(); | |
}); | |
} | |
getCreditCardBrand(): Promise<any> { | |
return new Promise((resolve, reject) => { | |
PagSeguroDirectPayment.getBrand({ | |
cardBin: this.creditCard.num.substring(0, 6), | |
success: (response) => { | |
this.zone.run(() => { | |
this.creditCard.brand = response.brand.name; | |
console.log(response); | |
resolve({brand: response.brand.name}); | |
}); | |
}, | |
error(error) { | |
reject(error) | |
} | |
}); | |
}); | |
} | |
getCreditCardToken(): Promise<any> { | |
return new Promise((resolve, reject) => { | |
PagSeguroDirectPayment.createCardToken({ | |
cardNumber: this.creditCard.num, | |
brand: this.creditCard.brand, | |
cvv: this.creditCard.cvv, | |
expirationMonth: this.creditCard.monthExp, | |
expirationYear: this.creditCard.yearExp, | |
success: (response) => { | |
this.zone.run(() => { | |
this.creditCard.token = response.card.token; | |
resolve({token: response.card.token}); | |
console.log(response); | |
}); | |
}, | |
error(error) { | |
reject(error) | |
} | |
}) | |
}); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
você salvou meu dia mano vlws