id-payment

v1.0.17-alpha

Published

3 months ago

[![NPM Version](https://img.shields.io/npm/v/id-payment.svg)](https://www.npmjs.com/package/id-payment) [![License](https://img.shields.io/npm/l/id-payment.svg)](https://github.com/yourusername/id-payment/blob/master/LICENSE)

Downloads

225

0High
0Medium
0Low

getglobal

ID Payment

Componente Angular para integración de pagos en aplicaciones web de forma sencilla y segura.

Requisitos Previos

Angular 14.0.0 o superior
Node.js 16.0.0 o superior
Cuenta en ID Payment (website.com)

Instalación

npm install id-payment

Configuración

Módulo Angular

import { IdPaymentModule } from 'id-payment';

@NgModule({
  imports: [IdPaymentModule]
})
export class AppModule { }

Componente Standalone

import { IdPaymentComponent } from 'id-payment';

@Component({
  imports: [IdPaymentComponent]
})

Uso

Implementación Básica

<id-payment 
  [token]="paymentToken"
  [amount]="totalAmount"
  (result)="handlePaymentResult($event)">
</id-payment>

API

Propiedades de Entrada

| Propiedad | Tipo | Requerido | Descripción | |------------|--------|-----------|--------------------------------| | token | string | Sí | Token de autorización | | amount | number | Sí | Monto a pagar | | commerce | string | No | Nombre del comercio | | concept | string | No | Concepto de la transacción | | nit | string | No | NIT del comercio |

Eventos de Salida

| Evento | Tipo | Descripción | |---------|-------------------------------------------|------------------------| | result | {status: string, transactionId: string} | Resultado del pago |

Flujo de Pago

Ingreso de datos del usuario (documento, nombre, contacto)
Validación de datos
Procesamiento en servidores ID Payment
Transacción bancaria
Respuesta del proceso (estado 1: aprobado, 1000: rechazado)

Despliegue

Compilar el proyecto:

ng build

Iniciar sesión en npm:

npm login

Configurar package.json:

{
  "name": "id-payment",
  "version": "0.0.7-alpha"
}

Generar versión:

npm version 0.0.7-alpha

El alpha indica que es una versión preliminar. Cambia a beta o release según corresponda.

Publicar:

npm publish

Uso en html

Para el uso en html puedes usar el siguiente código:

  <!DOCTYPE html>
<html>
<head>
  <title>Chalets</title>
  <!-- Importar el script del componente -->
  <script src="https://unpkg.com/id-payment/bundle.js" type="module"></script>
</head>
<body>
  <div id="loading">Cargando componente...</div>
  <div id="result"></div>

  <!-- Usar el componente como un elemento web -->
  <id-payment token="token" nit="901227175" [amount]="100" commerce="IDPAY" url="https://mipatito.com" concept="Pago de chalet"></id-payment>

  <script type="module">
    // Esperar a que el componente esté definido
    if (!customElements.get('id-payment')) {
      customElements.whenDefined('id-payment').then(() => {
        console.log('Componente id-payment registrado correctamente');
        document.getElementById('loading').style.display = 'none';

        const paymentComponent = document.querySelector('id-payment');

        // Escuchar el resultado del pago
        paymentComponent.addEventListener('result', (e) => {
          console.log('Payment initiated');
          console.log(e.detail);
        });
      }).catch(error => {
        console.error('Error al cargar el componente:', error);
        document.getElementById('loading').textContent = 'Error al cargar el componente';
      });
    }
  </script>
</body>
</html>

Licencia

MIT - Ver LICENSE para más detalles.