Parcela Express Checkout Component

Instalação

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

NPM

Instale o componente Parcela Checkout Component:

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

Ou

yarn add @parcelaexpress/checkout-react-component

Uso

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 protected]',
          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.

Props

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.
maskSecurityCode	bool	Não	Define se o campo cvv vai ser oculto ou aberto

customerData Subcampos:

• 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)

customerData.customer Subcampos:

• 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.

customerData.customer.billing_address Subcampos:

• 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)

Para Estilizar o componente basta utilizar as seguintes classes no seu próprio css:

.adyen-checkout__payment-method {
    /* Payment method container */
}
.adyen-checkout__payment-method--selected {
    /* Payment method that has been selected */
}
.adyen-checkout__payment-method__header {
    /* Payment method icon and name */
}
.adyen-checkout__payment-method__radio {
    /* Radio button in payment method header */
}
.adyen-checkout__payment-method__radio--selected {
    /* Selected radio button in payment method header */
}
.adyen-checkout__payment-method__name {
    /* Payment method name in the payment method header */
}
.adyen-checkout__spinner__wrapper {
    /* Spinning icon */
}
.adyen-checkout__button {
    /* Buttons */
}
.adyen-checkout__button--pay {
    /* Pay button */
}
.adyen-checkout__field {
    /* Form field container */
}
.adyen-checkout__label {
    /* Form label container */
}
.adyen-checkout__label__text {
    /* Text element inside the form label container */
}
.adyen-checkout__input {
    /* Input fields */
}
.adyen-checkout__input--error {
    /* Error state for the input fields */
}
.adyen-checkout__error-text {
    /* Error message text */
}
.adyen-checkout__card__cardNumber__input {
    /* Input field for the card number */
}
.adyen-checkout__field--expiryDate {
    /* Input field for the expiry date */
}
.adyen-checkout__field__cvc {
    /* Input field for the CVC security code */
}
.adyen-checkout__card__holderName {
    /* Input field for cardholder name */
}
.adyen-checkout__checkbox__input {
    /* Checkboxes */
}
.adyen-checkout__checkbox__label {
    /* Checkbox labels */
}
.adyen-checkout__radio_group__input {
    /* Radio buttons */
}
.adyen-checkout__dropdown__button {
    /* Dropdown button showing list of options */
}
.adyen-checkout__dropdown__list {
    /* Dropdown list */
}
.adyen-checkout__dropdown__element {
    /* Elements in the dropdown list */
}
.adyen-checkout__link {
    /* Links */
}