2.5.0 • Published 2 years ago
@parcelaexpress/checkout-component-js v2.5.0
Parcela Express Checkout Component JS
Instalação
Esse pacote é um módulo Node.js disponibilizado pelo npm.
Siga as instruções abaixo para realizar a instalação do componente em sua aplicação.
Instale o componente Parcela Checkout Component JS:
npm install @parcelaexpress/checkout-component-js --saveyarn add @parcelaexpress/checkout-component-js
Instalação
O componente pode ser usado da seguinte maneira:
Importe o componente dentro de sua aplicação e adicione o web component no seu html:
index.js
import '@parcelaexpress/checkout-component-js';index.html
...
<body>
<parcela-checkout
environment='TEST'
clientKey='process.env.MINHA_CLIENT_KEY'
apiUrl="https://sandbox.parcelaexpress.com.br/"
sellerKey="e137d1b6-8f84-4377-ab5c-d27dd24415bd"
successReturnUrl="https://success-url.com.br"
errorReturnUrl="https://error-url.com.br"
></parcela-checkout>
</body>
...Adicione callbacks para os eventos de atualização de campos(onChange) e para envio do formulário(onSubmit):
index.js
import '@parcelaexpress/checkout-component-js';
const web_component = document.querySelector('parcela-checkout');
web_component.customerData = {
amount_cents: 20010,
description: "Venda Teste",
form_payment: "debit",
installment_plan: {
number_installments: 1,
},
customer: {
email: "teste@fulano.com.br",
ip: "99.106.129.24",
first_name: "Testando",
last_name: "Teste",
document: "29896147027",
billing_address: {
city: "Belo Horizonte",
country: "BR",
house_number_or_name: "10",
postal_code: "31010500",
state: "MG",
street: "Rua Adamina",
},
},
pre_capture: false,
has_split_rules: true,
split_rules: [
{
amount: 10000,
seller_id: "d6a245d2-b705-42a1-8d4a-0956aaa00fed",
description: "Descrição do split"
},
{
amount: 5000,
seller_id: "99d1f231-557a-44b9-ae5d-9b5f533c684e"
}
],
confirmation_required: false,
active_3ds: true,
service_id: "seu id(opcional)",
protocol: "PROTOCOLO123658 (opcional)"
};
web_component.onChange = (state) => console.log(state);
web_component.onSubmit = (state) => console.log(state);
web_component.onSubmitError = (state) => console.log(state);
web_component.beforeSubmit = (state) => console.log("before submit");
web_component.afterSubmit = (state) => console.log("after submit");
web_component.showPayButton = true;Os campos has_split_rules e split_rules(opcionais) são usados para dividir o valor da venda entre os estabelecimentos