Checkout Full SDK em Javascript
Get started
Adicione como dependência no seu site o checkout full SDK
<script
type="module"
src="https://unpkg.com/@malga-checkout-full/core@latest/dist/malga-checkout-full/malga-checkout-full.esm.js"
></script>
Inicie o componente <malga-checkout-full> no seu arquivo HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
/>
<script
type="module"
src="https://unpkg.com/@malga-checkout-full/core@latest/dist/malga-checkout-full/malga-checkout-full.esm.js"
></script>
<title>Malga Checkout Full Components</title>
</head>
<body>
<main>
<malga-checkout-full
sandbox="false"
public-key="<YOUR_PUBLIC_KEY>"
client-id="<YOUR_CLIENT_ID>"
merchant-id="<YOUR_MERCHANT_ID>"
>
</malga-checkout-full>
</main>
<script>
const malgaCheckoutFull = document.querySelector('malga-checkout-full')
malgaCheckoutFull.paymentMethods = {
pix: {
expiresIn: 600
},
credit: {
installments: {
quantity: 1,
show: true,
},
showCreditCard: true
},
boleto: {
expiresDate: '2022-12-31',
instructions: 'Instruções para pagamento do boleto',
interest: {
days: 1,
amount: 100,
},
fine: {
days: 2,
amount: 200,
}
},
drip: {
browser: {
ipAddress: "127.0.0.1",
browserFingerprint: "123123123",
},
successRedirectUrl: "https://example.com",
cancelRedirectUrl: "https://example.com",
},
nupay: {
taxValue: 10,
delayToAutoCancel: 60,
orderUrl: "http://127.0.0.1",
},
}
malgaCheckoutFull.pageConfig = {
brandUrl: 'https://exampleurl/images/logo.png',
footerDescription: 'Todos os direitos reservados © 2022 Malga.',
backRoute: 'https://www.malga.io/',
delivery: 0,
products: [
{
name: 'Produto 1',
quantity: 2,
amount: 50,
description: 'Descrição do produto 1',
sku: '123',
risk: 'Low',
},
{
name: 'Produto 2',
quantity: 2,
amount: 40,
description: 'Descrição do produto 2',
sku: '124',
risk: 'Low',
},
],
}
malgaCheckoutFull.transactionConfig = {
statementDescriptor: '#1 Demonstration Malga Checkout',
amount: 100,
description: '',
orderId: '',
customerId: '',
currency: 'BRL',
capture: false,
}
malgaCheckoutFull.dialogConfig={
show: true,
actionButtonLabel: 'Continuar',
errorActionButtonLabel: 'Tentar novamente',
successActionButtonLabel: 'Continuar',
successRedirectUrl: 'https://www.malga.io/',
}
malgaCheckoutFull.addEventListener('transactionSuccess', (data) => {
// Your specifications here
})
malgaCheckoutFull.addEventListener('transactionFailed', (error) => {
// Your specifications here
})
</script>
</body>
</html>
Props
Abaixo a lista de propriedades de customização implementadas pelo componente de interface, use de acordo com suas necessidades de personalização.
| Property | Description | Type | Default |
|---|---|---|---|
publicKey | Chave pública para aplicações client-side, gerada pela API da Malga. Clique aqui para ler mais sobre isso na documentação. | string | undefined |
clientId | Chave para identificar o cliente na Malga. Clique aqui para ler mais sobre isso na documentação. | string | undefined |
merchantId | Identificação de subcontas na Malga. Clique aqui para ler mais sobre isso na documentação. | string | undefined |
sessionId | Identificação de uma sessão na Malga. Clique aqui para ler mais sobre isso na documentação. | string | undefined |
idempotencyKey | Chave de idempotência, se não informada, o próprio checkout gerará uma e vinculará com a cobrança. Clique aqui para ler mais sobre isso na documentação. | string | uuidv4 |
sandbox | Flag para definir se a chamada na API da Malga deve ser feita em ambiente de homologação ou produção. | boolean | false |
locale | String que define a língua do MalgaCheckout. | string | undefined |
transactionConfig | Objeto que configura as propriedades da transação. | object | { statementDescriptor: '', amount: 0, description: '', orderId: '', customerId: '', currency: 'BRL', capture: false, customer: null, fraudAnalysis: null, paymentFlowMetadata: null, splitRules: null } |
dialogConfig | Objeto que configura o dialog que exibe o status da transação. | object | { show: true, actionButtonLabel: 'Continuar', successActionButtonLabel: 'Continuar', errorActionButtonLabel: 'Tentar Novamente', successRedirectUrl: '', pixFilledProgressBarColor: "#2FAC9B", pixEmptyProgressBarColor: "#D8DFF0" } |
paymentMethods | Objeto que configura os métodos de pagamento que devem ser renderizados. | object | { pix: undefined, credit: undefined, boleto: undefined, drip: undefined, nupay: undefined } |
pageConfig | Objeto que define a configuração de elementos da página. | function | undefined |
transactionSuccess | Evento chamado após o sucesso em uma transação. | function | undefined |
transactionFailed | Evento chamado após a falha em uma transação. | function | undefined |
Detalhes das Props
paymentMethods
Abaixo a lista de propriedades disponíveis para a configuração dos métodos de pagamento que devem ser renderizados.
| Property | Description | Type | Default |
|---|---|---|---|
pix | Objeto que configura o pagamento com PIX. | object | { expiresIn: 600 } |
boleto | Objeto que configura o pagamento com Boleto. | object | { expiresDate: "yyyy-mm-dd", instructions: "", interest: { days: 1, amount: 100 }, fine: { days: 1, amount: 200 }} |
credit | Objeto que configura o pagamento com Cartão de Crédito. | object | { installments: { quantity: 1, show: true }, checkedSaveCard: false, showCreditCard: true, cvvCheck: false, cvvCheckMerchantId: '' }, |
drip | Objeto que configura o pagamento com Drip. | object | { items: [{ id: '123', title: 'Product', quantity: 1, unitPrice: 100 }], browser: { ipAddress: '127.0.0.1', browserFingerprint: '123123' }, successRedirectUrl: 'https://example.com', cancelRedirectUrl: 'https://example.com' }, |
nupay | Objeto que configura o pagamento com NuPay. | object | { taxValue: 10, delayToAutoCancel: 60, orderUrl: "http://127.0.0.1", } |
Configurando Validação de Cartão
Para configurar a validação de cartão via Zero Dollar, basta definir a propriedade cvvCheck: true dentro do objeto de credit.
Por padrão usaremos o merchantId configurado na transação. Caso deseje usar outro, basta definir o novo merchantId na propriedade cvvCheckMerchantId.
Para saber mais sobre validação de cartão e Zero Dollar, clique aqui.
Configurando itens na Drip
Na integração com a Drip é possível enviar uma lista de itens. Por padrão iremos usar os produtos que você configurou em pageConfig.products, mas é possível sobreescrever os produtos enviados para a drip usando a propriedade items.
transactionConfig
Abaixo a lista de propriedades disponíveis para a configuração de uma transação.
| Property | Description | Type | Default |
|---|---|---|---|
statementDescriptor | Descrição visível para o comprador. | string | "" |
amount | Valor TOTAL da transação em CENTAVOS. | number | 0 |
description | Descrição da cobrança para consulta futura. | string | "" |
orderId | Identificador único da cobrança do lado do cliente para conciliação futura. | string | "" |
currency | Identificador da moeda para processamento da cobrança. | string | "BRL" |
capture | Determina se a transação deve ser capturada imediatamente. | boolean | false |
customerId | Identificador de um customer já criado para vincular a transação. | string | "" |
customer | Objeto para criação de um customer automaticamente ao fazer uma transação quando o customerId não for informado. | object | { name: "", email: "", phoneNumber: "", document: { type: "", number: "", country: "" }, address: { zipCode: "", street: "", number: "", complement: "", neighborhood: "", city: "", state: "", country: "" } } |
fraudAnalysis | Objeto para passagem dos parâmetros do antifraude. Caso o objeto de customer já tiver sido configurado no transactionConfig, não será necessário passá-lo dentro do objeto do fraudAnalysis | object | { browserFingerprint: "", usePartialCustomer: false, cart: [{ name: "", quantity: 0, sku: "", unitPrice: 0, risk: "Low or High" }], customer: { name: "", email: "", phoneNumber: "", document: { type: "", number: "", country: "" }, address: { zipCode: "", street: "", number: "", complement: "", neighborhood: "", city: "", state: "", country: "" }}} |
paymentFlowMetadata | Objeto para envio das informações de metadata para ser usado na Orquestração de Fluxos Inteligentes. Basta passar um objeto com as chaves definidas na configuração do Fluxo Inteligente e o valor dinâmico que será usado na decisão do Fluxo Inteligente | object | { chave: valor } |
splitRules | Objeto para envio das informações de split de pagamentos. | array | [{ sellerId: "", percentage: "", amount: 0, processingFee: false, liable: false, fares: { mdr: 0, fee: 0 }}] |
Configurando Customer no Antifraude
Reaproveitando um customer do transactionConfig: Caso você configure um customerId pelo transactionConfig e você tenha um nó de fraudAnalysis configurado, este será reaproveitado no fraudAnalysis.
O Malga Checkout também pode ser configurado para enviar ou não este customer, caso ele tenha ou não endereço. Este caso é necessário em alguns provedores, utilizando a flag usePartialCustomer é possível ter os seguintes comportamentos:
- Se configurado como true, o customer configurado será enviado independente do nó de endereço existir;
- Se configurado como false, o customer só será enviado caso possua o nó de endereço.
Caso o fraudAnalysis tenha um customer configurado dentro dele, este sempre irá ser utilizado no lugar do customer do transactionConfig, mas também respeitando as regras do usePartialCustomer.
dialogConfig
Abaixo a lista de propriedades disponíveis para a configuração do dialog de status da transação.
| Property | Description | Type | Default |
|---|---|---|---|
show | Define se o dialog deve ser renderizado. | boolean | true |
actionButtonLabel | Rótulo padrão para os botões de ação do dialog. | string | "Continuar" |
successActionButtonLabel | Rótulo para sucesso nos botões de ação do dialog. | string | "Continuar" |
successRedirectUrl | URL para redirecionamento após o sucesso da transação. | string | "" |
errorActionButtonLabel | Rótulo para erro nos botões de ação do dialog. | string | "Tentar Novamente" |
pageConfig
Abaixo a lista de propriedades disponíveis para a configuração da página.
| Property | Description | Type | Default | Example |
|---|---|---|---|---|
brandUrl | Define a URL da imagem que será exibida no cabeçalho da página. | string | "" | |
footerDescription | Define o texto exibido no rodapé da página. | string | "" | |
backRoute | URL para o redirecionamento do botão voltar. | string | "" | |
delivery | Valor em CENTAVOS usado de frete. | number | 0 | |
products | Lista de objetos que compõem os itens do pedido exibidos na página. | array | [] | [ { name: 'Produto 1', quantity: 2, amount: 50, description: 'Descrição do produto 1', sku: '123', risk: 'Low', }, { name: 'Produto 2', quantity: 2, amount: 40, description: 'Descrição do produto 2', sku: '124', risk: 'High', }, ], |
locale
A propriedade locale permite alternar a língua do MalgaCheckout entre português e inglês, as seguintes configurações estão disponíveis:
- Não enviar a propriedade: o MalgaCheckout irá configurar a língua baseado nas configurações do navegador do usuário;
pt-BR,pt_BR,pt: configuração em português;en-US,en_US,en: configuração em inglês.
Além disso, na versão MalgaCheckoutFull, o usuário pode alternar entre as línguas suportadas utilizando um menu no cabeçalho a aplicação.
Tema
Para customização do tema (cor, espaço, tipografia, etc.) você pode sobrescrever as variáveis no arquivo CSS principal do seu site. Abaixo a lista de variáveis suportadas:
:root {
/* Colors */
--malga-checkout-color-page-background: #eef2f6;
--malga-checkout-color-brand-accent-light: #79dbd4;
--malga-checkout-color-brand-accent-normal: #39bfad;
--malga-checkout-color-brand-clean: #c3f4ef;
--malga-checkout-color-brand-light: #79dbd4;
--malga-checkout-color-brand-normal: #39bfad;
--malga-checkout-color-brand-middle: #2fac9b;
--malga-checkout-color-brand-dark: #147f70;
--malga-checkout-color-grey-light: #666666;
--malga-checkout-color-grey-normal: #4d4d4d;
--malga-checkout-color-grey-middle: #333333;
--malga-checkout-color-grey-dark: #1a1a1a;
--malga-checkout-color-grey-darkness: #000000;
--malga-checkout-color-accent-light: #ffffff;
--malga-checkout-color-accent-normal: #f1f1f1;
--malga-checkout-color-accent-middle: #cbcbcb;
--malga-checkout-color-warning-light: #fff8e6;
--malga-checkout-color-warning-normal: #f9df8d;
--malga-checkout-color-warning-middle: #ffa400;
--malga-checkout-color-modal-success: #00ae42;
--malga-checkout-color-modal-error: #ed3a3d;
--malga-checkout-color-modal-neutral: #4d4d4d;
--malga-checkout-color-modal-action-button-error: #000000;
--malga-checkout-color-modal-action-button-error-hover: #333333;
--malga-checkout-color-modal-action-button-success: #000000;
--malga-checkout-color-modal-action-button-success-hover: #333333;
--malga-checkout-color-modal-action-button-success-font-color: #ffffff;
--malga-checkout-color-modal-action-button-error-font-color: #ffffff;
/* Typography */
--malga-checkout-typography-family: "Inter", sans-serif;
/* Spacings */
--malga-checkout-spacing-xxs: 4px;
--malga-checkout-spacing-xs: 8px;
--malga-checkout-spacing-sm: 16px;
--malga-checkout-spacing-default: 24px;
--malga-checkout-spacing-md: 32px;
--malga-checkout-spacing-lg: 48px;
--malga-checkout-spacing-xlg: 64px;
--malga-checkout-spacing-xxlg: 96px;
/* Sizes */
--malga-checkout-size-min-width: 250px;
/* Border Radius */
--malga-checkout-border-radius-default: 4px;
--malga-checkout-border-radius-md: 6px;
--malga-checkout-border-radius-lg: 20px;
/* Transitions Time */
--malga-checkout-transition-slow: 0.3s;
--malga-checkout-transition-default: 0.5s;
}
Veja um exemplo clicando aqui.