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

npm2yarn

npm install --save @malga-checkout-full/vue @malga-checkout/core

Configure seu main.ts

Importe as configurações

import {
  applyPolyfills,
  defineCustomElements,
} from "@malga-checkout/core/loader";

Agora adicione os customElements e aplique os polyfills para garantir o funcionamento do Web Component

applyPolyfills().then(() => {
  defineCustomElements().then(() => {
    app.mount("#app");
  });
});

Seu main.ts deve ficar semelhante a isso

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

<template>
  <MalgaCheckoutFull
    :publicKey="<YOUR_PUBLIC_KEY>"
    :clientId="<YOUR_CLIENT_ID>"
    :merchantId="<YOUR_MERCHANT_ID>"
    :paymentMethods="{
      pix: {
        expiresIn: 3600,
        items: [
        {
          id: "123",
          title: "Produto",
          quantity: 1,
          unitPrice: 100,
        },
      ],
      },
      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,
        },
        items: [
        {
          id: "123",
          title: "Produto",
          quantity: 1,
          unitPrice: 100,
        },
      ],
      },
      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",
      },
    }"
    :pageConfig="{
      brandUrl: 'https://exampleurl/assets/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',
        },
      ],
    }"
    :transactionConfig="{
      statementDescriptor: '#1 Demonstration Malga Checkout',
      amount: 100,
      description: '',
      orderId: '',
      customerId: '',
      currency: 'BRL',
      capture: false,
    }"
    :dialogConfig="{
      show: true,
      actionButtonLabel: 'Continuar',
      errorActionButtonLabel: 'Tentar novamente',
      successActionButtonLabel: 'Continuar',
      successRedirectUrl: 'https://www.malga.io/',
    }"
    @transactionSuccess="handlePaymentSuccess"
    @transactionFailed="handlePaymentFailed"
  />
</template>

<script lang="ts">
import { defineComponent } from "vue";
import MalgaCheckoutFull from "@malga-checkout-full/vue";

export default defineComponent({
  name: "App",
  components: {
    MalgaCheckoutFull,
  },
  methods: {
    handlePaymentSuccess(data) {
      // Your specifications here
    },
    handlePaymentFailed(error) {
      // Your specifications here
    },
  },
});
</script>

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.	string	undefined
:merchantId	Identificação de subcontas 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

Vue2

Adicione como dependência no seu site o checkout full SDK

npm2yarn

npm install --save @malga-checkout/core

Configure seu main.ts

Importe as configurações

import {
  applyPolyfills,
  defineCustomElements,
} from "@malga-checkout/core/loader";

Agora adicione os customElements e aplique os polyfills para garantir o funcionamento do Web Component

Vue.config.ignoredElements = [/malga-\w*/];

applyPolyfills().then(() => {
  defineCustomElements();
});

Seu main.ts deve ficar semelhante a isso

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

<template>
  <malga-checkout-full
    :publicKey.prop="<YOUR_PUBLIC_KEY>"
    :clientId.prop="<YOUR_CLIENT_ID>"
    :merchantId.prop="<YOUR_MERCHANT_ID>"
    :paymentMethods.prop="{
      pix: {
        expiresIn: 3600,
      },
      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",
      },
    }"
    :pageConfig="{
      brandUrl: 'https://exampleurl/assets/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',
        },
      ],
    }"
    :transactionConfig.prop="{
      statementDescriptor: '#1 Demonstration Malga Checkout',
      amount: 100,
      description: '',
      orderId: '',
      customerId: '',
      currency: 'BRL',
      capture: false,
    }"
    :dialogConfig.prop="{
      show: true,
      actionButtonLabel: 'Continuar',
      errorActionButtonLabel: 'Tentar novamente',
      successActionButtonLabel: 'Continuar',
      successRedirectUrl: 'https://www.malga.io/',
    }"
    @transactionSuccess="handlePaymentSuccess"
    @transactionFailed="handlePaymentFailed"
  >
  </malga-checkout-full>
</template>

<script>
export default {
  methods: {
    handlePaymentSuccess(data) {
      // Your specifications here
    },
    handlePaymentFailed(error) {
      // Your specifications here
    },
  },
};
</script>

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 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 para ler mais sobre isso na documentação.	string	undefined
:sessionId.prop	Identificação de uma sessão na Malga. Clique aqui 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, see card validation and 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.

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á tenha 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 independentemente 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:

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