vue-niubiz-component

Componente Niubiz para Vue JS

Instalar

npm install vue-niubiz-component

Uso

• 1er Paso

En el nuxt.config.js

export default {
    head: {
        script: [
            { src: 'https://pocpaymentserve.s3.amazonaws.com/payform.min.js'}
        ],
        link: [
            { rel: 'stylesheet', href: 'https://pocpaymentserve.s3.amazonaws.com/payform.min.css' }
        ]
    }
}

• 2do Paso En su script del .vue importar lo siguiente y registrarlo como componente

import { PagoNiubiz } from 'vue-niubiz-component'


export default {
    components: {
    PagoNiubiz
    }
}

• 3erPaso Registro de la data requerida en el componente vue-niubiz-component

<PagoNiubiz
    :configuration=niubizConfig
    :elementStyle=styles
    :dataClient=pagador
    identifierID="500065432"
    :showCheckOption=checkRecurrente
    labelCheckOption="Autorizo se realicen cobros de mis cuotas recurrentes a estas tarjetas"
    :showCheckAcceptConditions=checkAccept
    :buttonText=botonTexto
    buttonAction="{optionalUrlPay}"
    :vuetifyStyle=vuetify
/>


data () {
    return {
        niubizConfig: {
            sessionkey: '{String}', // dato obtenido desde la API del backend
            channel: 'web',
            merchantid: '{String}', // código del comercio por producto
            purchasenumber: '{String}', // Ejemplo: Número de póliza, número de Venta, etc
            amount: '132.40', // El precio a cobrar
            callbackurl: '{urlForGetToken}',
            language: 'es', // ejemplo: es o en
            font: 'https://fonts.googleapis.com/css?family=Montserrat:400&display=swap',
            recurrentmaxamount: '1000.00' // Máx. pago
        }, // 514D38FBFF3E43C68D38FBFF3E43C6DF
        styles: {
            base: {
                color: '#495057',
                fontWeight: 700,
                fontFamily: '"Montserrat", sans-serif',
                fontSize: '16px',
                fontSmoothing: 'antialiased',
                placeholder: {
                    color: '#c4c4c4'
                },
                autofill: {
                    color: '#e39f48'
                }
            },
            invalid: {
                color: '#dc3545',
                '::placeholder': { color: '#FFCCA5' }
            }
        },
        vuetify: true, // si es verdadero mostrar elementos de VUETIFY sino BOOTSTRAP
        pagador: { // datos del cliente (tarjetahabiente)
            name: 'Noel',
            lastName: 'Chavez ',
            email: '[email protected]',
            alias: 'leo',
            userBlockId: 'miUserBlockId'
        },
        checkRecurrente: true, // para mostrar el check de 'pago recurrente'
        checkAccept: true // para mostrar los tyc con el modal
        botonTexto: 'PAGAR', // el texto del boton pagar
}