vue-niubiz-form

Componente Niubiz para Vue JS

Instalar

``
npm install vue-niubiz-form
`

Uso

+ 1er Paso

En el nuxt.config.js
`sh
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
`sh
import { PagoNiubiz } from 'vue-niubiz-form'


export default {
components: {
PagoNiubiz
}
}

`


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

`sh
: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: 'accept@cybersource.com',
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
}

``