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.