SDK Angular.js

Get started

Adicione como dependência no seu site o checkout SDK

npm2yarn

npm install --save @malga-checkout/angular

Importe o Malga Checkout no seu `app.module.ts`

import { MalgaCheckoutModule } from '@malga-checkout/angular'

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, MalgaCheckoutModule],
  providers: [],
  bootstrap: [AppComponent],
})

O seu app.module.ts deve ficar semelhante a isso

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { MalgaCheckoutModule } from "@malga-checkout/angular";

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, MalgaCheckoutModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Agora basta você usar o Malga Checkout em um dos seus componentes no arquivo component.html

<malga-checkout
  publicKey="<YOUR_PUBLIC_KEY>"
  clientId="<YOUR_CLIENT_ID>"
  merchantId="<YOUR_MERCHANT_ID>"
  [paymentMethods]="paymentMethods"
  [transactionConfig]="transactionConfig"
  [dialogConfig]="dialogConfig"
  (paymentSuccess)="handlePaymentSuccess"
  (paymentFailed)="handlePaymentFailed"
>
</malga-checkout>

E no arquivo component.ts

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  paymentMethods = {
    pix: {
      expiresIn: 600,
      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: {
      items: [
        {
          id: "123",
          title: "Produto",
          quantity: 1,
          unitPrice: 100,
        },
      ],
      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",
    },
  };

  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/",
    pixFilledProgressBarColor: "#2FAC9B",
    pixEmptyProgressBarColor: "#D8DFF0",
  };

  handlePaymentSuccess(data: MalgaCheckoutSuccess) {
    // Your specifications here
  }

  handlePaymentFailed(error: MalgaCheckoutError) {
    // Your specifications here
  }
}

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`
`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 }`
`paymentSuccess`	Evento chamado após o sucesso em uma transação.	`function`	`undefined`
`paymentFailed`	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", }`

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

`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 customer pelo transactionConfig, seja objeto completo ou customerId, 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"`

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

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

SDK Angular.js

Get started

Adicione como dependência no seu site o checkout SDK

Importe o Malga Checkout no seu `app.module.ts`

Props

Detalhes das Props

`paymentMethods`

`transactionConfig`

`dialogConfig`

`locale`

Tema

​Get started

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

​Importe o Malga Checkout no seu app.module.ts

​Props

​Detalhes das Props

​paymentMethods

​transactionConfig

​dialogConfig

​locale

​Tema

Get started

Adicione como dependência no seu site o checkout SDK

Importe o Malga Checkout no seu `app.module.ts`

Props

Detalhes das Props

`paymentMethods`

`transactionConfig`

`dialogConfig`

`locale`

Tema