diff --git a/app/views/split_checkout/payment/_stripe_sca.html.haml b/app/views/split_checkout/payment/_stripe_sca.html.haml index ba451ff37d..24448c7346 100644 --- a/app/views/split_checkout/payment/_stripe_sca.html.haml +++ b/app/views/split_checkout/payment/_stripe_sca.html.haml @@ -1,4 +1,4 @@ -%div{"data-controller": "stripe-cards"} +%div{"data-controller": "stripe-cards", "data-paymentid": "#{payment_method.id}" } - if @saved_credit_cards.any? .checkout-input %label diff --git a/app/webpacker/controllers/paymentmethod_controller.js b/app/webpacker/controllers/paymentmethod_controller.js index b7a1b27e8d..00e607f333 100644 --- a/app/webpacker/controllers/paymentmethod_controller.js +++ b/app/webpacker/controllers/paymentmethod_controller.js @@ -12,17 +12,12 @@ export default class extends Controller { selectPaymentMethod(event) { this.setPaymentMethod(event.target.dataset.paymentmethodId); - - const stripeCardSelector = - this.application.getControllerForElementAndIdentifier( - document - .querySelector( - `[data-paymentmethod-id="${event.target.dataset.paymentmethodId}"]` - ) - .querySelector('[data-controller="stripe-cards"]'), - "stripe-cards" - ); - stripeCardSelector?.initSelectedCard(); + // Send an event to the right (ie. the one with the same paymentmethodId) + // StripeCardsController to initialize the form elements with the selected card + const customEvent = new CustomEvent("stripecards:initSelectedCard", { + detail: event.target.dataset.paymentmethodId, + }); + document.dispatchEvent(customEvent); } setPaymentMethod(paymentMethodContainerId) { diff --git a/app/webpacker/controllers/stripe_cards_controller.js b/app/webpacker/controllers/stripe_cards_controller.js index 98c657867b..2b36f58bfa 100644 --- a/app/webpacker/controllers/stripe_cards_controller.js +++ b/app/webpacker/controllers/stripe_cards_controller.js @@ -7,6 +7,11 @@ export default class extends Controller { connect() { this.initSelectedCard(); + document.addEventListener("stripecards:initSelectedCard", (e) => { + if (e.detail == `paymentmethod${this.element.dataset.paymentid}`) { + this.initSelectedCard(); + } + }); } initSelectedCard() {