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: '[email protected]',
            secretKey: 'example',
            projectUrl: 'Example Name'
            }),
        ],
        bootstrap: [AppComponent],
    })
    export class AppModule {}

| Parameter | Description | | ---------- | --------------------------------------------------------------------------------------------------------------- | | token | Token generated in the account settings on the website | | appId | Self-generated on the website | | email | Email with which you login to the pagos24 application | | secretKey | Secret key generated by the user in the application or web page | | projectUrl | Name of the project that will integrate the pagos24 module | | sandbox | Specifies if the library is in test or production mode (Recommended to use true if the library is being tested) |

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.

| Parameter | description | type | | --------- | ------------------------------------------------------ | -------------------------------------------------------------- | | language | Language in which the window will be opened (required) | ELanguageType.enUS ELanguageType.esVE ELanguageType.ptBR |

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

| Parameter | description | type | | ----------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | | language | Language in which the window will be opened (required) | ELanguageType.enUS (english) ELanguageType.esVE (spanish) ELanguageType.ptBR (portuguese) | | mode | Login opening mode | ELoginMode.Window ELoginMode.Redirect | | redirectUrl | Url to which the login will be directed after logging in a user (optional) | string |

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

| Parameter | description | type | | --------- | ---------------------------------------- | ------------ | | user | User from whom the data will be obtained | IUserConnect |

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: '[email protected]',
                OTPago: '123456'
            })
            .subscribe(result => {
                ...
            });
        }
    }

| Parameter | Description | type | | ------------- | ---------------------------------------------------------------- | ---------------------------------------------------------------------- | | paymentType | The type of payment that will be made through Pagos24 (required) | EpaymentType.BinCash EpaymentType.CreditCard EpaymentType.Points | | paymentParams | The parameters required to make a payment (required) | IPaymentParams |

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

| Parameter | Description | type | | ---------------- | ----------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | | payerEmail | Email of the user who is going to pay (required) | string | | amount | Amount to be paid by the user (required) | number | | pin | User payment pin (required) | number | | language | User language (required) | ELanguageType.enUS ELanguageType.esVE ELanguageType.ptBR | | creditCardNumber | Required to pay by credit card, data that comes when connecting with the user. Required when paying by credit card (opcional) | 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) => ...);
    }
}

| Parameter | Description | type | | ------------- | ----------------- | -------- | | paymentAmount | Amount to be paid | number |

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