pagseguro-react-signatures

PAGSEGURO + REACT

Além dos métodos tradicionais de pagamento (modal e redirecionamento) o pagseguro disponibiliza uma terceira opção o checkout transparente. Com ele é possível que a transação seja feita diretamente em seu site, sem a necessidade de redirecionamento ou modal. É a solução ideal se você deseja customizar o design e manter o cliente em sua aplicação durante a transação.

Tenha em mente que ainda assim você precisará se comunicar com a api do pagseguro via backend. Toda comunicação é feita utilizando o email de cadastro e um token de segurança, sendo assim, você não deve deixar essas informações no frontend por questões de segurança.

Pagseguro React cuidará da comunicação com a api do pagseguro, validação e estruturação dos dados necessários para que você envie para o pagseguro (via backend). Se você usa nodejs vai gostar do módulo que criei: (pagseguro-node), caso contrário, você encontrará libs para outras linguagens no próprio site do pagseguro.

Caso tenha dificuldades para implementar ou precise de um freelancer entre em contato: atah.com.br) | [e-mail]. Se curtir o projeto da um apoio com uma estrelinha bacana e me segue por aqui.

Instalação

npm install --save pagseguro-react

Pagamento

O componente DirectPayment deve ser utilizado em caso de compra única. Os métodos disponíveis são: Cartão de crédito, boleto e débito online.

Você precisará iniciar a sessão em sua api, sem ela o componente se quer será inicializado (pagseguro-node).

Exemplo:

    import { DirectPayment } from 'pagseguro-react';
 
    // constructor...
    this.state = {
 
        session: '',
 
        env: '',
 
        sender: {
            name: 'Willy Chagas',
            email: '[e-mail]',
            phone: {
                areaCode: '48',
                number: '991510980',
            },
            document: {
                type: 'CPF',
                value: '71783955082'
            },
        },
 
        shipping: {
            type: 3,
            cost: 10.00,
            street: 'Av Campeche',
            number: 1111,
            complement: 'Casa',
            district: 'Campeche',
            city: 'Florianópolis',
            state: 'SC',
            country: 'BRA',
            postalCode: '88063789'
        },
 
        billing: {
            street: 'Av Campeche',
            number: 1111,
            complement: 'Casa',
            district: 'Campeche',
            city: 'Florianópolis',
            state: 'SC',
            country: 'BRA',
            postalCode: '88063789'
        },
 
        items: [
            {
                id: 1,
                description: 'Produto 1',
                quantity: 2,
                amount: 2,
            },  
            {
                id: 2,
                description: 'Produto 2',
                quantity: 1,
                amount: 60.00,
            },  
            {
                id: 3,
                description: 'Produto 3',
                quantity: 2,
                amount: 20.00,
            }
 
        ],
 
        creditCard: {
            maxInstallmentNoInterest: 5 // parcelas com desconto
        },
        extraAmount: 10.00,
        reference: 'Teste Pagseguro React'
    }
 
    // render...
    <DirectPayment
        env={this.state.env}
        session={this.state.session}
        extraAmount={this.state.extraAmount}                                       
        reference={this.state.reference}
        creditCard={this.state.creditCard}                                         
        sender={this.state.sender}                                                
        shipping={this.state.shipping}    
        billing={this.state.billing}                                               
        items={this.state.items}                                                   	    
        onError={this.onError.bind(this)}
        onSubmit={this.onSubmit.bind(this)}
    />

Propriedades:

PROPRIEDADE	DESCRIÇÃO
session	String :: Sessão gerada pela sua api (obrigatório)
env	String :: Ambiente da aplicação ("sandbox" ou "production")
extraAmount	Number :: Custo extra. Formato com 2 casas decimais (opcional)
reference	String :: Breve descrição sobre o pagamento. Você verá essa informação no painel do pagseguro (opcional)'
creditCard	Object :: Dados necessários para pagamento via cartão de crédito (obrigatório)
creditCard.maxInstallmentNoInterest	Number :: Número máximo de parcelas sem juros. Você deve usar esse mesmo valor no backend (opcional)'
sender	Object :: Dados do comprador (obrigatório)
sender.name	String :: Nome do comprador (obrigatório)
sender.email	String :: Email do comprador (obrigatório)
sender.phone.areaCode	String :: Código de área do telefone do comprador (obrigatório)
sender.phone.number	String :: Número do telefone do comprador (obrigatório)
sender.document.type	String :: Tipo do documento do comprador (CPF ou CNPJ) (obrigatório)
sender.document.value	String :: Valor do documento (obrigatório)
shipping	Object :: Endereço de entrega (obrigatório)
shipping.addressRequired	Boolean :: Caso não precise de endereço. Ex: Compra de e-book. Obs: caso definido como true, o formulário será ocultado e não será necessário passar as propriedades listadas a seguir (opcional)
shipping.type	Number :: Tipo do frete (1 = SEDEX) (opcional)
shipping.cost	Number :: Custo do frete. Formato com duas casas decimais (opcional)
shipping.state	String :: Sigla do Estado. EX: SC (obrigatório)
shipping.city	String :: Cidade (obrigatório)
shipping.district	String :: Bairro (obrigatório)
shipping.street	String :: Endereço (obrigatório)
shipping.number	String :: Número (obrigatório)
shipping.complement	String :: Complemento (opcional)
shipping.postalCode	String :: Cep (obrigatório)
billing	Object :: Endereço de cobrança (obrigatório)
billing.state	String :: Sigla do Estado. EX: SC (obrigatório)
billing.city	String :: Cidade (obrigatório)
billing.district	String :: Bairro (obrigatório)
billing.street	String :: Endereço (obrigatório)
billing.number	String :: Número (obrigatório)
billing.complement	String :: Complemento (opcional)
billing.postalCode	String :: Cep (obrigatório)
items	Array :: Itens a serem comprados (obrigatório)
items[0].id	Number :: Id do produto (obrigatório)
items[0].description	String :: Descrição do produto (obrigatório)
items[0].quantity	Number :: Quantidade do item (obrigatório)
items[0].amount	Number :: Custo individual do item (obrigatório)
hiddenSenderForm	Number :: Ocultar formulário do comprador. (opcional)
hiddenShippingForm	Number :: Ocultar formulário de endereço de entrega. (opcional)
hiddenBillingForm	Number :: Ocultar formulário de endereço de cobrança. (opcional)
exclude	Array :: Ocultar métodos de pagamento. Opções 'CREDIT_CARD', 'ONLINE_DEBIT', 'BOLETO'

Eventos:

EVENTO	DESCRIÇÃO
onSuccess	Disparado em caso de sucesso. Retorna um objeto com todos os dados necessários a serem enviados à sua api.
onError	Disparado em caso de erro.

Customização

 
 
/*
 * Container
 */
.ps-react-direct-payment {}
 
 
/*
 * Loading
 */
.ps-react-loading {}
 
 
/**
 * Form
 */
.ps-react-form {}
 
 
/**
 * Form Group
 */
.ps-react-form-group {}
 
 
/*
 * Label
 */
.ps-react-label {}
 
 
/*
 * Input
 */
.ps-react-input{}
 
 
/*
 * Select
 */
.ps-react-select{}
 
 
/*
 * Select
 */
.ps-react-textarea {}
 
 
/*
 * Checkbox
 */
.ps-react-checkbox {}
.ps-react-checkbox:hover input ~ span {}
.ps-react-checkbox:checked input ~ span {}
.ps-react-checkbox:checked input:checked ~ span:after {}
.ps-react-checkbox span:after {}
.ps-react-checkbox label {}
.ps-react-checkbox input {}
.ps-react-checkbox span {}
.ps-react-checkbox span:after {}
 
 
/**
 * Error
 */
.ps-react-error{}
 
 
/**
 * Tabs Payment Method
 */
.ps-react-tab-payment-method {}
.ps-react-tab-payment-method-active {}
 
 
/**
 * Steps
 */
.ps-react-step {}
.ps-react-step-active {}