Pular para o conteúdo principal

SDK React.js

Get started​

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

npm install --save @malga-checkout-full/react

Importe o Malga Checkout Full em um dos seus componentes​

import MalgaCheckoutFull from "@malga-checkout-full/react";

<MalgaCheckoutFull
  sandbox
  publicKey="<YOUR_PUBLIC_KEY>"
  clientId="<YOUR_CLIENT_ID>"
  merchantId="<YOUR_MERCHANT_ID"
  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,
      },
    },
    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/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/",
  }}
  onTransactionSuccess={(data) => {
    // Your specifications here
  }}
  onTransactionFailed={(error) => {
    // 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.

PropertyDescriptionTypeDefault
publicKeyChave pública para aplicações client-side, gerada pela API da Malga. Clique aqui para ler mais sobre isso na documentação.stringundefined
clientIdChave para identificar o cliente na Malga. Clique aqui para ler mais sobre isso na documentação.stringundefined
merchantIdIdentificação de subcontas na Malga. Clique aqui para ler mais sobre isso na documentação.stringundefined
sessionIdIdentificação de uma sessão na Malga. Clique aqui para ler mais sobre isso na documentação.stringundefined
idempotencyKeyChave 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.stringuuidv4
sandboxFlag para definir se a chamada na API da Malga deve ser feita em ambiente de homologação ou produção.booleanfalse
localeString que define a língua do MalgaCheckout.stringundefined
transactionConfigObjeto 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 }
dialogConfigObjeto 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" }
paymentMethodsObjeto que configura os métodos de pagamento que devem ser renderizados.object{ pix: undefined, credit: undefined, boleto: undefined, drip: undefined, nupay: undefined }
pageConfigObjeto que define a configuração de elementos da página.functionundefined
transactionSuccessEvento chamado após o sucesso em uma transação.functionundefined
transactionFailedEvento chamado após a falha em uma transação.functionundefined

Detalhes das Props​

paymentMethods​

Abaixo a lista de propriedades disponíveis para a configuração dos métodos de pagamento que devem ser renderizados.

PropertyDescriptionTypeDefault
pixObjeto que configura o pagamento com PIX.object{ expiresIn: 600 }
boletoObjeto que configura o pagamento com Boleto.object{ expiresDate: "yyyy-mm-dd", instructions: "", interest: { days: 1, amount: 100 }, fine: { days: 1, amount: 200 }}
creditObjeto que configura o pagamento com Cartão de Crédito.object{ installments: { quantity: 1, show: true }, checkedSaveCard: false, showCreditCard: true, cvvCheck: false, cvvCheckMerchantId: '' },
dripObjeto 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' },
nupayObjeto 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 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.

PropertyDescriptionTypeDefault
statementDescriptorDescrição visível para o comprador.string""
amountValor TOTAL da transação em CENTAVOS.number0
descriptionDescrição da cobrança para consulta futura.string""
orderIdIdentificador único da cobrança do lado do cliente para conciliação futura.string""
currencyIdentificador da moeda para processamento da cobrança.string"BRL"
captureDetermina se a transação deve ser capturada imediatamente.booleanfalse
customerIdIdentificador de um customer já criado para vincular a transação.string""
customerObjeto 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: "" } }
fraudAnalysisObjeto 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 fraudAnalysisobject{ browserFingerprint: "", usePartialCustomer: false, 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: "" }}}
paymentFlowMetadataObjeto 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 Inteligenteobject{ chave: valor }
splitRulesObjeto para envio das informações de split de pagamentos.array[{ sellerId: "", percentage: "", amount: 0, processingFee: false, liable: false, fares: { mdr: 0, fee: 0 }}]
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.

PropertyDescriptionTypeDefault
showDefine se o dialog deve ser renderizado.booleantrue
actionButtonLabelRótulo padrão para os botões de ação do dialog.string"Continuar"
successActionButtonLabelRótulo para sucesso nos botões de ação do dialog.string"Continuar"
successRedirectUrlURL para redirecionamento após o sucesso da transação.string""
errorActionButtonLabelRótulo para erro nos botões de ação do dialog.string"Tentar Novamente"

pageConfig​

Abaixo a lista de propriedades disponíveis para a configuração da página.

PropertyDescriptionTypeDefaultExample
brandUrlDefine a URL da imagem que será exibida no cabeçalho da página.string""
footerDescriptionDefine o texto exibido no rodapé da página.string""
backRouteURL para o redirecionamento do botão voltar.string""
deliveryValor em CENTAVOS usado de frete.number0
productsLista 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.