SDK React.js

Get started

Add checkout full SDK dependency in your project

npm

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

Yarn

yarn add @malga-checkout-full/react

Import Malga Checkout Full in one of yours components

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: "Boleto payment instructions",
      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: "All rights reserved © 2022 Malga.",
    backRoute: "https://www.malga.io/",
    delivery: 0,
    products: [
      {
        name: "Product 1",
        quantity: 2,
        amount: 50,
        description: "Product 1 description",
        sku: "123",
        risk: "Low",
      },
      {
        name: "Product 2",
        quantity: 2,
        amount: 40,
        description: "Product 2 description",
        sku: "124",
        risk: "Low",
      },
    ],
  }}
  transactionConfig={{
    statementDescriptor: "#1 Demonstration Malga Checkout",
    amount: 100,
    description: "",
    orderId: "",
    customerId: "",
    currency: "BRL",
    capture: false,
  }}
  dialogConfig={{
    show: true,
    actionButtonLabel: "Continue",
    errorActionButtonLabel: "Try again",
    successActionButtonLabel: "Continue",
    successRedirectUrl: "https://www.malga.io/",
  }}
  onTransactionSuccess={(data) => {
    // Your specifications here
  }}
  onTransactionFailed={(error) => {
    // Your specifications here
  }}
/>;

Props

Below is the customization properties implemented by the component interface, use it as your needs for personalization.

Property	Description	Type	Default
publicKey	Public key for client-side applications, generated by Malga's API. Click here to read more about it in our documentation.	string	undefined
clientId	Key to identify the customer in Malga. Click here to read more about it in our documentation.	string	undefined
merchantId	Merchant identification in Malga. Click here to read more about it in our documentation.	string	undefined
sessionId	Session identification in Malga. Click here to read more about it in our documentation.	string	undefined
idempotencyKey	Idempotency key, if empty, our checkout itself will generate a new one and bind it with the charge. Click here to read more about it in our documentation.	string	uuidv4
sandbox	Flag to define whether the Malga's API call should be made in homologation or production environment.	boolean	false
locale	String to define MalgaCheckout's language.	string	undefined
transactionConfig	An object that set up charge properties.	object	{ statementDescriptor: '', amount: 0, description: '', orderId: '', customerId: '', currency: 'BRL', capture: false, customer: null, fraudAnalysis: null, paymentFlowMetadata: null, splitRules: null }
dialogConfig	An object that set up the dialog that shows up charge status.	object	{ show: true, actionButtonLabel: 'Continue', successActionButtonLabel: 'Continue', errorActionButtonLabel: 'Try again', successRedirectUrl: '', pixFilledProgressBarColor: "#2FAC9B", pixEmptyProgressBarColor: "#D8DFF0" }
paymentMethods	An object that set up the payment methods that should be rendered.	object	{ pix: undefined, credit: undefined, boleto: undefined, drip: undefined, nupay: undefined }
onTransactionSuccess	An event called after charge was successful.	function	undefined
onTransactionFailed	An event called after the charge was failed.	function	undefined
pageConfig	An object that defines some elements settings of the page.	function	undefined

Detalhes das Props

paymentMethods

Below is the properties list available to set up the payment methods that can be rendered.

Property	Description	Type	Default
pix	Object that sets up payment with PIX.	object	{ expiresIn: 600 }
boleto	Object that sets up payment with Boleto.	object	{ expiresDate: "yyyy-mm-dd", instructions: "", interest: { days: 1, amount: 100 }, fine: { days: 1, amount: 200 }}
credit	Object that sets up payment with Credit Card.	object	{ installments: { quantity: 1, show: true }, checkedSaveCard: false, showCreditCard: true, cvvCheck: false, cvvCheckMerchantId: '' },
drip	Object that sets up payment with 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	Object that sets up payment with 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.

Setting up items in Drip

In the integration with Drip, it is possible to send a list of items. By default, we will use the products you configured in pageConfig.products, but it is possible to override the products sent to Drip using the items property.

transactionConfig

Below is the properties list available to set up a charge.

Property	Description	Type	Default
statementDescriptor	Visible description for the buyer.	string	""
amount	TOTAL charge amount in CENTS.	number	0
description	Charge description for future reference.	string	""
orderId	Unique charge identifier on the customer side for future conciliation.	string	""
currency	Currency identifier for charge processing.	string	"BRL"
capture	Whether the charge should be immediately captured.	boolean	false
customerId	Customer identifier already created to be bonded to the charge.	string	""
customer	An object for automatic customer creation on making a charge when the customerId is not informed.	object	{ name: "", email: "", phoneNumber: "", document: { type: "", number: "", country: "" }, address: { zipCode: "", street: "", number: "", complement: "", neighborhood: "", city: "", state: "", country: "" } }
fraudAnalysis	An object that set up anti-fraud parameters. If the customer object has already been set up on transactionConfig, it won't be necessary to send it inside the fraudAnalysis one.	object	{ 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: "" }}}
paymentFlowMetadata	An object for sending metadata information to be used in Smart Flows Orchestration. Just pass an object with the keys defined in the Smart Flow configuration and the dynamic value that will be used in the Smart Flow decision	object	{ key: value }
splitRules	An object for sending split payments information	array	[{ sellerId: "", percentage: "", amount: 0, processingFee: false, liable: false, fares: { mdr: 0, fee: 0 }}]

Setting up Customer on Anti-fraud

Reusing a customer from transactionConfig: If you set up a customer on transactionConfig, using the customerId, and you have a fraudAnalysis set up, this will be reused on fraudAnalysis.

The Malga Checkout also can be set up to send or not this customer, whether it has or not address. This is necessary in some providers, using the flag usePartialCustomer it's possible to have the following behaviors:

• If it's true, the customer object will be sent independently of whether the address node exists or not.
• If it's If it's false, the customer will be sent if it has the address node., the customer will be sent if it has the address node.

If the fraudAnalysis has a customer inside of it, this customer will always be used instead of the transactionConfig one, but also using the usePartialCustomer rules.

dialogConfig

Below is the properties list available to set up charge dialog status.

Property	Description	Type	Default
show	Whether if the dialog should be rendered.	boolean	true
actionButtonLabel	Default dialog action buttons label.	string	"Continuar"
successActionButtonLabel	Default dialog success action buttons label.	string	"Continuar"
successRedirectUrl	URL for redirecting after charge successful.	string	""
errorActionButtonLabel	Default dialog error buttons label.	string	"Tentar Novamente"
boletoWaitingPaymentMessage	Label used on Boleto payment modal's header.	string	"Pedido aguardando pagamento!"
pixWaitingPaymentMessage	Label used on PIX payment modal's header.	string	"Pedido aguardando pagamento!"
pixImportantMessages	List of texts used on important informations of PIX payments.	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	Color used to fill PIX countdown.	string	"#2FAC9B"
pixEmptyProgressBarColor	Color used on PIX countdown empty background.	string	"#D8DFF0"

pageConfig

Below is the available properties list to set up the page.

Property	Description	Type	Default	Example
brandUrl	Image URL that will be shown on the page header.	string	""
footerDescription	Text that will be shown on the page footer.	string	""
backRoute	URL used on back button redirect.	string	""
delivery	Delivery amount in CENTS.	number	0
products	A list of objects that are part of the cart is shown on the page.	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

The locale properties allow to change MalgaCheckout language between Portuguese and English, the following settings are available:

• Do not submit the property: MalgaCheckout will set up the language based on the user's browser settings;
• pt-BR, pt_BR, pt: Portuguese;
• en-US, en_US, en: English.

In addition, using MalgaCheckoutFull version, the user can change between the supported languages using a context menu on the application header.

Theme

To set up the theme (color, spacing, typography and other things) you can override the variables in the main CSS file of your website. Below is the list of the variables supported:

: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;
}

See an example clicking here.