SDK Vue.js

npm install --save @malga-checkout-full/vue @malga-checkout/core

import {
  applyPolyfills,
  defineCustomElements,
} from "@malga-checkout/core/loader";

applyPolyfills().then(() => {
  defineCustomElements().then(() => {
    app.mount("#app");
  });
});

import { createApp } from "vue";

import {
  applyPolyfills,
  defineCustomElements,
} from "@malga-checkout/core/loader";

import App from "./App.vue";

const app = createApp(App);

applyPolyfills().then(() => {
  defineCustomElements().then(() => {
    app.mount("#app");
  });
});

<template>
  <MalgaCheckoutFull
    :publicKey="<YOUR_PUBLIC_KEY>"
    :clientId="<YOUR_CLIENT_ID>"
    :merchantId="<YOUR_MERCHANT_ID>"
    :paymentMethods="{
      pix: {
        expiresIn: 3600,
      },
      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/assets/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/',
    }"
    @transactionSuccess="handlePaymentSuccess"
    @transactionFailed="handlePaymentFailed"
  />
</template>

<script lang="ts">
import { defineComponent } from "vue";
import MalgaCheckoutFull from "@malga-checkout-full/vue";

export default defineComponent({
  name: "App",
  components: {
    MalgaCheckoutFull,
  },
  methods: {
    handlePaymentSuccess(data) {
      // Your specifications here
    },
    handlePaymentFailed(error) {
      // Your specifications here
    },
  },
});
</script>

npm install --save @malga-checkout/core

import {
  applyPolyfills,
  defineCustomElements,
} from "@malga-checkout/core/loader";

Vue.config.ignoredElements = [/malga-\w*/];

applyPolyfills().then(() => {
  defineCustomElements();
});

import Vue from "vue";
import App from "./App.vue";
import {
  applyPolyfills,
  defineCustomElements,
} from "@malga-checkout/core/loader";

Vue.config.productionTip = false;

Vue.config.ignoredElements = [/malga-\w*/];

applyPolyfills().then(() => {
  defineCustomElements();
});

new Vue({
  render: (h) => h(App),
}).$mount("#app");

<template>
  <malga-checkout-full
    :publicKey.prop="<YOUR_PUBLIC_KEY>"
    :clientId.prop="<YOUR_CLIENT_ID>"
    :merchantId.prop="<YOUR_MERCHANT_ID>"
    :paymentMethods.prop="{
      pix: {
        expiresIn: 3600,
      },
      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/assets/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.prop="{
      statementDescriptor: '#1 Demonstration Malga Checkout',
      amount: 100,
      description: '',
      orderId: '',
      customerId: '',
      currency: 'BRL',
      capture: false,
    }"
    :dialogConfig.prop="{
      show: true,
      actionButtonLabel: 'Continuar',
      errorActionButtonLabel: 'Tentar novamente',
      successActionButtonLabel: 'Continuar',
      successRedirectUrl: 'https://www.malga.io/',
    }"
    @transactionSuccess="handlePaymentSuccess"
    @transactionFailed="handlePaymentFailed"
  >
  </malga-checkout-full>
</template>

<script>
export default {
  methods: {
    handlePaymentSuccess(data) {
      // Your specifications here
    },
    handlePaymentFailed(error) {
      // Your specifications here
    },
  },
};
</script>

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