NgxNiubiz

Integrar la pasarela de pago de Niubiz para Pago Web, con boton de pago mas facil y rapido con esta libreria. Desarrollada para proyectos en Angular.

Instalación

Con NPM:

npm install ngx-niubiz

Con Yarn:

yarn add ngx-niubiz

Uso

Para utilizar la librería, agrega los siguientes datos en tu componente:

import { Component, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { NgxNiubizComponent, DataMap } from 'ngx-niubiz';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet,
  ],
  providers: [],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements OnInit {
  title = 'demo';

  ipAddress!: string;
  @ViewChild('paymentContainer', { read: ViewContainerRef }) paymentContainer!: ViewContainerRef;

  // OBJETO DE DATOS (Opcional)
  dataMap: DataMap = {
    'cardholderCity': "Lima",
    'cardholderCountry': "PE",
    'cardholderAddress': "Av Jose Pardo 831",
    'cardholderPostalCode': "12345",
    'cardholderState': "LIM",
    'cardholderPhoneNumber': "982217786"
  }

  constructor(
    // private ngxNiubizService: NgxNiubizService,
    private resolver: ViewContainerRef
  ) { }

  async ngOnInit(): Promise<void> {
    
    const factory = this.resolver.createComponent(NgxNiubizComponent);
    const componentRef = factory;
    // Objeto de Authenticación 
    componentRef.instance.authentication = 'Bearer ' + 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiYWRtaW5pc3RyYXRvciIsImV4cCI6MTcyOTIwMjE0NSwiaXNzIjoiaHR0cHM6Ly95b3VyZG9tYWluLmNvbSIsImF1ZCI6Imh0dHBzOi8vYXBpLnlvdXJkb21haW4uY29tIn0.7ifpy_szIzIUCUiEoe_t0jnaD9gpWcUqnjTYz6P9JzM'
    componentRef.instance.urlToken = 'http://localhost:5135/api/payment/niubiz/gettoken'
    componentRef.instance.urlAuthorization = 'http://localhost:5135/api/payment/niubiz/authorization'
    componentRef.instance.merchantId = 456879852; // COLOCAR MARCHANT ID
    componentRef.instance.amount = 30.33; // COLOCAR MONTO A APAGAR
    componentRef.instance.dataMap = this.dataMap;
    componentRef.instance.purchasenumber = "2020100901";
    componentRef.instance.developerMode = true; // Colocar  TRUE o FALSE para ver logs 
    componentRef.instance.redirect_url = 'http://localhost:4200/' // URL DE AUTORIZACION

    // Suscribirse al evento onSuccess
    componentRef.instance.onSuccess.subscribe(() => {
      console.log('Se ejecuto el success');
    });
    componentRef.instance.onFailed.subscribe(() => {
      console.log('Se ejecuto el onFailed');
    });
  }

}

Nota

Es recomendable concatenar la URL con un identificador de tu transacción ya que posteriormente deberás implementar el servicio de autorización del pago, tambien este componente trabaja con la libreria desarrollada en c# por DLP CONSULTING EIRL, para mas informacion contactar a Antonio de la Paz [e-mail].

Documentación Oficial de Niubiz

Puedes encontrar la documentación oficial para desarrollar tu propia librería en la página oficial de Niubiz.

Desarrolladores

Desarrolladores

Desarrollado por : Antonio de la Paz
DLP CONSULTING EIRL

Colaboración

Si quiere colaborar con nosotros puedes hacerlo aqui.