1.1.5 • Published 4 years ago
vue-niubiz-component v1.1.5
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: '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
}
1.1.5
4 years ago
1.1.4
4 years ago
1.1.3
4 years ago
1.1.2
4 years ago
1.1.1
4 years ago
1.1.0
4 years ago
1.0.27
4 years ago
1.0.26
4 years ago
1.0.23
4 years ago
1.0.22
4 years ago
1.0.21
4 years ago
1.0.20
4 years ago
1.0.19
4 years ago
1.0.18
4 years ago
1.0.17
4 years ago
1.0.16
4 years ago
1.0.15
4 years ago
1.0.14
4 years ago
1.0.13
4 years ago
1.0.12
4 years ago
1.0.11
4 years ago
1.0.9
4 years ago
1.0.8
4 years ago
1.0.7
4 years ago
1.0.6
4 years ago
1.0.5
4 years ago
1.0.4
4 years ago
1.0.3
4 years ago
1.0.2
4 years ago
1.0.1
4 years ago
0.0.9
4 years ago