lint fixes
This commit is contained in:
RcleydsonR
parent
b87afd30e1
commit
bebf8232ee
@ -1,80 +1,87 @@
|
||||
import qrcode from 'qrcode';
|
||||
import type {QRCodeToDataURLOptions} from 'qrcode';
|
||||
import { crc16ccitt } from 'crc';
|
||||
import qrcode from "qrcode";
|
||||
import type { QRCodeToDataURLOptions } from "qrcode";
|
||||
import { crc16ccitt } from "crc";
|
||||
|
||||
interface PixParams {
|
||||
pixKey: string;
|
||||
merchantCity: string;
|
||||
merchantName: string;
|
||||
value?: number;
|
||||
transactionId?: string;
|
||||
message?: string;
|
||||
cep?: string;
|
||||
currency?: number;
|
||||
countryCode?: string;
|
||||
pixKey: string;
|
||||
merchantCity: string;
|
||||
merchantName: string;
|
||||
value?: number;
|
||||
transactionId?: string;
|
||||
message?: string;
|
||||
cep?: string;
|
||||
currency?: number;
|
||||
countryCode?: string;
|
||||
}
|
||||
|
||||
const Pix = ({
|
||||
pixKey,
|
||||
merchantCity,
|
||||
merchantName,
|
||||
value,
|
||||
message,
|
||||
cep,
|
||||
transactionId = '',
|
||||
currency = 986,
|
||||
countryCode = 'BR',
|
||||
pixKey,
|
||||
merchantCity,
|
||||
merchantName,
|
||||
value,
|
||||
message,
|
||||
cep,
|
||||
transactionId = "",
|
||||
currency = 986,
|
||||
countryCode = "BR",
|
||||
}: PixParams) => {
|
||||
const payloadKeyString = generatePixKey(pixKey, message);
|
||||
const payloadKeyString = generatePixKey(pixKey, message);
|
||||
|
||||
const payload: string[] = [
|
||||
formatEMV('00', '01'), //Payload Format Indicator
|
||||
formatEMV('26', payloadKeyString), // Merchant Account Information
|
||||
formatEMV('52', '0000'), //Merchant Category Code
|
||||
formatEMV('53', String(currency)), // Transaction Currency
|
||||
];
|
||||
const payload: string[] = [
|
||||
formatEMV("00", "01"), //Payload Format Indicator
|
||||
formatEMV("26", payloadKeyString), // Merchant Account Information
|
||||
formatEMV("52", "0000"), //Merchant Category Code
|
||||
formatEMV("53", String(currency)), // Transaction Currency
|
||||
];
|
||||
|
||||
if (String(value) === '0') {
|
||||
value = undefined;
|
||||
}
|
||||
if (value) {
|
||||
payload.push(formatEMV('54', value.toFixed(2)));
|
||||
}
|
||||
if (String(value) === "0") {
|
||||
value = undefined;
|
||||
}
|
||||
if (value) {
|
||||
payload.push(formatEMV("54", value.toFixed(2)));
|
||||
}
|
||||
|
||||
payload.push(formatEMV('58', countryCode.toUpperCase())); // Country Code
|
||||
payload.push(formatEMV('59', merchantName)); // Merchant merchantName
|
||||
payload.push(formatEMV('60', merchantCity)); // Merchant merchantCity
|
||||
payload.push(formatEMV("58", countryCode.toUpperCase())); // Country Code
|
||||
payload.push(formatEMV("59", merchantName)); // Merchant merchantName
|
||||
payload.push(formatEMV("60", merchantCity)); // Merchant merchantCity
|
||||
|
||||
if (cep) {
|
||||
payload.push(formatEMV('61', cep)); // Postal Code
|
||||
}
|
||||
if (cep) {
|
||||
payload.push(formatEMV("61", cep)); // Postal Code
|
||||
}
|
||||
|
||||
payload.push(formatEMV('62', formatEMV('05', transactionId))); // Additional Data Field Template
|
||||
payload.push(formatEMV("62", formatEMV("05", transactionId))); // Additional Data Field Template
|
||||
|
||||
payload.push('6304');
|
||||
payload.push("6304");
|
||||
|
||||
const stringPayload = payload.join('');
|
||||
const crcResult = crc16ccitt(stringPayload).toString(16).toUpperCase().padStart(4, '0');
|
||||
const stringPayload = payload.join("");
|
||||
const crcResult = crc16ccitt(stringPayload)
|
||||
.toString(16)
|
||||
.toUpperCase()
|
||||
.padStart(4, "0");
|
||||
|
||||
const payloadPIX = `${stringPayload}${crcResult}`;
|
||||
const payloadPIX = `${stringPayload}${crcResult}`;
|
||||
|
||||
return {
|
||||
payload: (): string => payloadPIX,
|
||||
base64QrCode: (options?: QRCodeToDataURLOptions): Promise<string> => qrcode.toDataURL(payloadPIX, options),
|
||||
};
|
||||
}
|
||||
return {
|
||||
payload: (): string => payloadPIX,
|
||||
base64QrCode: (options?: QRCodeToDataURLOptions): Promise<string> =>
|
||||
qrcode.toDataURL(payloadPIX, options),
|
||||
};
|
||||
};
|
||||
|
||||
const generatePixKey = (pixKey: string, message?: string): string => {
|
||||
const payload: string[] = [formatEMV('00', 'BR.GOV.BCB.PIX'), formatEMV('01', pixKey)];
|
||||
if (message) {
|
||||
payload.push(formatEMV('02', message));
|
||||
}
|
||||
return payload.join('');
|
||||
}
|
||||
const payload: string[] = [
|
||||
formatEMV("00", "BR.GOV.BCB.PIX"),
|
||||
formatEMV("01", pixKey),
|
||||
];
|
||||
if (message) {
|
||||
payload.push(formatEMV("02", message));
|
||||
}
|
||||
return payload.join("");
|
||||
};
|
||||
|
||||
const formatEMV = (id: string, param: string): string => {
|
||||
const len = param.length.toString().padStart(2, '0');
|
||||
return `${id}${len}${param}`;
|
||||
}
|
||||
const formatEMV = (id: string, param: string): string => {
|
||||
const len = param.length.toString().padStart(2, "0");
|
||||
return `${id}${len}${param}`;
|
||||
};
|
||||
|
||||
export {type PixParams, Pix };
|
||||
export { type PixParams, Pix };
|
||||
|
||||
@ -12,31 +12,35 @@ const PixModel = ref({
|
||||
qrCodePayload: "",
|
||||
});
|
||||
|
||||
const qrCode = ref<string>("")
|
||||
const qrCodePayload = ref<string>("")
|
||||
const toggleModal= ref<boolean>(false);
|
||||
const qrCode = ref<string>("");
|
||||
const qrCodePayload = ref<string>("");
|
||||
const toggleModal = ref<boolean>(false);
|
||||
|
||||
const errors = ref({
|
||||
pixRequiredError: false,
|
||||
nameRequiredError: false,
|
||||
cityRequiredError: false
|
||||
cityRequiredError: false,
|
||||
});
|
||||
|
||||
const submit = () => {
|
||||
errors.value['pixRequiredError'] = PixModel.value['pixKey'] == '' ;
|
||||
errors.value['nameRequiredError'] = PixModel.value['name'] == '';
|
||||
errors.value['cityRequiredError'] = PixModel.value['city'] == '';
|
||||
errors.value["pixRequiredError"] = PixModel.value["pixKey"] == "";
|
||||
errors.value["nameRequiredError"] = PixModel.value["name"] == "";
|
||||
errors.value["cityRequiredError"] = PixModel.value["city"] == "";
|
||||
|
||||
if(errors.value['pixRequiredError'] || errors.value['nameRequiredError'] || errors.value['cityRequiredError'])
|
||||
if (
|
||||
errors.value["pixRequiredError"] ||
|
||||
errors.value["nameRequiredError"] ||
|
||||
errors.value["cityRequiredError"]
|
||||
)
|
||||
return;
|
||||
|
||||
const pix = Pix({
|
||||
pixKey: PixModel.value['pixKey'],
|
||||
merchantName: PixModel.value['name'],
|
||||
merchantCity: PixModel.value['city'],
|
||||
transactionId: PixModel.value['transactionId'],
|
||||
message: PixModel.value['message'],
|
||||
value: PixModel.value['value'],
|
||||
pixKey: PixModel.value["pixKey"],
|
||||
merchantName: PixModel.value["name"],
|
||||
merchantCity: PixModel.value["city"],
|
||||
transactionId: PixModel.value["transactionId"],
|
||||
message: PixModel.value["message"],
|
||||
value: PixModel.value["value"],
|
||||
});
|
||||
|
||||
pix.base64QrCode().then((code) => {
|
||||
@ -46,107 +50,168 @@ const submit = () => {
|
||||
qrCodePayload.value = pix.payload();
|
||||
|
||||
toggleModal.value = true;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container">
|
||||
<h2 class="text-center font-bold text-emerald-50 text-2xl">PixModel QR Code</h2>
|
||||
<h2 class="text-center font-bold text-emerald-50 text-2xl">
|
||||
PixModel QR Code
|
||||
</h2>
|
||||
<form>
|
||||
<div class="grid gap-4 grid-cols-1 p-2">
|
||||
<div class="grid gap-4 grid-cols-1 p-2">
|
||||
<div class="col-div">
|
||||
<div class="mb-2">
|
||||
<label for="pixKey" class="form-label">Chave PIX</label>
|
||||
<span v-if="errors['pixRequiredError']" class="required-error">(Esse campo é obrigatório)</span>
|
||||
<span v-if="errors['pixRequiredError']" class="required-error"
|
||||
>(Esse campo é obrigatório)</span
|
||||
>
|
||||
</div>
|
||||
<input type="text" name="pixKey" id="pixKey" class="form-input" v-model="PixModel['pixKey']"/>
|
||||
<input
|
||||
type="text"
|
||||
name="pixKey"
|
||||
id="pixKey"
|
||||
class="form-input"
|
||||
v-model="PixModel['pixKey']"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-div">
|
||||
<div class="mb-2">
|
||||
<label for="name" class="form-label">Nome do beneficiário</label>
|
||||
<span v-if="errors['nameRequiredError']" class="required-error">(Esse campo é obrigatório)</span>
|
||||
<span v-if="errors['nameRequiredError']" class="required-error"
|
||||
>(Esse campo é obrigatório)</span
|
||||
>
|
||||
</div>
|
||||
<input type="text" name="name" id="name" class="form-input" v-model="PixModel['name']"/>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
id="name"
|
||||
class="form-input"
|
||||
v-model="PixModel['name']"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-div">
|
||||
<div class="mb-2">
|
||||
<label for="city" class="form-label">Cidade do beneficiário</label>
|
||||
<span v-if="errors['cityRequiredError']" class="required-error">(Esse campo é obrigatório)</span>
|
||||
<span v-if="errors['cityRequiredError']" class="required-error"
|
||||
>(Esse campo é obrigatório)</span
|
||||
>
|
||||
</div>
|
||||
<input type="text" name="city" id="city" class="form-input" v-model="PixModel['city']"/>
|
||||
<input
|
||||
type="text"
|
||||
name="city"
|
||||
id="city"
|
||||
class="form-input"
|
||||
v-model="PixModel['city']"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-div">
|
||||
<label for="value" class="form-label">Valor de transferência (Opcional)</label>
|
||||
<input type="number" name="value" id="value" class="form-input" v-model="PixModel['value']"/>
|
||||
<label for="value" class="form-label"
|
||||
>Valor de transferência (Opcional)</label
|
||||
>
|
||||
<input
|
||||
type="number"
|
||||
name="value"
|
||||
id="value"
|
||||
class="form-input"
|
||||
v-model="PixModel['value']"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-div">
|
||||
<label for="code" class="form-label">Código da transferência (Opcional)</label>
|
||||
<input type="text" name="code" id="code" class="form-input" v-model="PixModel['transactionId']"/>
|
||||
<label for="code" class="form-label"
|
||||
>Código da transferência (Opcional)</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
name="code"
|
||||
id="code"
|
||||
class="form-input"
|
||||
v-model="PixModel['transactionId']"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-div">
|
||||
<label for="message" class="form-label">Mensagem (Opcional)</label>
|
||||
<input type="text" name="message" id="message" class="form-input" v-model="PixModel['message']"/>
|
||||
<input
|
||||
type="text"
|
||||
name="message"
|
||||
id="message"
|
||||
class="form-input"
|
||||
v-model="PixModel['message']"
|
||||
/>
|
||||
</div>
|
||||
<button type="button" class="button" @click="submit">Gerar QR code</button>
|
||||
<button type="button" class="button" @click="submit">
|
||||
Gerar QR code
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div
|
||||
<div
|
||||
v-if="toggleModal"
|
||||
class="fixed overflow-x-hidden overflow-y-auto inset-0 flex justify-center items-center z-50"
|
||||
>
|
||||
<div class="relative mx-auto w-auto max-w-2xl">
|
||||
<div class="bg-white w-[500px] p-2 rounded shadow-2xl flex flex-col justify-center items-center gap-2">
|
||||
<div
|
||||
class="bg-white w-[500px] p-2 rounded shadow-2xl flex flex-col justify-center items-center gap-2"
|
||||
>
|
||||
<img v-if="qrCode != ''" :src="qrCode" alt="QR code image" />
|
||||
<div>
|
||||
<span class="text-black font-semibold mr-1">Chave PixModel:</span>
|
||||
<span class="text-gray-700">{{PixModel['pixKey']}}</span>
|
||||
<span class="text-gray-700">{{ PixModel["pixKey"] }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-black font-semibold mr-1">Nome do Beneficiário:</span>
|
||||
<span class="text-gray-700">{{PixModel['name']}}</span>
|
||||
<span class="text-black font-semibold mr-1"
|
||||
>Nome do Beneficiário:</span
|
||||
>
|
||||
<span class="text-gray-700">{{ PixModel["name"] }}</span>
|
||||
</div>
|
||||
<div v-if="PixModel['value'] != 0">
|
||||
<span class="text-black font-semibold mr-1">Valor da transferência:</span>
|
||||
<span class="text-gray-700">{{PixModel['value']}}</span>
|
||||
<span class="text-black font-semibold mr-1"
|
||||
>Valor da transferência:</span
|
||||
>
|
||||
<span class="text-gray-700">{{ PixModel["value"] }}</span>
|
||||
</div>
|
||||
<div class="flex flex-col w-auto break-all justify-center items-center">
|
||||
<div
|
||||
class="flex flex-col w-auto break-all justify-center items-center"
|
||||
>
|
||||
<span class="text-black font-semibold mb-2">Código QR Code:</span>
|
||||
<span class="text-gray-700">{{qrCodePayload}}</span>
|
||||
<span class="text-gray-700">{{ qrCodePayload }}</span>
|
||||
</div>
|
||||
<button type="button" class="button" @click="toggleModal=false">Fechar</button>
|
||||
<button type="button" class="button" @click="toggleModal = false">
|
||||
Fechar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="toggleModal"
|
||||
<div
|
||||
v-if="toggleModal"
|
||||
class="fixed z-40 inset-0 opacity-25 bg-black"
|
||||
></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.container{
|
||||
.container {
|
||||
background-color: var(--color-background-indigo);
|
||||
@apply rounded-md p-2 mt-8
|
||||
@apply rounded-md p-2 mt-8;
|
||||
}
|
||||
|
||||
.col-div{
|
||||
@apply flex flex-col
|
||||
.col-div {
|
||||
@apply flex flex-col;
|
||||
}
|
||||
|
||||
.form-input{
|
||||
.form-input {
|
||||
@apply rounded-lg border border-gray-200 p-2 text-black;
|
||||
}
|
||||
|
||||
.form-label{
|
||||
.form-label {
|
||||
@apply font-semibold tracking-wide text-emerald-50;
|
||||
}
|
||||
|
||||
.button{
|
||||
@apply rounded-lg w-full border border-emerald-900 text-white py-2 bg-emerald-600 hover:bg-emerald-500
|
||||
.button {
|
||||
@apply rounded-lg w-full border border-emerald-900 text-white py-2 bg-emerald-600 hover:bg-emerald-500;
|
||||
}
|
||||
|
||||
.required-error{
|
||||
@apply ml-2 text-red-500
|
||||
.required-error {
|
||||
@apply ml-2 text-red-500;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user