Zenkipay for Angular 14

• Zenkipay for Angular 14
  • Installation
  • Usage
    • zenkipay-button-2 component
    • Zenkipay2Service provider
  • Entity definitions
    • Styles
    • ZenkipayOptions
    • ZenkipayData
  • Example

Installation

npm i @zenkipay-pkg/angular@14

Important: In our dependencies we use the version of rxjs that uses the version of Angular selected, if your version of rxjs is not the one that comes by default with your version of Angular it may give you some errors of compatibility, you can try between versions according to your version of rxjs.

Usage

Adds Zenkipay2Module to your Angular module.

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

After that, yo can use own zenkipay-button-2 component or own Zenkipay2Service provider:

zenkipay-button-2 component

You can use it inputs and it output.

The next table explains available inputs:

| Input | Type | Description | | :---- | :---------------------------------- | :---------------------------------------------- | | data | ZenkipayOptions | Required, it must contains payment details. | | style | Style2 | Optional, it modifies the styles of the button. |

The next table explains available outputs:

| Output | Type | Description | | :----- | :---------------------------- | :---------------------------------- | | events | ZenkipayData | It emits each update of the payment | | error | Error | It emits when there are an error |

Zenkipay2Service provider

You can inject Zenkipay2Service provider in your components/providers.

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

  public closeModal(): Observable<boolean>;
}

Entity definitions

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!: ConfirmingMsg | DoneMsg | null;
}

enum POST_MSG_TYPE {
  CANCEL = 'cancel',
  DONE = 'done',
  CLOSE = 'close',
  ERROR = 'error',
  PROCESSING_PAYMENT = 'processing_payment',
  SHOPPER_PAYMENT_CONFIRMATION = 'shopper_payment_confirmation',
}

class ConfirmingMsg {
  transaction!: MsgTrxDetails;
}

class DoneMsg extends ConfirmingMsg {
  orderId!: string;
}

Example

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 = {
    paymentSignature: 'SET_YOUR_PAYMENT_SIGNATURE_HERE',
    orderId: 'SET_YOUR_ORDER_ID_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);
        })
    );
  }
}