> ## Documentation Index > Fetch the complete documentation index at: https://docs.malga.io/llms.txt > Use this file to discover all available pages before exploring further. # SDK Vue.js ## Get started Para Vue há configurações diferentes conforme a versão que você usa em seu projeto, abaixo será explicado como configurar para o Vue2 e Vue3. ### Vue3 #### Adicione como dependência no seu site o checkout full SDK ```bash npm2yarn theme={null} npm install --save @malga-checkout-full/vue @malga-checkout/core ``` #### Configure seu `main.ts` Importe as configurações ```ts theme={null} import { applyPolyfills, defineCustomElements, } from "@malga-checkout/core/loader"; ``` Agora adicione os `customElements` e aplique os `polyfills` para garantir o funcionamento do Web Component ```ts theme={null} applyPolyfills().then(() => { defineCustomElements().then(() => { app.mount("#app"); }); }); ``` Seu `main.ts` deve ficar semelhante a isso ```ts theme={null} import { createApp } from "vue"; import { applyPolyfills, defineCustomElements, } from "@malga-checkout/core/loader"; import App from "./App.vue"; const app = createApp(App); applyPolyfills().then(() => { defineCustomElements().then(() => { app.mount("#app"); }); }); ``` #### Importe o Malga Checkout Full em um dos seus componentes ```jsx theme={null} ``` #### 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](/api-reference/tokens/criar-um-novo-token) para ler mais sobre isso na documentação. | `string` | `undefined` | | `:clientId` | Chave para identificar o cliente na Malga. | `string` | `undefined` | | `:merchantId` | Identificação de subcontas na Malga. [Clique aqui](/api-reference/merchants/listagem-de-merchants-cadastrados) 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](/documentations/more/idempotency) 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` | ### Vue2 #### Adicione como dependência no seu site o checkout full SDK ```bash npm2yarn theme={null} npm install --save @malga-checkout/core ``` #### Configure seu `main.ts` Importe as configurações ```ts theme={null} import { applyPolyfills, defineCustomElements, } from "@malga-checkout/core/loader"; ``` Agora adicione os `customElements` e aplique os `polyfills` para garantir o funcionamento do Web Component ```ts theme={null} Vue.config.ignoredElements = [/malga-\w*/]; applyPolyfills().then(() => { defineCustomElements(); }); ``` Seu `main.ts` deve ficar semelhante a isso ```ts theme={null} import Vue from "vue"; import App from "./App.vue"; import { applyPolyfills, defineCustomElements, } from "@malga-checkout/core/loader"; Vue.config.productionTip = false; Vue.config.ignoredElements = [/malga-\w*/]; applyPolyfills().then(() => { defineCustomElements(); }); new Vue({ render: (h) => h(App), }).$mount("#app"); ``` #### Importe o Malga Checkout Full em um dos seus componentes ```jsx theme={null} ``` ### 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.prop` | Chave pública para aplicações client-side, gerada pela API da Malga. [Clique aqui](/api-reference/tokens/criar-um-novo-token) para ler mais sobre isso na documentação. | `string` | `undefined` | | `:clientId.prop` | Chave para identificar o cliente na Malga. | `string` | `undefined` | | `:merchantId.prop` | Identificação de subcontas na Malga. [Clique aqui](/api-reference/merchants/listagem-de-merchants-cadastrados) para ler mais sobre isso na documentação. | `string` | `undefined` | | `:sessionId.prop` | Identificação de uma sessão na Malga. [Clique aqui](/api-reference/sessions/criar-nova-sessao) para ler mais sobre isso na documentação. | `string` | `undefined` | | `:sandbox.prop` | Flag para definir se a chamada na API da Malga deve ser feita em ambiente de homologação ou produção. | `boolean` | `false` | | `:locale.prop` | String que define a língua do MalgaCheckout. | `string` | `undefined` | | `:transactionConfig.prop` | 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.prop` | 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.prop` | 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: '', recurrence: undefined },` | | `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", }` | Setting up Card Validation To set up card validation via Zero Dollar, simply define the `cvvCheck: true` property within the credit object. By default, we will use the `merchantId` configured in the transaction. If you wish to use a different one, simply define the new `merchantId` in the `cvvCheckMerchantId` property. To learn more about card validation and Zero Dollar, [click here](/documentations/tokenization/zero-dollar). Configurando Recorrência Para configurar cobranças recorrentes com cartão de crédito, defina a propriedade `recurrence` dentro do objeto `credit` com um dos valores: `'initial'` (primeira cobrança da recorrência), `'subsequent'` (cobranças seguintes) ou `'unscheduled'` (cobranças sem agendamento fixo). Exemplo: `credit: { recurrence: 'initial' }` Quando utilizado com sessions via link de pagamento, o valor de `recurrence` configurado no link é a fonte de verdade e sobrescreve qualquer configuração do SDK. Para saber mais sobre recorrência, [clique aqui](/documentations/more/recurrence/charges). 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 sobrescrever 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", categoryId: "" }], 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 }}]` | | `providerReferenceKey` | Identificador único da cobrança do lado do cliente utilizado para referenciar a cobrança do lado do adquirente/provedor. Caso não enviado, a gestão dessa informação será feita pela Malga, que gerará um UUID para cada requisição nova aos provedores. | `string` | `""` | 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"` | | `boletoWaitingPaymentMessage` | Rótulo utilizado no cabeçalho do modal de pagamento do Boleto. | `string` | `"Pedido aguardando pagamento!"` | | `pixWaitingPaymentMessage` | Rótulo utilizado no cabeçalho do modal de pagamento do PIX. | `string` | `"Pedido aguardando pagamento!"` | | `pixImportantMessages` | Lista de textos utilizados para as informações importantes do pagamento com PIX. | `array` | `["Vamos avisar por e-mail quando o banco identificar o depósito. Esse processo é automático.", "Caso o tempo de pagamento tenha expirado e o Pix não tenha sido pago, seu pedido será cancelado automaticamente. Não pague após este horário." ]` | | `pixFilledProgressBarColor` | Cor que indica o preenchimento do contador do PIX. | `string` | `"#2FAC9B"` | | `pixEmptyProgressBarColor` | Cor que indica o fundo do contador do PIX. | `string` | `"#D8DFF0"` | #### `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 da 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: ```css theme={null} :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](https://github.com/plughacker/demo-malga-checkout-full-vue3/blob/main/src/App.vue).