Siga as instruções abaixo para realizar a instalação do componente em sua aplicação.
Instale o componente Parcela Checkout Component:
npm install @parcelaexpress/checkout-react-component --save
Ou
yarn add @parcelaexpress/checkout-react-component
import React from 'react';
import Checkout from '@parcelaexpress/checkout-react-component';
const App = () => {
const checkoutSubmitHandle = (state) => {
alert(JSON.stringify(state));
};
const checkoutOnChangeHandle = (state) => {
console.log('state', state);
};
const onErrorHandle = (err) => {
console.log(err);
return;
};
return (
<Checkout
environment={'TEST'}
apiUrl={'https://sandbox.parcelaexpress.com.br'}
customerData={{
amount_cents: 1000,
description: 'Venda Teste',
form_payment: 'debit',
installment_plan: {
number_installments: 1
},
customer: {
email: 'email@email.com.br',
ip: '00.000.000.00',
first_name: 'Testando',
last_name: 'Teste',
document: '00000000000',
billing_address: {
city: 'São Paulo',
country: 'BR',
house_number_or_name: '10',
postal_code: '0000000',
state: 'SP',
street: 'Rua Teste'
}
},
has_split_rules: true,
split_rules: [
{
amount: 10000,
seller_id: '741d17b7-3e7c-493a-8d8c-f91b423c2a79',
description: 'Descrição Teste'
},
{
amount: 5000,
seller_id: '5a6cda6a-8b90-417a-95de-982550bccfdf'
}
],
confirmation_required: false,
active_3ds: true,
extract_identification: 'Cartório Exemplo',
service_id: 'seu id(opcional)',
protocol: 'PROTOCOLO123658 (opcional)'
}}
sellerKey={'key'}
clientKey={'clientKey'}
onSubmit={checkoutSubmitHandle}
onChange={checkoutOnChangeHandle}
onSubmitError={onErrorHandle}
successReturnUrl={'http://success-url.com.br'}
errorReturnUrl={'http://error-url.com.br'}
showPayButton={true}
/>
);
};
Os campos has_split_rules e split_rules(opcionais) são usados para dividir o valor da venda entre os estabelecimentos.
PropName | Tipo | Obrigatório | Descrição |
---|---|---|---|
apiUrl |
string | Sim | URL da API. |
successReturnUrl |
string | Condicional | URL de retorno em caso de sucesso. Obrigatório se form_payment for 'debit' ou active_3ds for verdadeiro. |
errorReturnUrl |
string | Condicional | URL de retorno em caso de erro. Obrigatório se form_payment for 'debit' ou active_3ds for verdadeiro. |
sellerKey |
string | Sim | sellerKey. |
clientKey |
string | Sim | clientKey. |
environment |
string | Sim | Ambiente de execução. 'TEST' ou 'LIVE'. |
onSubmit |
function | Sim | Função a ser executada ao enviar o pagamento. |
onChange |
function | Sim | Função a ser executada ao alterar o componente. |
onSubmitError |
function | Não | Função a ser executada em caso de erro no envio. |
beforeSubmit |
function | Não | Função a ser executada antes do envio. |
afterSubmit |
function | Não | Função a ser executada após o envio. |
customerData |
object | Sim | Dados do cliente. Consulte abaixo para detalhes sobre seus subcampos. |
showPayButton |
bool | Não | Define se o botão de pagamento será exibido. |
-
amount_cents
(number): Valor em centavos da compra. (Obrigatório) -
description
(string): Descrição da compra. (Obrigatório) -
form_payment
(string): Método de pagamento ('credit' ou 'debit'). (Obrigatório) -
installment_plan
(object): Parcelamento. (Opcional)-
number_installments
(number): Número de parcelas. (Opcional)
-
-
customer
(object): Informações do cliente. (Obrigatório)- Consulte abaixo para detalhes.
-
sale_id
(string): ID da venda. (Opcional) -
active_3ds
(bool): Indica se a autenticação 3D Secure está ativa. (Opcional) -
risk_custom_field
(string): Campo personalizado de risco. (Opcional) -
extract_identification
(string): Identificação no extrato. (Opcional) -
has_split_rules
(bool): Indica se a venda possui regras de divisão. (Opcional) -
service_id
(string): ID do serviço. (Opcional) -
protocol
(string): Protocolo. (Opcional) -
split_rules
(array): Regras de divisão da venda. (Opcional) -
recurrence
(bool): Indica se a venda é recorrente. (Opcional) -
recurrence_day
(number): Dia da recorrência. (Opcional) -
pre_capture
(bool): Indica se a venda é pré captura. (Opcional)
-
email
(string): Email do cliente. (Obrigatório) -
ip
(string): Endereço IP do cliente. (Obrigatório) -
first_name
(string): Primeiro nome do cliente. (Obrigatório) -
last_name
(string): Sobrenome do cliente. (Obrigatório) -
document
(string): Documento do cliente. (Obrigatório) -
billing_address
(object): Endereço de cobrança do cliente. (Obrigatório)- Consulte abaixo para detalhes.
-
city
(string): Cidade do cliente. (Obrigatório) -
country
(string): País do cliente. (Obrigatório) -
house_number_or_name
(string): Número ou nome do prédio do cliente. (Obrigatório) -
postal_code
(string): Código postal do cliente. (Obrigatório) -
state
(string): Estado do cliente. (Obrigatório) -
street
(string): Rua do cliente. (Obrigatório)