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: '' },`
`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.

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", 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 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.

Tokenization SDK

API SDKs

UI SDKs

Plugins

Get started

Vue3

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

Configure seu `main.ts`

Importe o Malga Checkout Full em um dos seus componentes

Props

Vue2

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

Configure seu `main.ts`

Importe o Malga Checkout Full em um dos seus componentes

Props

Detalhes das Props

`paymentMethods`

`transactionConfig`

`dialogConfig`

`pageConfig`

`locale`

Tema

Tokenization SDK

API SDKs

UI SDKs

Plugins

​Get started

​Vue3

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

​Configure seu main.ts

​Importe o Malga Checkout Full em um dos seus componentes

​Props

​Vue2

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

​Configure seu main.ts

​Importe o Malga Checkout Full em um dos seus componentes

​Props

​Detalhes das Props

paymentMethods

transactionConfig

dialogConfig

​pageConfig

​locale

​Tema

Get started

Vue3

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

Configure seu `main.ts`

Importe o Malga Checkout Full em um dos seus componentes

Props

Vue2

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

Configure seu `main.ts`

Importe o Malga Checkout Full em um dos seus componentes

Props

Detalhes das Props

`paymentMethods`

`transactionConfig`

`dialogConfig`

`pageConfig`

`locale`

Tema