diff --git a/app/webpacker/controllers/paymentmethod_controller.js b/app/webpacker/controllers/paymentmethod_controller.js
index 285b669834..94189e3f27 100644
--- a/app/webpacker/controllers/paymentmethod_controller.js
+++ b/app/webpacker/controllers/paymentmethod_controller.js
@@ -20,7 +20,7 @@ export default class extends Controller {
           .querySelector('[data-controller="stripe-cards"]'),
         "stripe-cards"
       );
-    stripeCardSelector?.connect();
+    stripeCardSelector?.initSelectedCard();
   }
 
   doSelectPaymentMethod(paymentMethodContainerId) {
diff --git a/app/webpacker/controllers/stripe_cards_controller.js b/app/webpacker/controllers/stripe_cards_controller.js
index f81ef5f0a9..6cd842968a 100644
--- a/app/webpacker/controllers/stripe_cards_controller.js
+++ b/app/webpacker/controllers/stripe_cards_controller.js
@@ -6,6 +6,10 @@ export default class extends Controller {
   static targets = ["stripeelements", "select"];
 
   connect() {
+    this.initSelectedCard()
+  }
+
+  initSelectedCard() {
     if (this.hasSelectTarget) {
       this.selectCard(this.selectTarget.value);
     }