update flow & screen adjust

components/QRISPayment.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="payment-step">
     <v-card-text class="pa-8 text-center">
-      <div class="mb-4">
+      <div class="mb-2">
         <v-img
-          src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/QRIS_logo.svg/1200px-QRIS_logo.svg.png"
-          height="35"
+          src="https://iconlogovector.com/uploads/images/2024/03/lg-65ffda68a47ee-QRIS.webp"
+          height="100"
           class="mx-auto"
           contain
         />
@@ -19,11 +19,7 @@
           height="280"
           elevation="0"
         >
-          <NuxtQrcode
-            :value="paymentStore.qrData.qrvalue"
-            tag="svg"
-            :options="{ width: 280 }"
-          />
+          <img ref="qrCodeImage" alt="QR Code" width="280" height="280" />
         </v-card>
       </div>
 
@@ -54,14 +50,12 @@
             {{ paymentStore.qrData.display_nobill }}
           </v-col>
         </v-row>
-        
+
         <v-row dense class="mb-4">
           <v-col cols="5" class="text-left">
             <strong>BERLAKU SAMPAI:</strong>
           </v-col>
-          <v-col cols="7" class="text-left text-red">
-            N/A
-          </v-col>
+          <v-col cols="7" class="text-left text-red"> N/A </v-col>
         </v-row>
       </div>
 
@@ -79,11 +73,36 @@
 
 <script setup>
 import { usePaymentStore } from "~/stores/payment";
+import QRCode from 'qrcode';
+import { ref, onMounted, watch } from 'vue';
+
 const paymentStore = usePaymentStore();
+const qrCodeImage = ref(null);
+
+const generateQRCode = async () => {
+    const qrValue = paymentStore.qrData.qrvalue;
+    if (qrValue) {
+        try {
+            const dataUrl = await QRCode.toDataURL(qrValue);
+            if (qrCodeImage.value) {
+                qrCodeImage.value.src = dataUrl;
+            }
+        } catch (error) {
+            console.error('Failed to generate QR Code:', error);
+        }
+    }
+};
+
+onMounted(() => {
+    generateQRCode();
+});
+
+watch(() => paymentStore.qrData, () => {
+    generateQRCode();
+});
 </script>
 
 <style scoped>
-/* Style tetap sama */
 .payment-step {
   background: rgb(233, 233, 233);
 }