Rename QrCode file name and show qrCodePayload instead of pixTarget below QrCode img

src/components/QrCodeComponent.vue

@@ -24,6 +24,8 @@ pixQrCode.base64QrCode().then((code: string) => {
 
 qrCodePayload.value = pixQrCode.payload();
 
+console.log(qrCodePayload);
+
 const handleInputEvent = (event: any) => {
   const { value } = event.target;
 
@@ -73,13 +75,15 @@ const validatePix = async (e2eid: any) => {
     </div>
     <div class="blur-container max-w-[28rem] text-black">
       <div
-        class="flex-col items-center justify-center flex w-full bg-white p-8 rounded-lg"
+        class="flex-col items-center justify-center flex w-full bg-white p-8 rounded-lg break-normal"
       >
         <img :src="qrCode" class="w-48 h-48" />
         <span class="text-center font-bold">Código pix</span>
-        <span class="text-center text-xs">
-          {{ pixTarget }}
-        </span>
+        <div class="break-words w-4/5">
+          <span class="text-center text-xs">
+            {{ qrCodePayload }}
+          </span>
+        </div>
         <img
           alt="Copy PIX code"
           src="@/assets/copyPix.svg"