diff --git a/app/webpacker/controllers/paymentmethod_controller.js b/app/webpacker/controllers/paymentmethod_controller.js
index f212524f23..49553c6f63 100644
--- a/app/webpacker/controllers/paymentmethod_controller.js
+++ b/app/webpacker/controllers/paymentmethod_controller.js
@@ -2,14 +2,8 @@ import { Controller } from "stimulus";
 export default class extends Controller {
   static targets = ["paymentMethod"];
 
-  connect() {
-    this.selectPaymentMethod();
-  }
-
-  selectPaymentMethod(event = null) {
-    const paymentMethodContainerId = event
-      ? event.target.dataset.paymentmethodId
-      : null;
+  selectPaymentMethod(event) {
+    const paymentMethodContainerId = event.target.dataset.paymentmethodId;
     Array.from(
       document.getElementsByClassName("paymentmethod-container")
     ).forEach((e) => {
diff --git a/spec/javascripts/stimulus/paymentmethod_controller_test.js b/spec/javascripts/stimulus/paymentmethod_controller_test.js
index a7ad61fe0a..e7af59fec6 100644
--- a/spec/javascripts/stimulus/paymentmethod_controller_test.js
+++ b/spec/javascripts/stimulus/paymentmethod_controller_test.js
@@ -13,9 +13,9 @@ describe("PaymentmethodController", () => {
          <span id="paymentmethod_2" data-action="click->paymentmethod#selectPaymentMethod" data-paymentmethod-id="paymentmethod2" />
          <span id="paymentmethod_3" data-action="click->paymentmethod#selectPaymentMethod" data-paymentmethod-id="paymentmethod3" />
          
-         <div class="paymentmethod-container" id="paymentmethod1"><input type="number" required id="input1" /></div>
-         <div class="paymentmethod-container" id="paymentmethod2"><input type="number" required="true" id="input2" /></div>
-         <div class="paymentmethod-container" id="paymentmethod3"><input type="number" id="input3" /></div>
+         <div class="paymentmethod-container" style="display: none;" id="paymentmethod1"><input type="number" required id="input1" /></div>
+         <div class="paymentmethod-container" style="display: block;" id="paymentmethod2"><input type="number" required="true" id="input2" /></div>
+         <div class="paymentmethod-container" style="display: none;" id="paymentmethod3"><input type="number" id="input3" /></div>
        </div>`;
 
       const application = Application.start();
@@ -32,7 +32,7 @@ describe("PaymentmethodController", () => {
       const paymentMethod3Container = document.getElementById("paymentmethod3");
 
       expect(paymentMethod1Container.style.display).toBe("none");
-      expect(paymentMethod2Container.style.display).toBe("none");
+      expect(paymentMethod2Container.style.display).toBe("block");
       expect(paymentMethod3Container.style.display).toBe("none");
 
       paymentMethod1.click();