- 08 Feb 2023
- DarkLight
Angular
- Updated on 08 Feb 2023
- DarkLight
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:
Entry | Type | Description |
---|---|---|
date | ZenkipayOptions | Required, this object contains the information required to make a payment. |
style | Style2 | Optional, configure the visual styles of your button. |
Output | Type | Description |
---|---|---|
Events | ZenkipayData | It issues every update to the payment process. |
error | Error | It emits an event when an error occurs, as well as its detail. |
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);
})
);
}
}