vue-niubiz-form

Componente Niubiz para Vue JS

Instalar

npm install vue-niubiz-form

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-form'


export default {
    components: {
    PagoNiubiz
    }
}

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

<PagoNiubiz
    :configuration=niubizConfig
    :elementStyle=styles
    :dataClient=pagador
    :showCheckRecurrent=checkRecurrente
    :showTermsConditions=checkAccept
    :buttonText=botonTexto
    :buttonCurrency=botonMoneda
    :buttonAmount=botonMonto
/>


data () {
    return {
        niubizConfig: {
            sessionkey: '{String}', // dato obtenido desde la API del backend
            channel: 'paycard',
            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
        },
        styles: {
            base: {
                color: '#495057',
                fontWeight: 600,
                fontFamily: '"Omnes Regular", sans-serif',
                fontSize: '14px',
                fontSmoothing: 'antialiased',
                placeholder: {
                    color: '#c4c4c4'
                },
                autofill: {
                    color: '#e39f48'
                }
            },
            invalid: {
                color: '#dc3545',
                '::placeholder': { color: '#FFCCA5' }
            }
        },
        pagador: { // datos del cliente (tarjetahabiente)
            name: 'Alexancer',
            lastName: 'Cerna ',
            email: '[email protected]',
            alias: 'alex',
            userBlockId: 'miUserBlockId'
        },
        showCheckRecurrent: true, // para mostrar el check de 'pago recurrente'
        showTermsConditions: true // para mostrar los terminos y condiciones
        botonTexto: 'PAGAR', // el texto del boton pagar
        botonMoneda: 'S/.', // simbolo de la moneda
        botonMonto: '143.5' // monto a pagar
}