diff --git a/src/layouts/payment-page/payment-page.spec.js b/src/layouts/payment-page/payment-page.spec.js
index 1a4fcb80..04d62db0 100644
--- a/src/layouts/payment-page/payment-page.spec.js
+++ b/src/layouts/payment-page/payment-page.spec.js
@@ -463,7 +463,7 @@ describe('payment-page.vue', () => {
             // Act
 
             // Assert
-            const creditCardErrorAlert = wrapper.findComponent({ ref: 'payInAdvanceCreditCardErrorAlert' });
+            const creditCardErrorAlert = wrapper.find('[name="payInAdvanceCreditCardErrorAlert"]');
             expect(creditCardErrorAlert.exists()).toBeTruthy();
             expect(creditCardErrorAlert.isVisible()).toBeTruthy();
         });
diff --git a/src/layouts/payment-page/payment-page.vue b/src/layouts/payment-page/payment-page.vue
index 49afdb03..e2e24d52 100644
--- a/src/layouts/payment-page/payment-page.vue
+++ b/src/layouts/payment-page/payment-page.vue
@@ -6,7 +6,7 @@
                 <div class="container-fluid pb-2 payment">
                     <alert
                         v-if="displayPayInAdvanceCreditCardAlert"
-                        ref="payInAdvanceCreditCardErrorAlert"
+                        name="payInAdvanceCreditCardErrorAlert"
                         class="my-4"
                         cmsWidgetName="PayInAdvanceCreditCardErrorAlertWidget"
                         alertClass="alert-danger"