react-native-pjbank-checkout-input

react-native-pjbank-checkout-input

Componente para auxiliar obtenção de token para o checkout em aplicações react-native.

Prop	type	Description
credencial	string	dever ser fornecida uma credencial para a geração de token
homologacao	boolean	Se for passado true é trocado para o ambiente de homologação
placeholder	string	Placeholder do componente input
containerStyle	object	componente de estilo para o componente pai do input (wrapper)
inputStyle	object	objeto com propriedades para o input, podem ser passadas a maioria das propriedades validas de um componente <TextInput/>. As propriedades serão merjadas para o input
onData	function	Retorna um objeto no formato: {token:'xxxxxx', bandeira:'xxxxxx'}, que contém o token e a bandeira do cartão
onFocus	function	Callback invocado quando o input entra em foco
onBlur	function	Callback invocado quando o input sai de foco
onChange	function	{(text) => console.log('text')} Callback invocado quando o há alguma alteração de texto no input
onDone	function	{() => console.log('onDone')} Callback invocado quando o clica no actionButton do teclado nativo

Como utilizar

Começe instalando o componente.

npm install --save react-native-pjbank-checkout-input

---

Importe o componente

import  CheckoutInput  from  'react-native-pjbank-checkout-input';

Depois de importado o componente basta utiliza-lo em seu componente.

<CheckoutInput
    inputStyle={{
	    fontSize: 20
	    ...
    }}
    containerStyle={{
        height: 20,
        width: 300,
        ...
    }}
    credencial='xxxxxxxxxxxxxxxxxxx'
    onData={(data)=>console.log('O token: '+ data.token + 'bandeira'+ data.bandeira)}
/>