Pular para o conteúdo principal

SDK Vue.js

Get started

Para Vue há configurações diferentes conforme a versão que você usa em seu projeto, abaixo será explicado como configurar para o Vue2 e Vue3.

Vue3

Adicione como dependência no seu site o checkout SDK

npm install --save @plug-checkout/vue @plug-checkout/core

Configure seu main.ts

Importe as configurações

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

Agora adicione os customElements e aplique os polyfills para garantir o funcionamento do Web Component

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

Seu main.ts deve ficar semelhante a isso

import { createApp } from "vue";

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

import App from "./App.vue";

const app = createApp(App);

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

Importe o Plug Checkout em um dos seus componentes

<template>
<PlugCheckout
: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,
},
},
}"
:transactionConfig="{
statementDescriptor: '#1 Demonstration Plug Checkout',
amount: 100,
description: '',
orderId: '',
customerId: '',
currency: 'BRL',
capture: false,
}"
:dialogConfig="{
show: true,
actionButtonLabel: 'Continuar',
errorActionButtonLabel: 'Tentar novamente',
successActionButtonLabel: 'Continuar',
successRedirectUrl: 'https://www.plugpagamentos.com/',
pixFilledProgressBarColor: "#344383",
pixEmptyProgressBarColor: "#D8DFF0",
}"
@paymentSuccess="handlePaymentSuccess"
@paymentFailed="handlePaymentFailed"
/>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import PlugCheckout from "@plug-checkout/vue";

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

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 Plug. Clique aqui para ler mais sobre isso na documentação.stringundefined
:clientIdChave para identificar o cliente na Plug. Clique aqui para ler mais sobre isso na documentação.stringundefined
:merchantIdIdentificação de subcontas na Plug. Clique aqui para ler mais sobre isso na documentação.stringundefined
:sandboxFlag para definir se a chamada na API da Plug deve ser feita em ambiente de homologação ou produção.booleanfalse
:transactionConfigObjeto que configura as propriedades da transação.object{ statementDescriptor: '', amount: 0, description: '', orderId: '', customerId: '', currency: 'BRL', capture: false, customer: 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: "#344383", pixEmptyProgressBarColor: "#D8DFF0" }
:paymentMethodsObjeto que configura os métodos de pagamento que devem ser renderizados.object{ pix: undefined, credit: undefined, boleto: undefined, }
@paymentSuccessEvento chamado após o sucesso em uma transação.functionundefined
@paymentFailedEvento chamado após a falha em uma transação.functionundefined

Vue2

Adicione como dependência no seu site o checkout SDK

npm install --save @plug-checkout/core

Configure seu main.ts

Importe as configurações

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

Agora adicione os customElements e aplique os polyfills para garantir o funcionamento do Web Component

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

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

Seu main.ts deve ficar semelhante a isso

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

Vue.config.productionTip = false;

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

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

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

Importe o Plug Checkout em um dos seus componentes

<template>
<plug-checkout
: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,
},
},
}"
:transactionConfig.prop="{
statementDescriptor: '#1 Demonstration Plug Checkout',
amount: 100,
description: '',
orderId: '',
customerId: '',
currency: 'BRL',
capture: false,
}"
:dialogConfig.prop="{
show: true,
actionButtonLabel: 'Continuar',
errorActionButtonLabel: 'Tentar novamente',
successActionButtonLabel: 'Continuar',
successRedirectUrl: 'https://www.plugpagamentos.com/',
pixFilledProgressBarColor: "#344383",
pixEmptyProgressBarColor: "#D8DFF0",
}"
@paymentSuccess="handlePaymentSuccess"
@paymentFailed="handlePaymentFailed"
>
</plug-checkout>
</template>

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

Props

Abaixo a lista de propriedades de customização implementadas pelo componente de interface, use de acordo com suas necessidades de personalização.

PropertyDescriptionTypeDefault
:publicKey.propChave pública para aplicações client-side, gerada pela API da Plug. Clique aqui para ler mais sobre isso na documentação.stringundefined
:clientId.propChave para identificar o cliente na Plug. Clique aqui para ler mais sobre isso na documentação.stringundefined
:merchantId.propIdentificação de subcontas na Plug. Clique aqui para ler mais sobre isso na documentação.stringundefined
:sandbox.propFlag para definir se a chamada na API da Plug deve ser feita em ambiente de homologação ou produção.booleanfalse
:transactionConfig.propObjeto que configura as propriedades da transação.object{ statementDescriptor: '', amount: 0, description: '', orderId: '', customerId: '', currency: 'BRL', capture: false, customer: null }
:dialogConfig.propObjeto que configura o dialog que exibe o status da transação.object{ show: true, actionButtonLabel: 'Continuar', successActionButtonLabel: 'Continuar', errorActionButtonLabel: 'Tentar Novamente', successRedirectUrl: '', pixFilledProgressBarColor: "#344383", pixEmptyProgressBarColor: "#D8DFF0" }
:paymentMethods.propObjeto que configura os métodos de pagamento que devem ser renderizados.object{ pix: undefined, credit: undefined, boleto: undefined, }
@paymentSuccessEvento chamado após o sucesso em uma transação.functionundefined
@paymentFailedEvento 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{ quantity: 1, show: true, showCreditCard: true },
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: "", identification: "", 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.

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"
pixFilledProgressBarColorCor que indica o preenchimento do contador do PIX.string"#344383"
pixEmptyProgressBarColorCor que indica o fundo do contador do PIX.string"#D8DFF0"

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 */
--plug-checkout-color-brand-accent-light: #4ebff1;
--plug-checkout-color-brand-accent-normal: #0055a2;

--plug-checkout-color-brand-clean: #d8dff0;
--plug-checkout-color-brand-light: #0091ea;
--plug-checkout-color-brand-normal: #5c7ec0;
--plug-checkout-color-brand-middle: #344383;
--plug-checkout-color-brand-dark: #141b4d;

--plug-checkout-color-grey-light: #aaafc5;
--plug-checkout-color-grey-normal: #8b90a7;
--plug-checkout-color-grey-middle: #5e6277;
--plug-checkout-color-grey-dark: #3f4252;
--plug-checkout-color-grey-darkness: #1d1f2a;

--plug-checkout-color-accent-light: #ffffff;
--plug-checkout-color-accent-normal: #eef2f6;
--plug-checkout-color-accent-middle: #aebfd0;

--plug-checkout-color-warning-light: #fff8e1;
--plug-checkout-color-warning-normal: #fac30e;
--plug-checkout-color-warning-middle: #ffa200;

--plug-checkout-color-modal-success: #32c000;
--plug-checkout-color-modal-error: #ff1744;
--plug-checkout-color-modal-action-button-error: #344383;
--plug-checkout-color-modal-action-button-error-hover: #5c7ec0;
--plug-checkout-color-modal-action-button-success: #344383;
--plug-checkout-color-modal-action-button-success-hover: #5c7ec0;
--plug-checkout-color-modal-action-button-success-font-color: #ffffff;
--plug-checkout-color-modal-action-button-error-font-color: #ffffff;

/* Typography */
--plug-checkout-typography-family: "Roboto", sans-serif;

/* Spacings */
--plug-checkout-spacing-xxs: 4px;
--plug-checkout-spacing-xs: 8px;
--plug-checkout-spacing-sm: 16px;
--plug-checkout-spacing-default: 24px;
--plug-checkout-spacing-md: 32px;
--plug-checkout-spacing-lg: 48px;
--plug-checkout-spacing-xlg: 64px;
--plug-checkout-spacing-xxlg: 96px;

/* Sizes */
--plug-checkout-size-min-width: 250px;

/* Border Radius */
--plug-checkout-border-radius-default: 4px;
--plug-checkout-border-radius-md: 6px;
--plug-checkout-border-radius-lg: 20px;

/* Transitions Time */
--plug-checkout-transition-slow: 0.3s;
--plug-checkout-transition-default: 0.5s;
}

Veja um exemplo clicando aqui.