app/webpacker/controllers/paymentmethod_controller.js
import { Controller } from "stimulus";
export default class extends Controller {
static targets = ["input"];
connect() {
this.inputTargets.forEach((input) => {
if (input.checked) {
this.setPaymentMethod(input.dataset.paymentmethodId);
}
});
}
selectPaymentMethod(event) {
this.setPaymentMethod(event.target.dataset.paymentmethodId);
// 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) {
Array.from(
document.getElementsByClassName("paymentmethod-container")
).forEach((container) => {
const enabled =
container.dataset.paymentmethodId === paymentMethodContainerId;
if (enabled) {
container.style.display = "block";
this.toggleFieldsEnabled(container, enabled);
} else {
container.style.display = "none";
this.toggleFieldsEnabled(container, enabled);
}
});
}
toggleFieldsEnabled(container, enabled) {
this.subFormElements(container).forEach((field) => {
field.disabled = !enabled;
});
}
subFormElements(container) {
return Array.from(container.querySelectorAll("input, select, textarea"));
}
}