💳 DiinPay Button Widget

Un widget JavaScript simple y ligero para integrar pagos de DiinPay en cualquier sitio web. Compatible con todos los frameworks y tecnologías web.

🚀 Características

• ✅ Ultra simple: Solo una línea de JavaScript para integrar
• ✅ Framework agnóstico: Funciona con React, Vue, Angular, o HTML puro
• ✅ Responsive: Se adapta automáticamente a cualquier dispositivo
• ✅ Personalizable: Estilos y comportamiento completamente customizables
• ✅ Seguro: Genera hash de parámetros para proteger la integridad del pago
• ✅ Sin dependencias: No requiere jQuery u otras librerías

📦 Instalación

Opción 1: NPM (Recomendado)

npm install diinpay-button

// ES Modules
import 'diinpay-button';

// CommonJS
require('diinpay-button');

// Usar después de importar
DiinPay.createButton({...});

Opción 2: CDN (jsDelivr)

<script src="https://cdn.jsdelivr.net/npm/diinpay-button@latest/dist/diinpay-button.min.js"></script>

Opción 3: CDN (unpkg)

<script src="https://unpkg.com/diinpay-button@latest/dist/diinpay-button.min.js"></script>

Opción 4: Descarga local

1. Descarga diinpay-button.min.js desde GitHub Releases
2. Inclúyelo en tu página:

<script src="path/to/diinpay-button.min.js"></script>

🎯 Uso Básico

Método 1: Atributos HTML (Más Simple)

<div data-diinpay-button
     data-hash="eyJ0eXBlIjoicGF5bWVudCIsImFtb3VudCI6MjUuOTl9"
     data-environment="prod"
     data-button-text="Comprar Ahora">
</div>

Método 2: JavaScript (Más Control)

<div id="mi-boton-pago"></div>

<script>
DiinPay.createButton({
    container: '#mi-boton-pago',
    hash: 'eyJ0eXBlIjoicGF5bWVudCIsImFtb3VudCI6OTkuOTl9',
    environment: 'prod',
    buttonText: 'Suscribirse'
});
</script>

⚙️ Parámetros de Configuración

| Parámetro | Tipo | Requerido | Descripción | |-----------|------|-----------|-------------| | container | string | ✅ | Selector CSS del contenedor | | hash | string | ✅ | Hash de pago generado para la transacción | | environment | string | ❌ | Ambiente: 'dev', 'test' o 'prod' (default: 'prod') | | returnUrl | string | ❌ | URL de retorno tras pago exitoso | | cancelUrl | string | ❌ | URL de retorno tras cancelación | | buttonText | string | ❌ | Texto personalizado del botón | | customStyles | object | ❌ | Estilos CSS personalizados |

🎨 Personalización

Estilos Personalizados

DiinPay.createButton({
    container: '#mi-boton',
    hash: 'eyJ0eXBlIjoicGF5bWVudCIsImFtb3VudCI6NTAuMDB9',
    environment: 'test',
    customStyles: {
        backgroundColor: '#ff6b6b',
        color: '#ffffff',
        padding: '15px 30px',
        borderRadius: '25px',
        fontSize: '18px',
        fontWeight: 'bold',
        boxShadow: '0 4px 15px rgba(255, 107, 107, 0.3)'
    }
});

Control Programático

// Crear botón
const boton = DiinPay.createButton({...});

// Actualizar hash dinámicamente
boton.updateHash('eyJuZXciOiJ0cnVlIiwiYW1vdW50IjoxOTkuOTl9');

// Destruir botón
boton.destroy();

🔗 Integración con Frameworks

React

import { useEffect } from 'react';

function PaymentButton() {
    useEffect(() => {
        DiinPay.createButton({
            container: '#react-payment-btn',
            hash: 'eyJ0eXBlIjoicGF5bWVudCIsImFtb3VudCI6MjkuOTl9',
            environment: 'prod'
        });
    }, []);

    return <div id="react-payment-btn"></div>;
}

Vue.js

<template>
    <div id="vue-payment-btn"></div>
</template>

<script>
export default {
    mounted() {
        DiinPay.createButton({
            container: '#vue-payment-btn',
            hash: 'eyJ0eXBlIjoicGF5bWVudCIsImFtb3VudCI6MzkuOTl9',
            environment: 'prod'
        });
    }
}
</script>

Angular

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-payment',
    template: '<div id="angular-payment-btn"></div>'
})
export class PaymentComponent implements OnInit {
    ngOnInit() {
        (window as any).DiinPay.createButton({
            container: '#angular-payment-btn',
            hash: 'eyJ0eXBlIjoicGF5bWVudCIsImFtb3VudCI6NDkuOTl9',
            environment: 'prod'
        });
    }
}

🔒 Seguridad

El widget genera automáticamente un hash de los parámetros de pago para asegurar la integridad de la transacción. En producción, se recomienda:

1. Validación server-side: Verificar los parámetros en tu servidor
2. HTTPS: Usar siempre conexiones seguras
3. Webhooks: Implementar notificaciones de DiinPay para confirmar pagos

🌍 Soporte de Monedas

El widget soporta todas las monedas disponibles en DiinPay:

• USD (Dólar estadounidense)
• EUR (Euro)
• MXN (Peso mexicano)
• COP (Peso colombiano)
• PEN (Sol peruano)
• Y muchas más...

📱 Ejemplos de Uso

E-commerce Simple

<div data-diinpay-button
     data-hash="eyJ0eXBlIjoicGF5bWVudCIsImFtb3VudCI6MTk5Ljk5fQ=="
     data-environment="prod"
     data-button-text="Comprar Ahora 📱">
</div>

Suscripción Mensual

DiinPay.createButton({
    container: '#subscription-btn',
    hash: 'eyJ0eXBlIjoic3Vic2NyaXB0aW9uIiwiYW1vdW50Ijo5Ljk5fQ==',
    environment: 'prod',
    buttonText: 'Suscribirse 💎',
    returnUrl: 'https://miapp.com/welcome',
    customStyles: {
        backgroundColor: '#4CAF50',
        padding: '12px 24px',
        borderRadius: '8px'
    }
});

Donación

<div data-diinpay-button
     data-hash="eyJ0eXBlIjoiZG9uYXRpb24iLCJhbW91bnQiOjI1LjAwfQ=="
     data-environment="prod"
     data-button-text="Donar ❤️">
</div>

🛠️ API Reference

DiinPay.createButton(config)

Crea un nuevo botón de pago.

Retorna: Object con métodos updateAmount() y destroy()

DiinPay.init()

Inicializa todos los botones con atributos data-diinpay-button en la página.

🐛 Troubleshooting

El botón no aparece

• Verifica que el script esté cargado correctamente
• Asegúrate de que el contenedor existe en el DOM
• Revisa la consola del navegador para errores

Error "Missing required parameters"

• Verifica que todos los parámetros obligatorios estén presentes
• container y hash son requeridos

El checkout no se abre

• Verifica que la URL de DiinPay sea correcta
• Asegúrate de que el navegador permite popups

📄 Licencia

MIT License - ver archivo LICENSE para más detalles.

🤝 Contribuir

¿Encontraste un bug o tienes una sugerencia?

1. Abre un issue
2. Haz un fork del repo
3. Crea una rama para tu feature
4. Envía un pull request

📞 Soporte

Para soporte técnico:

• 📧 Email: [email protected]
• 📚 Documentación: https://docs.diinpay.com
• 💬 Chat: https://diinpay.com/support

¡Hecho con ❤️ para la comunidad de desarrolladores!