API tools faq
paste
Pra3t0r5

Untitled

Pra3t0r5
May 6th, 2020
105
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 24.65 KB | None | 0 0
raw download clone embed print report
  1. // global.css ==================================================================================================
  2. ion-content {
  3. --background: aliceblue;
  4. }
  5.  
  6. ion-input {
  7. --min-height: 30px !important;
  8. }
  9.  
  10. ion-grid {
  11. margin-top: 10px;
  12. width: 100%;
  13. height: 100%;
  14. border-radius: 35px 35px 0px 0px;
  15. border-top: solid 10px;
  16. border-color: #14426E !important;
  17. &:before {
  18. background: none !important;
  19. z-index: 0;
  20. content: "CARGA DE SALDO";
  21. position: relative;
  22. top: -1px;
  23. left: 18%;
  24. height: 20px;
  25. width: 100%;
  26. //@include font(bold, 6vw, true, center);
  27. color: var(--ion-color-primary);
  28. }
  29. }
  30.  
  31. ion-label {
  32. //@include font(regular, 3vw, false, left);
  33. color: var(--ion-color-tertiary) !important;
  34. text-transform: uppercase;
  35. font-weight: bold;
  36. font-size: 3.5vw !important;
  37. text-shadow: 1px 1px 3px #aaaa;
  38. }
  39.  
  40. .select-text {
  41. margin-left: 10px;
  42. font-size: 1.4em !important;
  43. font-weight: bold;
  44. }
  45.  
  46. ion-label.errorMsg {
  47. color: red !important;
  48. font-size: 0.8em !important;
  49. font-weight: inherit;
  50. text-transform: unset;
  51. }
  52. }
  53.  
  54. // component.scss ==================================================================================================
  55. @import url('https://fonts.googleapis.com/css?family=Space+Mono:400,400i,700,700i');
  56.  
  57. .card {
  58. margin: auto;
  59. margin-top: 4vw;
  60. $card-width: 90vw;
  61. $card-height: $card-width/1.6842;
  62.  
  63. * {
  64. box-sizing: border-box !important;
  65. font-family: 'Space Mono', monospace !important;
  66. }
  67.  
  68. width: $card-width;
  69. height: $card-height;
  70. -webkit-perspective: 600px;
  71. -moz-perspective: 600px;
  72. perspective:600px;
  73.  
  74. &__part {
  75. box-shadow: 1px 1px 4px #a3a6aa;
  76. top: 0;
  77. position: absolute;
  78. z-index: 1000;
  79. left: 0;
  80. display: inline-block;
  81. width: $card-width;
  82. height: $card-height;
  83. background-image: url('https://image.ibb.co/bVnMrc/g3095.png'), linear-gradient(to right bottom, #36dfb3, #3778e4);
  84. // linear-gradient(to right bottom, #fd696b, #fa616e, #f65871, #f15075, #ec4879);
  85. /*linear-gradient(to right bottom, #fd8369, #fc7870, #f96e78, #f56581, #ee5d8a)*/
  86. /*linear-gradient(to right bottom,#20779A,#2397CA,#3ED598,#4E9949);*/
  87. background-repeat: no-repeat;
  88. background-position: center;
  89. background-size: cover;
  90. border-radius: 8px;
  91.  
  92. -webkit-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  93. -moz-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  94. -ms-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  95. -o-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  96. transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  97. -webkit-transform-style: preserve-3d;
  98. -moz-transform-style: preserve-3d;
  99. transform-style: preserve-3d;
  100. -webkit-backface-visibility: hidden;
  101. -moz-backface-visibility: hidden;
  102. backface-visibility: hidden;
  103. }
  104.  
  105. &__front {
  106. padding: 18px;
  107. -webkit-transform: rotateY(0);
  108. -moz-transform: rotateY(0);
  109. transform: rotateY(0);
  110.  
  111. &-logo {
  112. position: absolute;
  113. top: 18px;
  114. right: 18px;
  115. }
  116. }
  117.  
  118. &__back {
  119. padding: 18px 0;
  120. -webkit-transform: rotateY(-180deg);
  121. -moz-transform: rotateY(-180deg);
  122. transform: rotateY(-180deg);
  123.  
  124. &-content {
  125. padding: 15px 15px 0;
  126. }
  127.  
  128. &-logo {
  129. position: absolute;
  130. bottom: 15px;
  131. right: 15px;
  132. }
  133.  
  134. &-square {
  135. position: absolute;
  136. bottom: 15px;
  137. left: 15px;
  138. }
  139. }
  140.  
  141. &__black-line {
  142. margin-top: 5px;
  143. height: 38px;
  144. background-color: #303030;
  145. }
  146.  
  147. &__logo {
  148. height: 16px;
  149. }
  150.  
  151. &__square {
  152. border-radius: 5px;
  153. height: 30px;
  154. }
  155.  
  156. &_numer {
  157. display: block;
  158. width: 100%;
  159. word-spacing: 4px;
  160. font-size: 20px;
  161. letter-spacing: 2px;
  162. color: #fff;
  163. text-align: center;
  164. margin-bottom: 20px;
  165. margin-top: 20px;
  166. }
  167.  
  168. &__space-75 {
  169. width: 75%;
  170. float: left;
  171. }
  172.  
  173. &__space-25 {
  174. width: 25%;
  175. float: left;
  176. }
  177.  
  178. &__label {
  179. font-size: 10px;
  180. text-transform: uppercase;
  181. color: rgba(255, 255, 255, 0.8);
  182. letter-spacing: 1px;
  183. }
  184.  
  185. &__info {
  186. margin-bottom: 0;
  187. margin-top: 5px;
  188. font-size: 16px;
  189. line-height: 18px;
  190. color: #fff;
  191. letter-spacing: 1px;
  192. text-transform: uppercase;
  193. }
  194.  
  195. &__secret {
  196. padding: 5px 12px;
  197. background-color: #fff;
  198. position: relative;
  199.  
  200. &:before {
  201. content: '';
  202. position: absolute;
  203. top: -3px;
  204. left: -3px;
  205. height: calc(100% + 6px);
  206. width: calc(100% - 42px);
  207. border-radius: 4px;
  208. background: repeating-linear-gradient(45deg, #ededed, #ededed 5px, #f9f9f9 5px, #f9f9f9 10px);
  209. }
  210. }
  211.  
  212. &__secret--last {
  213. color: #303030;
  214. text-align: right !important;
  215. margin: 0;
  216. font-size: 14px;
  217. z-index: 10;
  218. }
  219.  
  220. &:hover .card__front,
  221. .show-back.card__front {
  222. -webkit-transform: rotateY(180deg);
  223. -moz-transform: rotateY(180deg);
  224. transform: rotateY(180deg);
  225. }
  226.  
  227. &:hover .card__back,
  228. .show-back.card__back {
  229. -webkit-transform: rotateY(0deg);
  230. -moz-transform: rotateY(0deg);
  231. transform: rotateY(0deg);
  232. }
  233. }
  234.  
  235. //component.html ==================================================================================================
  236. <ion-content scrolly="false" class="ion-no-padding">
  237. <div class="card">
  238. <div class="card__front card__part" [ngClass]="{'show-back' : showingBackside }">
  239. <img class="card__front-square card__square" src="https://image.ibb.co/cZeFjx/little_square.png">
  240. <img class="card__front-logo card__logo"
  241. src="../../../assets/images/cliente/tarjeta-saldo/mp-version-horizontal-small.png">
  242. <p class="card_numer">
  243. {{cardNumber | slice:0:4 }}-{{cardNumber | slice:4:8 }}-{{cardNumber | slice:8:12 }}-{{cardNumber | slice:12:16 }}
  244. </p>
  245. <div class="card__space-75">
  246. <span class="card__label">Card holder</span>
  247. <p class="card__info">{{cardHolder}}</p>
  248. </div>
  249. <div class="card__space-25">
  250. <span class="card__label">Expires</span>
  251. <p class="card__info">{{expirationMonth}}/{{expirationYear}}</p>
  252. </div>
  253. </div>
  254.  
  255. <div class="card__back card__part" [ngClass]="{'show-back' : showingBackside }">
  256. <div class="card__black-line"></div>
  257. <div class="card__back-content">
  258. <div class="card__secret">
  259. <p class="card__secret--last">{{ccv}}</p>
  260. </div>
  261. <img class="card__back-square card__square" src="https://image.ibb.co/cZeFjx/little_square.png">
  262. <img class="card__back-logo card__logo"
  263. src="../../../assets/images/cliente/tarjeta-saldo/mp-version-horizontal-small.png">
  264. </div>
  265. </div>
  266. </div>
  267. <!-- <div style="margin-top: 10em;">
  268. <ng-payment-card></ng-payment-card>
  269. </div> -->
  270.  
  271. <form [formGroup]="form" action="" method="post" id="pay" name="pay">
  272. <ion-grid class="ion-padding">
  273. <ion-row>
  274. <ion-col>
  275. <ion-item class="ion-no-padding">
  276. <ion-label for="email" position="floating">Email</ion-label>
  277. <ion-input [formControl]="form.controls['email']" id="email" name="email" type="email" clear-input="true"
  278. [class.invalid]="!form.controls['email'].valid && submitAttempt">
  279. </ion-input>
  280. </ion-item>
  281. <ng-container *ngIf="!form.controls['email'].valid && submitAttempt">
  282. <ion-label class="errorMsg">- No puede estar vac&iacute;o.</ion-label><br>
  283. <ion-label class="errorMsg">- Tiene que tener formato de e-mail.</ion-label><br>
  284. </ng-container>
  285. </ion-col>
  286. </ion-row>
  287. <ion-row>
  288. <ion-col>
  289. <ion-item class="ion-no-padding">
  290. <ion-label for="cardNumber" position="floating">Número de tarjeta</ion-label>
  291. <ion-input [formControl]="form.controls['cardNumber']" (ionChange)="guessingPaymentMethod( $event )"
  292. type="text" maxlength="16" id="cardNumber" data-checkout="cardNumber" onpaste="return false"
  293. onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off
  294. clear-input="true" [class.invalid]="!form.controls['cardNumber'].valid && submitAttempt">
  295. </ion-input>
  296. </ion-item>
  297. <ng-container *ngIf="!form.controls['cardNumber'].valid && submitAttempt">
  298. <ion-label class="errorMsg">- No puede estar vac&iacute;o.</ion-label><br>
  299. <ion-label class="errorMsg">- Tiene que tener 16 caracteres.</ion-label><br>
  300. <ion-label class="errorMsg">- Solo se permiten n&uacute;meros.</ion-label><br>
  301. </ng-container>
  302. </ion-col>
  303. </ion-row>
  304. <ion-row>
  305. <ion-col>
  306. <ion-item class="ion-no-padding">
  307. <ion-label for="cardholderName" position="floating">Nombre del titular</ion-label>
  308. <ion-input (ionChange)="cardUpdater($event)" [formControl]="form.controls['cardholderName']" type="text"
  309. id="cardholderName" data-checkout="cardholderName" clearInput maxlength="30"
  310. [class.invalid]="!form.controls['cardholderName'].valid && submitAttempt">
  311. </ion-input>
  312. </ion-item>
  313. <ng-container *ngIf="!form.controls['cardholderName'].valid && submitAttempt">
  314. <ion-label class="errorMsg">- No puede estar vac&iacute;o.</ion-label><br>
  315. <ion-label class="errorMsg">- No puede tener m&aacute;s de 30 caracteres.</ion-label><br>
  316. </ng-container>
  317. </ion-col>
  318. </ion-row>
  319. <ion-row>
  320. <ion-col size="4">
  321. <ion-item class="ion-no-padding">
  322. <ion-label for="cardExpirationMonth" position="floating">Mes Exp.</ion-label>
  323. <ion-input (ionChange)="cardUpdater($event)" [formControl]="form.controls['cardExpirationMonth']"
  324. type="text" maxlength="2" id="cardExpirationMonth" data-checkout="cardExpirationMonth"
  325. onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false"
  326. onDrag="return false" onDrop="return false" autocomplete=off clear-input="true"
  327. [class.invalid]="!form.controls['cardExpirationMonth'].valid && submitAttempt">
  328. </ion-input>
  329. </ion-item>
  330. <ng-container *ngIf="!form.controls['cardExpirationMonth'].valid && submitAttempt">
  331. <ion-label class="errorMsg">- No puede estar vac&iacute;o.</ion-label><br>
  332. <ion-label class="errorMsg">- Solo se permiten valores entre 1 y 12.</ion-label><br>
  333. </ng-container>
  334. </ion-col>
  335. <ion-col size="4">
  336. <ion-item class="ion-no-padding">
  337. <ion-label for="cardExpirationYear" position="floating">Año Exp.</ion-label>
  338. <ion-input (ionChange)="cardUpdater($event)" [formControl]="form.controls['cardExpirationYear']" type="text"
  339. maxlength="4" id="cardExpirationYear" data-checkout="cardExpirationYear" onselectstart="return false"
  340. onpaste="return false" onCopy="return false" onCut="return false" onDrag="return false"
  341. onDrop="return false" autocomplete=off clearInput
  342. [class.invalid]="!form.controls['cardExpirationYear'].valid && submitAttempt">
  343. </ion-input>
  344. </ion-item>
  345. <ng-container *ngIf="!form.controls['cardExpirationYear'].valid && submitAttempt">
  346.  
  347. <ion-label class="errorMsg">- No puede estar vac&iacute;o.</ion-label><br>
  348. <ion-label class="errorMsg">- El año tiene que ser ayor al actual.</ion-label><br>
  349. <ion-label class="errorMsg">- Solo se permiten n&uacute;meros.</ion-label><br>
  350.  
  351. </ng-container>
  352. </ion-col>
  353. <ion-col size="4">
  354. <ion-item class="ion-no-padding">
  355. <ion-label for="securityCode" position="floating">CVV</ion-label>
  356. <ion-input (ionFocus)="flipCard('back')" (ionBlur)="flipCard('front')" (ionChange)="cardUpdater($event)" [formControl]="form.controls['securityCode']" type="text"
  357. maxlength="3" id="securityCode" data-checkout="securityCode" onselectstart="return false"
  358. onpaste="return false" onCopy="return false" onCut="return false" onDrag="return false"
  359. onDrop="return false" autocomplete=off autoclean clearInput
  360. [class.invalid]="!form.controls['securityCode'].valid && submitAttempt">
  361. </ion-input>
  362. </ion-item>
  363. <ng-container *ngIf="!form.controls['securityCode'].valid && submitAttempt">
  364.  
  365. <ion-label class="errorMsg">- No puede estar vac&iacute;o.</ion-label><br>
  366. <ion-label class="errorMsg">- Tiene que tener 3 caracteres.</ion-label><br>
  367. <ion-label class="errorMsg">- Solo se permiten n&uacute;meros.</ion-label><br>
  368.  
  369. </ng-container>
  370. </ion-col>
  371. </ion-row>
  372. <ion-row>
  373. <ion-col size="5">
  374. <ion-item class="ion-no-padding">
  375. <ion-label for="docType" position="stacked">Tipo D.</ion-label>
  376. <ion-select [formControl]="form.controls['docType']" class="select-full-width">
  377. <ion-select-option *ngFor="let idType of mercadoPagoService.identifications" data-checkout="docType"
  378. [value]="idType.id">{{idType.name}}</ion-select-option>
  379. </ion-select>
  380. </ion-item>
  381. <ng-container *ngIf="!form.controls['docType'].valid && submitAttempt">
  382. <ion-label class="errorMsg">- No puede estar vac&iacute;o.</ion-label><br>
  383. </ng-container>
  384. </ion-col>
  385. <ion-col size="7">
  386. <ion-item class="ion-no-padding">
  387. <ion-label for="docNumber" position="floating">Nro. Documento</ion-label>
  388. <ion-input [formControl]="form.controls['docNumber']" type="text" maxlength="9" id="docNumber"
  389. data-checkout="docNumber" clearInput [class.invalid]="!form.controls['docNumber'].valid && submitAttempt">
  390. </ion-input>
  391. </ion-item>
  392. <ng-container *ngIf="!form.controls['docNumber'].valid && submitAttempt">
  393. <ion-label class="errorMsg">- No puede estar vac&iacute;o.</ion-label><br>
  394. <ion-label class="errorMsg">- No se permiten n&uacute;meros de menos de 7 d&iacute;gitos.</ion-label><br>
  395. <ion-label class="errorMsg">- No se permiten n&uacute;meros de m&aacute;s de 8 d&iacute;gitos.</ion-label>
  396. <br>
  397. </ng-container>
  398. </ion-col>
  399. </ion-row>
  400. <ion-row>
  401. <ion-col>
  402. <ion-item class="ion-no-padding">
  403. <ion-label for="amountSelected" position="stacked">Cargas de saldo disponibles</ion-label>
  404. <ion-select placeholder="Elegi un monto a cargar" [formControl]="form.controls['amountSelected']" class="select-full-width">
  405. <ion-select-option *ngFor="let amount of amounts" [value]="amount.id">
  406. {{amount.monto}}
  407. </ion-select-option>
  408. </ion-select>
  409. </ion-item>
  410. <ng-container *ngIf="!form.controls['amountSelected'].valid && submitAttempt">
  411. <ion-label class="errorMsg">- Debe seleccionar un monto a cargar.</ion-label><br>
  412. </ng-container>
  413. </ion-col>
  414. </ion-row>
  415. <ion-row>
  416. <ion-col size="3">
  417. <ion-button expand="block" color="danger" (click)="cancelar();">
  418. <ion-icon color="light" name="chevron-back"></ion-icon>
  419. </ion-button>
  420. </ion-col>
  421. <ion-col size="9">
  422. <ion-button expand="block" color="primary" (click)="realizarPago()">
  423. <b>Realizar Pago</b>
  424. </ion-button>
  425. </ion-col>
  426. </ion-row>
  427. </ion-grid>
  428. </form>
  429. </ion-content>
  430.  
  431.  
  432. //component.ts ==================================================================================================
  433.  
  434. import { Component, OnInit, Input, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
  435. import { MercadoPagoService } from '../services/cliente-tarjeta-mercadopago.service';
  436. import { FormBuilder, FormGroup, Validators } from '@angular/forms';
  437. import { PaymentData } from 'src/app/cliente/models/payment_data';
  438. import { analyzeAndValidateNgModules } from '@angular/compiler';
  439. import { ModalController } from '@ionic/angular';
  440. import { LoadingController } from '@ionic/angular';
  441. import { ToastController } from '@ionic/angular';
  442. import { LoginService } from 'src/app/auth/services/auth.service';
  443.  
  444. @Component({
  445. selector: 'app-saldo-tarjeta',
  446. templateUrl: '../views/cliente-tarjeta-saldo.html',
  447. styleUrls: ['../views/cliente-tarjeta-saldo.scss'],
  448. changeDetection: ChangeDetectionStrategy.OnPush
  449. })
  450. export class SaldoTarjetaComponent implements OnInit {
  451. form: FormGroup;
  452. public paymentMethod: any;
  453.  
  454. @Input('nro_tarjeta') nro_tarjeta: string;
  455.  
  456. amounts: any = [];
  457. amountSelected: any;
  458. submitAttempt = false;
  459.  
  460. cardNumber: string;
  461. cardHolder: string;
  462. expirationMonth: string;
  463. expirationYear: string;
  464. ccv: number;
  465.  
  466. showingBackside = false;
  467.  
  468. constructor(
  469. private detector: ChangeDetectorRef,
  470. public mercadoPagoService: MercadoPagoService,
  471. public modalController: ModalController,
  472. public loadingController: LoadingController,
  473. public toastController: ToastController,
  474. private loginService: LoginService,
  475. private fb: FormBuilder
  476. ) {
  477.  
  478. this.form = fb.group({
  479. email: ['', Validators.compose([
  480. Validators.required,
  481. Validators.email
  482. ])],
  483. cardNumber: ['', Validators.compose([
  484. Validators.required,
  485. Validators.minLength(16),
  486. Validators.maxLength(16),
  487. Validators.pattern('^[0-9]*$')
  488. ])],
  489. cardholderName: ['', Validators.compose([
  490. Validators.required,
  491. Validators.minLength(1),
  492. Validators.maxLength(30)
  493. ])],
  494. cardExpirationMonth: ['', Validators.compose([
  495. Validators.required,
  496. Validators.pattern('^[0-1][0-2]$')
  497. ])],
  498. cardExpirationYear: ['', Validators.compose([
  499. Validators.required,
  500. Validators.pattern('^20[1-9][0-9]$')
  501. ])],
  502. securityCode: ['', Validators.compose([
  503. Validators.required,
  504. Validators.pattern('^[0-9][0-9][0-9]$')
  505. ])],
  506. docType: ['DNI', Validators.required],
  507. docNumber: ['', Validators.compose([
  508. Validators.required,
  509. Validators.pattern('^(\\d{7,8})$')
  510. ])],
  511. paymentMethodId: ['', Validators.required],
  512. amountSelected: ['', Validators.required],
  513. token: ['']
  514. });
  515.  
  516. this.mercadoPagoService.amounts(this.loginService.usuario.numero_sala).subscribe((data: any) => {
  517. this.amounts = data.response;
  518. }, (error: any) => {
  519. console.log(error);
  520. });
  521.  
  522. }
  523.  
  524. ngOnInit() {
  525. this.mercadoPagoService.getIdentificationTypes();
  526. }
  527.  
  528. getBin() {
  529. const bin = document.querySelector('ion-input[data-checkout="cardNumber"]');
  530. return bin['value'].replace(/[ .-]/g, '').slice(0, 6);
  531. }
  532.  
  533. guessingPaymentMethod(e: any) {
  534. const bin = this.getBin();
  535. this.cardUpdater(e);
  536. if (bin.length >= 6) {
  537. const paymentMethod = this.mercadoPagoService.getPaymentMethod(bin);
  538. if (paymentMethod) {
  539. this.paymentMethod = paymentMethod[0];
  540. document.getElementById('cardName').innerHTML = this.paymentMethod.name;
  541. }
  542. }
  543. }
  544.  
  545. async realizarPago() {
  546. // indico que se estรก haciendo un submit del formulario
  547. this.submitAttempt = true;
  548. const form = this.form.getRawValue();
  549. if (this.form.valid) {
  550. // Activo el bloque de pantalla, para que el usuario sepa que se estรก procesando el pago
  551. this.showAutoHideLoader();
  552. // Esto se usa para poder generar el token sin problemas en varias cargas seguidas.
  553. this.mercadoPagoService.Mercadopago.clearSession();
  554. this.mercadoPagoService.Mercadopago.createToken(form, (status: any, response: any) => {
  555. if (response && status == 200) {
  556. const payment_data: any = {
  557. // tslint:disable-next-line: triple-equals
  558. transaction_amount: this.amounts.find(a => a.id == this.form.get('amountSelected').value).monto,
  559. token: response.id,
  560. description: 'Carga de Tarjeta desde Aplicacion',
  561. installments: 1,
  562. payment_method_id: this.paymentMethod.id,
  563. payer: { email: this.form.get('email').value },
  564. nro_tarjeta: this.nro_tarjeta
  565. };
  566.  
  567. this.mercadoPagoService.pago(payment_data).subscribe(
  568. rta => {
  569. if (rta.success) {
  570. const indice = this.loginService.usuario.cliente.tarjetas.findIndex(r => r.nro_tarjeta === rta.tarjetaAct.nro_tarjeta);
  571. this.loginService.usuario.cliente.tarjetas[indice] = rta.tarjetaAct;
  572. this.hideLoader();
  573. this.modalController.dismiss({
  574. 'success': true
  575. });
  576. this.presentToast('Carga realizada', true);
  577.  
  578. } else {
  579. this.hideLoader();
  580. this.presentToast('Error al realizar la carga', false);
  581. }
  582. },
  583. error => {
  584. this.hideLoader();
  585. this.presentToast('Error al realizar la carga', false);
  586. }
  587. );
  588. return response;
  589. } else {
  590. console.log(response);
  591. alert('Disculpe, pero no se pudo realizar el pago');
  592. return null;
  593. }
  594. });
  595. } else {
  596. return null;
  597. }
  598. }
  599.  
  600. cancelar() {
  601. this.modalController.dismiss({
  602. 'success': false
  603. });
  604. }
  605.  
  606.  
  607. cardUpdater(e) {
  608. console.log(e.srcElement.id);
  609. switch (e.srcElement.id) {
  610. case 'cardNumber':
  611. this.cardNumber = e.detail.value;
  612. break;
  613. case 'cardholderName':
  614. this.cardHolder = e.detail.value;
  615. break;
  616. case 'cardExpirationMonth':
  617. this.expirationMonth = e.detail.value;
  618. break;
  619. case 'cardExpirationYear':
  620. this.expirationYear = e.detail.value;
  621. break;
  622. case 'securityCode':
  623. this.ccv = e.detail.value;
  624. break;
  625. }
  626. this.detector.detectChanges();
  627. }
  628.  
  629. flipCard(desired_side: String) {
  630. if (desired_side === 'back') {
  631. this.showingBackside = true;
  632. } else {
  633. this.showingBackside = false;
  634. }
  635. }
  636. showAutoHideLoader() {
  637. this.loadingController.create({
  638. message: 'Registrando pago'
  639. }).then((res) => {
  640. res.present();
  641. });
  642. }
  643. hideLoader() {
  644. this.loadingController.dismiss();
  645. }
  646.  
  647. async presentToast(message: string, success: boolean) {
  648. const color = success ? 'success' : 'danger';
  649. this.toastController.create({
  650. message: message,
  651. duration: 2000,
  652. color: color,
  653. // ! showCloseButton: true
  654. }).then(toast => {
  655. toast.present();
  656. });
  657. }
  658.  
  659. }
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!