ngx-pagos24 v0.4.10

ngx-pagos24

ngx-pagos24 is the library for Angular so you can make payments on our platform. This library has all the necessary tools so that your application can use our services.

Table of Contents

1. Installation
2. Usage
3. Login User
4. Connect User
5. Payment
6. QR Code
7. Log Out
8. Contributing

Installation

    npm install ngx-pagos24 --save

Usage

We import the pagos24 module into our NgModule and put the required parameters in the forRoot:

    ...
    import { Pagos24Module } from 'ngx-pagos24';

    @NgModule({
        imports: [
            ...,
            Pagos24Module.forRoot({
            token: 'tokenExample',
            appId: 'appIdExample',
            email: 'example@example.com',
            secretKey: 'example',
            projectUrl: 'Example Name'
            }),
        ],
        bootstrap: [AppComponent],
    })
    export class AppModule {}

init Pagos24

To obtain the data of a Pagos24 user, you must connect to our platform and thus we will provide you with the necessary data to carry out different operations. It is done as follows:

    ...
    import { AuthService, ELanguageType } from 'ngx-pagos24';

    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.scss'],
    })
    export class AppComponent implements OnInit {

        constructor(private authService: AuthService) {}

        ngOnInit() {
            this.authService.init(ELanguageType.enUS).subscribe(result => {
                ...
            });
        }
    }

The function will return undefined if there is no Pagos24 user. If a user has already been logged in previously and has not logged out, the logged in user will return.

Login User

To be able to use a user's data, you must first log in. This is possible with the following function:

    ...
    import { AuthService, ELanguageType, ELoginMode } from 'ngx-pagos24';

    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.scss'],
    })
    export class AppComponent implements OnInit {

        constructor(private authService: AuthService) {}

        ngOnInit() {
            this.authService.login(ELanguageType.enUS, ELoginMode.Window).subscribe(result => {
                ...
            });
        }

        public logOut(): void {
            this.authService.logOut();
        }
    }

Connect User

To obtain the credit cards affiliated with a Pagos24 user, you must connect with him as follows:

import { PaymentService } from 'ngx-pagos24';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {

    constructor(private paymentService: PaymentService) {}

    ngOnInit() {
        this.paymentService.connectUser(user).subscribe((resp) => ...);
    }
}

It is recommended to use this function just after logging in with a user

interface IUserConnect {
  avatar: string;
  email: string;
  error: number;
  fullname: string;
  lang: ELanguageType;
  qr: string;
  user_id: string;
}

Payment

There are mainly three methods to make a payment through Pagos24: By credit card (affiliated to Pagos24), by points and by balance of Pagos24. The way to use the payment function is as follows:

    ...
    import { PaymentService } from 'ngx-pagos24';

    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.scss'],
    })
    export class AppComponent implements OnInit {

        constructor(private authService: AuthService) {}

        ngOnInit() {
            this.paymentService.payment(EpaymentType.BinCash, {
                amount: 25,
                language: ELanguageType.EnUS,
                payerEmail: 'example@example.com',
                OTPago: '123456'
            })
            .subscribe(result => {
                ...
            });
        }
    }

// Params interface
interface IPaymentParams {
  payerEmail: string;
  amount: number;
  OTPago: number;
  language: ELanguageType;
  creditCardNumber?: string;
}

QR Code

There is the possibility of paying through the Pagos24 mobile application by reading a QR code. With the library you can also show that code and give the possibility of paying more easily

1.- We import the QR code module that is inside the Pagos24 library

import { Pagos24Module, QRCodeModule } from 'ngx-pagos24';

@NgModule({
  declarations: [AppComponent],
  imports: [
    ...,
    QRCodeModule
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

2.- We generate the QR code with the Pagos24 service function

import { PaymentService } from 'ngx-pagos24';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {

    constructor(private paymentService: PaymentService) {}

    public generateQRCode(): void {
        this.paymentService.generateQRCode(100.5).subscribe((QRCode: string) => ...);
    }
}

3.- We use the Pagos24 QR code component in the template

<p24-qrcode *ngIf="qrCode" [qrdata]="QRCode" [width]="500"></p24-qrcode>

Log Out

There is a function to log out the current user

import { AuthService } from "ngx-pagos24";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent implements OnInit {
  constructor(private authService: AuthService) {}

  public logOut(): void {
    this.authService.logOut();
  }
}

This function will erase the current user data

License

MIT