SDK Angular.js

Get started

Adicione como dependência no seu site o checkout SDK

npm
Yarn

npm install --save @malga-checkout/angular

yarn add @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,
    },
    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,
      },
    },
  };

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

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

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

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​