LiftPay Checkout

O Checkout LiftPay é uma forma simples de receber pagamentos de Cartão de crédito direto no seu site por meio de uma interface amigável exibida para o seu cliente.

Exemplo React

Adicionando a biblioteca ao seu projeto

Usando yarn:

yarn add liftpay-checkout

Usando npm:

npm i liftpay-checkout

Usando a biblioteca

1. Importe a biblioteca no seu projeto

   import LiftPayCheckout from 'liftpay-checkout';

2. Adicione o CSS

   Via JavaScript:

   import 'liftpay-checkout/dist/styles.css';

   Via HTML:

   <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/styles.css">

3. Crie uma ordem de pagamento

   const publicKey = "INSERT_PUBLIC_KEY_HERE";
   
   const order = {
     amount: 1200,
   };
   
   const [err, res] = await LiftPayCheckout.createPaymentOrder(publicKey, order);

4. Exiba o formulário de checkout na sua página

   await LiftPayCheckout.openCheckoutForm({ 
     formSelector: '#checkout-form', 
     onSuccess: (data) => { console.log(data); }, 
     onError: (error) => { console.log(error); }
   });

Referência da API

createPaymentOrder(publicKey: string, order: Order): Promise<ResponseType<{ success: boolean }>>

Cria uma ordem de pagamento. Essa função recebe os seguintes parâmetros:

• publicKey : Chave pública utilizada para autenticação.
• order: Objeto contendo os detalhes da ordem de pagamento.

Essa função retorna uma promesa que será resolvida em um array com a assinatura [error, response]. Onde a primeira posição do array contém um erro (ou nulo em caso de sucesso) e a segunda posição contém um objeto com o campo success igual a true (ou nulo em caso de erro).

| Campo | Descrição | |--------------------------------------------------|------------------------------------------------------------------------------------------------| | amount | Valor da transação. O valor dela deve ser um número inteiro positivo (ex: 1234 para R$ 12,34). | | notificationUrl | URL que será notificada via POST quando o pagamento for concluído. | | metadata | Valores personalizados anexados à transação no formato json. | | customer.email | E-mail do comprador. | | customer.reference | Código do comprador para o vendedor. | | customer.billingDetails.address | Endereço de cobrança. | | customer.billingDetails.address2 | Informações complementares sobre o endereço de cobrança. | | customer.billingDetails.category | Tipo de cliente (PRIVATE, COMPANY). | | customer.billingDetails.cellPhoneNumber | Telefone celular do comprador. | | customer.billingDetails.city | Cidade do endereço de cobrança. | | customer.billingDetails.country | País do comprador (em maiúscula, conforme à norma ISO 3166-1 alfa-2). | | customer.billingDetails.district | Bairro do endereço de cobrança. | | customer.billingDetails.firstName | Nome do comprador. | | customer.billingDetails.identityCode | CPF/CNPJ do comprador. | | customer.billingDetails.lastName | Sobrenome do comprador. | | customer.billingDetails.phoneNumber | Número de telefone do comprador. | | customer.billingDetails.state | Estado do endereço de cobrança. | | customer.billingDetails.streetNumber | Número de rua do endereço de cobrança. | | customer.billingDetails.zipCode | CEP do endereço de cobrança. | | customer.shippingDetails.address | Endereço de entrega. | | customer.shippingDetails.address2 | Informações complementares sobre o endereço de entrega. | | customer.shippingDetails.category | Tipo de cliente (PRIVATE, COMPANY). | | customer.shippingDetails.city | Cidade de entrega. | | customer.shippingDetails.country | País de entrega (em maiúscula, conforme à norma ISO 3166-1 alfa-2). | | customer.shippingDetails.deliveryCompanyName | Nome da empresa responsável pela entrega do produto. | | customer.shippingDetails.district | Bairro do endereço de entrega. | | customer.shippingDetails.firstName | Nome do destinatário. | | customer.shippingDetails.identityCode | CPF/CNPJ do destinatário. | | customer.shippingDetails.lastName | Sobrenome do destinatário. | | customer.shippingDetails.legalName | Razão social para uma entrega em uma empresa. | | customer.shippingDetails.phoneNumber | Número de telefone do destinatário. | | customer.shippingDetails.shippingSpeed | Prazo da entrega (STANDARD, EXPRESS, PRIORITY). | | customer.shippingDetails.shippingMethod | Modo de entrega. | | customer.shippingDetails.state | Estado do endereço de entrega. | | customer.shippingDetails.streetNumber | Número de rua do endereço de entrega. | | customer.shippingDetails.zipCode | CEP do endereço de entrega. | | customer.shoppingCart.insuranceAmount | Valor do seguro para a totalidade do pedido. | | customer.shoppingCart.shippingAmount | Valor das taxas de entrega para o pedido completo. | | customer.shoppingCart.taxAmount | Valor dos impostos para a totalidade do pedido. | | customer.shoppingCart.cartItemInfo | Lista de objetos com informações dos itens do carrinho | | customer.shoppingCart.cartItemInfo.productAmount | Valor do produto (na menor unidade da moeda). | | customer.shoppingCart.cartItemInfo.productLabel | Nome do produto. | | customer.shoppingCart.cartItemInfo.productQty | Quantidade do produto. | | customer.shoppingCart.cartItemInfo.productRef | Referência do produto. | | customer.shoppingCart.cartItemInfo.productType | Tipo de produto. | | customer.shoppingCart.cartItemInfo.productVat | Valor do imposto sobre o produto (apresentado na menor unidade da moeda). |

openCheckoutForm({ formSelector, onSuccess, onError }: FormConfig): Promise<void>

Exibe o formulário de pagamento na tela. Essa função recebe um objeto com os seguintes campos:

• formSelector: Classe ou Id do elemento HTML onde o formulário deverá ser inserido.
• onSuccess: Callback invocado quando o pagamento é completado com sucesso, recebe um objeto contendo os dados da pagamento como parâmetro.
• onError: Callback invocado em caso de erro, recebe o erro como parâmetro.

Retorna uma Promesa que será resolvida quando o formulário estiver pronto para ser interagido na tela.