vue-niubiz-component

Componente Niubiz para Vue JS

Instalar

``
npm install vue-niubiz-component
`

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


export default {
components: {
PagoNiubiz
}
}

`


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

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

``