Angular

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:

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);
        })
    );
  }
}