Angular

In your Angular project, install the appropriate version of @zenkipay-pkg/angular, for this you can check the list of versions here.

For the most current version, run in a terminal in the root directory of our project:

npm i @zenkipay-pkg/angular

Important: In our dependencies we use the version that uses the selected version of Angular, if your version of is not the one that rxjs brings by default your version of Angular may give you some compatibility errors, for this you can go testing between versions according to your version of rxjs rxjs.

Since you have our dependency installed, proceed to add it to our Angular module. Here's an example:

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 {}

Once installed and configured our module, you have at your disposal the use of the component zenkipay-button-2 that inserts the payment button and our service Zenkipay2Service that allows you to open the payment Zenkipay modal. This component and service will be described below:

Zenkipay-button-2 component

The selector of our component is zenkipay-button-2, it has a series of inputs and outputs, described in the following tables:

Servicio Zenkipay2Service

You can inject it into the builder of your components/services like any other Angular service, the definition of its methods appears below:

declare class Zenkipay2Service {
  public openModal(options: ZenkipayOptions): Observable<ZenkipayData>;

  public closeModal(): Observable<boolean>;
}

openModal method

With this method you can open the modal to make a payment, for this you need to pass as a parameter an object of type ZenkipayOptions, it returns an observable that can emit several events of type ZenkipayData, so we advise you to save the reference of that subscription and unsubscribe as soon as the process of that particular payment is finished.

closeModal method

With this method you can close the modal, it returns an observable that emits a Boolean value, only emits one event and the observable is closed, so in this case it is not necessary to close its subscription.

Defining entities

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

Examples

Below is an example of how you can use our component and service:

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