Pra3t0r5

Untitled

May 6th, 2020
70
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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. }
RAW Paste Data