> ## Documentation Index
> Fetch the complete documentation index at: https://docs.malga.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Começando em UI SDK's

export const CheckIcon = ({mode, type, id}) => {
  const colorIcons = {
    'error': '#919191',
    'success': '#00AE42',
    'noSupported': '#919191'
  };
  const foundColor = colorIcons[mode];
  const iconType = mode === 'noSupported' ? type : `circle-${type}`;
  return <div className="check-icon" id={id}>
      <Icon icon={iconType} iconType="regular" color={foundColor} size={18} />
    </div>;
};

### Checkout drop-in SDK

O Malga Checkout e Malga Checkout Full são drop-ins (componentes) de interface para web e mobile altamente customizáveis e extensíveis. Através dos Checkouts SDKs você tem disponível para integração interfaces prontas para realizar cobranças por cartão de crédito, pix e boleto sem ter que desenvolver uma linha de código, basta plugar no seu site ou aplicativo e usar.

| Funcionalidade                     | Malga Checkout                            | Malga Checkout Full                       |
| :--------------------------------- | :---------------------------------------- | :---------------------------------------- |
| Módulo PIX                         | <CheckIcon type="check" mode="success" /> | <CheckIcon type="check" mode="success" /> |
| Módulo Cartão de Crédito           | <CheckIcon type="check" mode="success" /> | <CheckIcon type="check" mode="success" /> |
| Módulo Boleto                      | <CheckIcon type="check" mode="success" /> | <CheckIcon type="check" mode="success" /> |
| Módulo NuPay                       | <CheckIcon type="check" mode="success" /> | <CheckIcon type="check" mode="success" /> |
| Módulo Drip                        | <CheckIcon type="check" mode="success" /> | <CheckIcon type="check" mode="success" /> |
| Tokenização de cartão              | <CheckIcon type="check" mode="success" /> | <CheckIcon type="check" mode="success" /> |
| Vincula cartão ao cliente          | <CheckIcon type="check" mode="success" /> | <CheckIcon type="check" mode="success" /> |
| Integra com sessões                | <CheckIcon type="check" mode="success" /> | <CheckIcon type="check" mode="success" /> |
| Altamente customizável             | <CheckIcon type="check" mode="success" /> | <CheckIcon type="check" mode="success" /> |
| Lista de itens do pedido           | <CheckIcon type="xmark" mode="error" />   | <CheckIcon type="check" mode="success" /> |
| Formulário de cadastro de cliente  | <CheckIcon type="xmark" mode="error" />   | <CheckIcon type="check" mode="success" /> |
| Suporta antifraude                 | <CheckIcon type="check" mode="success" /> | <CheckIcon type="check" mode="success" /> |
| Suporta split                      | <CheckIcon type="check" mode="success" /> | <CheckIcon type="check" mode="success" /> |
| Validação de cartões (Zero Dollar) | <CheckIcon type="check" mode="success" /> | <CheckIcon type="check" mode="success" /> |

## Live preview do Malga Checkout

Você pode acessar uma demo do Malga Checkout <a href="https://checkout.vanilla.malga.io/" target="_blank"><strong>neste link</strong></a>.

<Info>Não é possível finalizar um pagamento no preview do Malga Checkout</Info>

<img src="https://mintcdn.com/malga/UNwWMYGJx-7zc-IL/assets/images/sdks/checkout.png?fit=max&auto=format&n=UNwWMYGJx-7zc-IL&q=85&s=391f9b49a0819cdf92893c7fa69f0fbe" alt="Malga Checkout" width="1440" height="900" data-path="assets/images/sdks/checkout.png" />

## Live preview do Malga Checkout Full

Você pode acessar uma demo do Malga Checkout Full <a href="https://checkout-full.vanilla.malga.io/" target="_blank"><strong>neste link</strong></a>.

<Info>
  Não é possível finalizar um pagamento no preview do Malga Checkout Full.
</Info>

<img src="https://mintcdn.com/malga/UNwWMYGJx-7zc-IL/assets/images/sdks/malga-checkout-full.png?fit=max&auto=format&n=UNwWMYGJx-7zc-IL&q=85&s=ff4cc3d48b3889b9218b5e996b836e35" alt="Malga Checkout Full" width="1432" height="852" data-path="assets/images/sdks/malga-checkout-full.png" />

## Benefícios do Malga Checkout e Malga Checkout Full

### Responsivos

O **Malga Checkout** foi projetado para ser responsivo e implementar os métodos de cobrança que você desejar, sem redirecionamento, tudo no seu site. Já o **Malga Checkout Full** entrega os mesmos benefícios de responsividade e métodos de cobrança, porém em uma página completa de checkout.

### Customizáveis

Componentes altamente customizáveis pensados para que você tenha o máximo de flexibilidade para deixar a experiência do seu jeito.

### PCI Level 1

Em conformidade com as melhores práticas de segurança da indústria de pagamentos, com o **Malga Checkout** e **Malga Checkout Full** você pode salvar os dados de cartão para compra futura, de maneira segura.

### Fáceis de usar

Nosso time de desenvolvedores pensou em tudo para simplificar o seu trabalho, o **Malga Checkout** e **Malga Checkout Full** são os únicos do mercado disponibilizados em diversos frameworks, você escolhe se quer usar em React, Angular, Vue, ou javascript vanilla.

## Primeiros passos

1. Crie uma chave pública de autenticação no seu backend.
2. Escolha o SDK que atende melhor a sua necessidade.
3. Inicialize o Malga Checkout escolhido no seu site ou aplicativo com a chave pública de autenticação criada.
4. O Checkout SDK irá coletar os dados necessários para cobrança e criar uma nova transação.
5. Implemente os métodos `paymentSuccess` e `paymentFailed` do Checkout SDK que você usará (verifique a documentação da implementação de cada tecnologia) para receber os dados da autorização criada.
6. Para os métodos de pagamento assíncronos, como PIX e Boleto, implemente o recebimento das notificações de webhooks no seu backend para ser avisado quando um pagamento é confirmado.

## Chave pública de autenticação

É possível criar chaves públicas de acesso temporário à API com escopo e tempo de expiração limitados.

Recomendamos o uso deste tipo de chave quando você tiver que expor a chave em uma aplicação client side.

**Criando uma chave de autenticação pública `POST /v1/auth`**

```bash theme={null}
  curl --location --request POST 'https://api.malga.io/v1/auth' \
    --header 'X-Client-Id: <YOUR_CLIENT_ID>' \
    --header 'X-Api-Key: <YOUR_SECRET_KEY>' \
    --header 'Content-Type: application/json' \
    --data-raw '{
      "scope":["tokens"],
      "expires": 31104000
    }'
```

**Resposta da chave pública criada**

```json theme={null}
{
  "clientId": "<YOUR_CLIENT_ID>",
  "publicKey": "<YOUR_PUBLIC_KEY>",
  "scope": ["tokens"],
  "expires": 31104000,
  "createdAt": "20200110 00:00:00"
}
```

<Warning>
  A sua chave pública criada pode ser usada normalmente como se fosse a chave
  secreta da sua conta, porém com a restrição imposta pelo escopo e sendo
  invalidada após a expiração.
</Warning>

## Implemente o Checkout SDK no seu site ou app

Escolha o SDK ideal para o seu site de acordo com o framework de sua preferência:

* Implementações do Malga Checkout:

  * **[Javascript](/sdks/malga-checkout/js)**
  * **[React](/sdks/malga-checkout/react)**
  * **[Vue](/sdks/malga-checkout/vue)**
  * **[Angular](/sdks/malga-checkout/angular)**

* Implementações do Malga Checkout Full:
  * **[Javascript](/sdks/malga-checkout-full/js)**
  * **[React](/sdks/malga-checkout-full/react)**
  * **[Vue](/sdks/malga-checkout-full/vue)**
  * **[Angular](/sdks/malga-checkout-full/angular)**