@zenkipay-pkg/angular
TypeScript icon, indicating that this package has built-in type declarations

14.2.8 • Public • Published

Zenkipay for Angular 14


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

Readme

Keywords

none

Package Sidebar

Install

npm i @zenkipay-pkg/angular

Weekly Downloads

0

Version

14.2.8

License

none

Unpacked Size

322 kB

Total Files

82

Last publish

Collaborators

  • chava23
  • ivan-zenki
  • zenkipay