NPM NGX SDK PRIDES PAYMENT GATEWAY

THIS PROJECT CONSISTS OF AN SDK TO RENDER A PAYMENT GATEWAY IN ANGULAR

Documentation

REQUIREMENTS

• Angular 17 or higher versions
• It must be implemented with modular architecture or within a module in Angular

LIBRARY INSTALLATION

• Navigate to the root of your Angular project and run the following command: npm install ngx-prides-payment-gateway

LIBRARY CONFIGURATION

• In your root module, or the module where you will use the application, you must import the following resource PaymentModule
• Also, import the library registerSwiperElements and invoke the method in the module registerSwiperElements()

LIBRARY CONFIGURATION - STYLES

• The library depends on styles for toastr notifications; these are installed with the library but must be configured.

To avoid style issues, configure the following: For the styles file, copy the following lines and paste them into the style file of the component that uses the library. If the component does not have a style file, create one.

@import 'ngx-toastr/toastr';

body{
    font-family: Arial, Helvetica, sans-serif
}

/* Order */
@layer reset;

/* Reset CSS */
@layer reset {
    button {
        background: none;
        border: none;
        color: inherit;         
    }
    li {
        list-style-type: none;
        margin: 0; 
        padding: 0; 
        outline: none;
    }
     
    input[type="radio"] {
        appearance: none; 
        background-color: transparent;
        border: 2px solid #ccc; 
        border-radius: 50%;         
        cursor: pointer;
        outline: none; 
        position: relative;
    }

    input[type="radio"]:checked {
        background-color: #005a9c;
        border-color: #005a9c;
    }

    input[type="radio"]:focus {
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5); 
    }
    
    input[type="radio"]:checked::before {
        content: '';
        position: absolute;
        top: 3px; 
        left: 3px;
        width: 10px;
        height: 10px;
        background-color: white;
        border-radius: 50%; 
    }    
}

LIBRARY USAGE

• To use the library, use the component with app-payment-principal, and pass it the [merchantPayTranxInfo] property.
• You can create this property in your component class and declare it as type IMerchantPayTranxInfo, this type is also imported from ngx-prides-payment-.
• The only mandatory value to pass is amount, and companyId should be initialized as empty. However, it is recommended to pass the other values.

List of interface values: - transactionId?: string - companyId?: string; (send as an empty string) - referenceNumber?: string; (not required) - transactionStart?: string; (not required) - transactionEnd?: string; (not required) - amount: number; (required) - externalTransactionId?: string; (not required) - detailTransaction?: string; (not required) - customer?: string; (not required) - phoneNumber?: string; (not required) - status?: string; (not required) - responseCode?: string; (not required) - redirectUrl?: string; (not required) //This field is for redirection destination after completing the order

EXAMPLE USAGE

1. In the main module, or where you will use the application, import the payment module and registerSwiperElements.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { PaymentModule } from 'ngx-prides-payment-gateway';
import { register as registerSwiperElements } from 'swiper/element/bundle';
import { HttpClientModule } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';


registerSwiperElements(); 

@NgModule({
  declarations: [AppComponent],
  imports: [    
    RouterModule,    
    CommonModule,  
    BrowserModule,            
    BrowserAnimationsModule,    
    HttpClientModule,    
    PaymentModule  
  ],  
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Then choose the component where you will use it, in the HTML do the following:

<app-payment-principal [merchantPayTranxInfo]="merchantPayTranxInfo"></app-payment-principal>

and in the .ts we do the following:

import { Component } from '@angular/core';
//This interface is important, remember import to use as merchantPayTranxInfo type
import { IMerchantPayTranxInfo } from 'ngx-prides-payment-gateway' 

@Component({
  selector: 'app-root',    
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})

export class AppComponent {
  title = 'test-app';
  merchantPayTranxInfo : IMerchantPayTranxInfo={
    amount : 2000
  }
}

In the class above what you do is give the data to create the order, you must necessarily enter the amount.

Once the component has the order information loaded, it proceeds to deploy the payment gateway.

You can control the display of the gateway with an *ngIf in case you want to control it manually.

API Reference - Services

FbAccountBankServiceService

 getAccountBanks(): Observable<IAccountBankItem[]>

Obtains the list of banks that can provide the SINPE service, the data is modeled with IAccountBankItem that tests the list of elements with the following values:

 Enabled: boolean,
 Id: string,
 Image: string,
 Name: string,
 PhoneReceiver : number

OrderService - CREATE ORDER

createOrder(orderData:ICreateOrderRequest): Observable<IBaseApiResponse<ICreateOrderResponse>>

Create the order, review the data parameters to create the order, and the response is of type IBaseApiResponse that indicates the status of the request, and ICreateOrderResponse that returns important data for the subsequent validation process.

 *Parameters*
 transactionId?: string;
 companyId?: string;
 referenceNumber?: string;
 transactionStart?: string;
 transactionEnd?: string;
 amount: number;
 externalTransactionId?: string;
 detailTransaction?: string;
 customer?: string;
 phoneNumber?: string;
 status?: string;
 responseCode?: string;
 -----------------------
 *Answer*
 --generic--
 response: IBaseResponseMessage;
 definition: T;
 --definition--
 transactionId : string, **save it for future reference by other services**
 amount: number,
 companyId : string **save it for future reference by other services**

OrderService - VALIDATE ORDER

validateOrder(orderData:IValidateOrderRequest): Observable<IBaseApiResponse<IValidateOrderResponse>>

It is used to validate the created order, basically it is consulted because it is necessary to verify if the SINPE has already been carried out correctly in the order

note: dataAPI would be the response when doing the subscribe Validate first that the validation was successful on the response, with dataAPI.response.success

Next, you must validate in your business logic that dataAPI.response.success.responseCode is equal to PP-201, if it is PP-200 it must indicate that it has not yet been validated, and if it is different from 200 and 201, to indicate that the order was not valid, it can be supported by the following codes:

• Ok = 'PP-200',
• Created = 'PP-201',
• Unauthorized = 'PP-401', -NotFoundData = 'PP-404',
• ProviderTimeOut = 'PP-408', -InvalidAmount = 'PP-409',
• ServerError = 'PP-500',

 *Parameters*
 transactionId?: string;
 companyId?: string;
 referenceNumber?: string;
 transactionStart?: string;
 transactionEnd?: string;
 amount: number;
 externalTransactionId?: string;
 detailTransaction?: string;
 customer?: string;
 phoneNumber?: string;
 status?: string;
 responseCode?: string;
 -----------------------
 *Answer*
 --generic--
 response: IBaseResponseMessage;
 definition: T;
 --IBaseResponseMessage--
 success: boolean;
 message: string;
 --definition--
 transactionId : string,
 amount : number

OrderService - REVALIDATE ORDER

revalidateOrder(orderData:IValidateOrderRequest): Observable<IBaseApiResponse<IValidateOrderResponse>>

It is used to revalidate the created order, basically it is consulted because it is necessary to verify if the SINPE has already been carried out correctly in the order

note: should be used only if validate was run and failed

note: dataAPI would be the response when doing the subscribe Validate first that the validation was successful on the response, with dataAPI.response.success

Next, you must validate in your business logic that dataAPI.response.success.responseCode is equal to PP-201, if it is PP-200 it must indicate that it has not yet been validated, and if it is different from 200 and 201, to indicate that the order was not valid, it can be supported by the following codes:

• Ok = 'PP-200',
• Created = 'PP-201',
• Unauthorized = 'PP-401', -NotFoundData = 'PP-404',
• ProviderTimeOut = 'PP-408', -InvalidAmount = 'PP-409',
• ServerError = 'PP-500',

 *Parameters*
 transactionId?: string;
 companyId?: string;
 referenceNumber?: string;
 transactionStart?: string;
 transactionEnd?: string;
 amount: number;
 externalTransactionId?: string;
 detailTransaction?: string;
 customer?: string;
 phoneNumber?: string;
 status?: string;
 responseCode?: string;
 -----------------------
 *Answer*
 --generic--
 response: IBaseResponseMessage;
 definition: T;
 --IBaseResponseMessage--
 success: boolean;
 message: string;
 --definition--
 transactionId : string,
 amount : number

FbPaymentTransactionService

getById(id: string): Observable<IPaymentTranx | null>

It will be used to have a listener that is listening to the status of the order, it can optionally be used to validate the status of the API

note: should be used only if validate was run and failed

Responds an object that has the ResponseCode property, which contains the following codes:

• Ok = 'PP-200',
• Created = 'PP-201',
• Unauthorized = 'PP-401', -NotFoundData = 'PP-404',
• ProviderTimeOut = 'PP-408', -InvalidAmount = 'PP-409',
• ServerError = 'PP-500',

You must validate in your business logic that dataAPI.response.success.responseCode is equal to PP-201, if it is PP-200 it must indicate that it has not yet been validated, and if it is different from 200 and 201, it must indicate that the order was not valid.

 *Parameters*
 id: string, TranxId obtained when creating the order
 -----------------------
 *Answer*
 amount: number;
 CompanyId: string;
 Customer: string;
 DetailTransaction: string;
 ExternalTransactionId: string;
 PhoneNumber: string;
 ResponseCode: string;
 Status: string;
 TransactionEnd: string;
 TransactionId: string;
 TransactionStart: string;