ngx-niubiz/README.md

Pasarela de pago Niubiz.

# 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 [delapaz87@yahoo.es](mailto:delapaz87@yahoo.es).


# 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](https://desarrolladores.niubiz.com.pe/docs/bot%C3%B3n-de-pago-1#4%EF%B8%8F%E2%83%A3-solicitar-autorizaci%C3%B3n-de-transacci%C3%B3n)

# Desarrolladores
Desarrollado por : Antonio de la Paz <br>
DLP CONSULTING EIRL

# Colaboración 

Si quiere colaborar con nosotros puedes hacerlo aqui.

<a href="https://www.buymeacoffee.com/delapaz87c" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>