- 08 Feb 2023
- OscuroLigero
Angular
- Actualizado en 08 Feb 2023
- OscuroLigero
En tu proyecto Angular, instala la versión adecuada de @zenkipay-pkg/angular, para ello puedes revisar la lista de versiones aquí.
Para la versión más actual, ejecuta en una terminal en el directorio root de nuestro proyecto:
npm i @zenkipay-pkg/angular
Importante: En nuestras dependencias usamos la versión de rxjs
que usa la versión de Angular seleccionada, si tu versión de rxjs
no es la que trae por defecto tu versión de Angular puede que te dé algunos errores de compatibilidad, para ello puedes ir probando entre versiones acorde a tu versión de rxjs
.
Ya que tienes instalada nuestra dependencia, procede a agregarlo a nuestro módulo de Angular. A continuación se muestra un ejemplo:
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { Zenkipay2Module } from "@zenkipay-pkg/angular";
import { AppComponent } from "./app.component";
@NgModule({
bootstrap: [AppComponent],
declarations: [AppComponent],
imports: [
BrowserModule,
Zenkipay2Module,
],
})
export class AppModule {}
Una vez instalado y configurado nuestro módulo, tienes a tu disposición el uso del componente zenkipay-button-2
que inserta el botón de pago de Zenkipay
y nuestro servicio Zenkipay2Service
que te permite abrir la modal de pago. Dicho componente y servicio serán descritos a continuación:
Componente zenkipay-button-2
El selector de nuestro componente es zenkipay-button-2
, éste cuenta con una serie de entradas y salidas, descritas en las siguientes tablas:
Entrada | Tipo | Descripción |
---|---|---|
data | ZenkipayOptions | Requerido, este objeto contiene la información necesaria para realizar un pago. |
style | Style2 | Opcional, configura los estilos visuales de tu botón. |
Salida | Tipo | Descripción |
---|---|---|
events | ZenkipayData | Este emite cada actualización del proceso de pago. |
error | Error | Emite un evento cuando ocurre un error, así como su detalle. |
Servicio Zenkipay2Service
Puedes inyectarlo en el constructor de tus componentes/servicios como cualquier otro servicio de Angular, la definición de sus métodos aparece a continuación:
declare class Zenkipay2Service {
public openModal(options: ZenkipayOptions): Observable<ZenkipayData>;
public closeModal(): Observable<boolean>;
}
Método openModal
Con este método puedes abrir la modal para realizar un pago, para ello necesitas pasarle como parámetro un objeto de tipo ZenkipayOptions, éste retorna un observable que puede emitir varios eventos de tipo ZenkipayData, por ello aconsejamos que se guarde la referencia de esa subscripción y se desuscriba en cuanto termine el proceso de ese pago en particular.
Método closeModal
Con este método puedes cerrar la modal, éste retorna un observable que emite un valor booleano, sólo emite un evento y se ciera el observable, por eso en este caso no es necesario que cierre su subscripción.
Definición de entidades
Styles
class Style2 {
theme?: Theme2;
size?: Size2;
shape?: Shape2;
expand?: Expand;
type?: Type;
colors?: Colors;
}
type Theme2 = 'default' | 'orange' | 'purple' | 'dark';
type Size2 = 'default' | 'sm';
type Shape2 = 'default' | 'pill';
type Expand = 'default' | 'block';
type Type = 'default' | 'cryptos';
class Colors {
background?: string;
border?: string;
font?: string;
}
ZenkipayOptions
class ZenkipayOptions {
orderId!: string;
paymentSignature!: string;
}
ZenkipayData
class ZenkipayData {
postMsgType!: POST_MSG_TYPE;
isCompleted!: boolean; // It's `true` when modal is closed
data!: DoneMsg | null;
}
enum POST_MSG_TYPE {
CANCEL = 'cancel',
DONE = 'done',
CLOSE = 'close',
ERROR = 'error',
PROCESSING_PAYMENT = 'processing_payment',
}
class DoneMsg {
orderId!: string;
}
Ejemplos
A continuación se muestra un ejemplo de cómo puedes usar nuestro componente y nuestro servicio:
app.component.html
<zenkipay-button-2
[data]="data"
[style]="style"
(events)="events($event)"
(error)="error($event)"
></zenkipay-button-2>
<button (click)="payWithZenkipay()">Pay with Zenkipay</button>
app.component.ts
import { Component, OnDestroy } from '@angular/core';
import {
Style2,
Zenkipay2Service,
ZenkipayData,
ZenkipayOptions,
} from '@zenkipay-pkg/angular';
import { catchError, filter, Observable, of, Subscription } from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnDestroy {
private readonly _subscriptions: Subscription[] = [];
public style: Style2 = { shape: 'pill' };
public data: ZenkipayOptions = {
orderId: 'SET_YOUR_ZENKI_ORDER_ID_HERE',
paymentSignature: 'SET_YOUR_PAYMENT_SIGNATURE_HERE',
};
constructor(private readonly _zenkipayService: Zenkipay2Service) {}
public ngOnDestroy(): void {
for (let i = 0; i < this._subscriptions.length; i++) {
this._subscriptions[i].unsubscribe();
}
}
public events(data: ZenkipayData): void {
console.log(data);
}
public error(error: Error): void {
console.error(error);
}
public payWithZenkipay(): void {
this._subscriptions.push(
this._zenkipayService
.openModal(this.data)
.pipe(
catchError((error: Error): Observable<null> => {
console.error(error);
return of(null);
}),
filter(Boolean)
)
.subscribe((data: ZenkipayData): void => {
console.log(data);
})
);
}
}