@parcelaexpress/checkout-react-component

Parcela Express Checkout Component

Instalação

Siga as instruções abaixo para realizar a instalação do componente em sua aplicação.

NPM

1. Instale o componente Parcela Checkout Component:

npm install @parcelaexpress/checkout-react-component --save

2. Importe o componente dentro de sua aplicação:

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'} 
      customerData={{
        amount_cents: 1000,
        description: 'Venda Teste',
        form_payment: 'debit',
        installment_plan: {
          number_installments: 1,
        },
        customer: {
          email: '[e-mail]',
          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