raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-01-24 20:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Only submit handle form submit if stripeElementsForm is visible

Browse Source
This commit is contained in:
Jean-Baptiste Bellet
2021-12-16 11:50:38 +01:00
parent e036e9b979
commit 6ef7256295
2 changed files with 31 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/views/split_checkout/payment/_stripe_sca.html.haml
View File

@@ -12,7 +12,7 @@
%label
= t('split_checkout.step2.form.stripe.use_new_card')
%div.stripe-card{ "data-controller": "stripe", "data-stripe-key": "#{Stripe.publishable_key}" }
%div.stripe-card{ "data-controller": "stripe", "data-stripe-key": "#{Stripe.publishable_key}", "data-stripe-target": "stripeElementsForm" }
= hidden_field_tag "order[payments_attributes][][source_attributes][first_name]", @order.bill_address.first_name
= hidden_field_tag "order[payments_attributes][][source_attributes][last_name]", @order.bill_address.last_name
= hidden_field_tag "order[payments_attributes][][source_attributes][month]", nil, { "data-stripe-target": "expMonth" }

46
app/webpacker/controllers/stripe_controller.js
View File

@@ -1,7 +1,7 @@
import { Controller } from "stimulus"
export default class extends Controller {
static targets = [ "cardElement", "cardErrors", "expMonth", "expYear", "brand", "last4", "pmId" ];
static targets = [ "cardElement", "cardErrors", "expMonth", "expYear", "brand", "last4", "pmId", "stripeElementsForm" ];
static styles = {
base: {
fontFamily: "Roboto, Arial, sans-serif",
@@ -23,6 +23,7 @@ export default class extends Controller {
const brand_field = this.brandTarget;
const last4_field = this.last4Target;
const pm_id_field = this.pmIdTarget;
const stripeElementsForm = this.stripeElementsFormTarget;
const stripe_element = elements.create("card", {
style: this.constructor.styles,
@@ -42,22 +43,35 @@ export default class extends Controller {
// Before the form is submitted we send the card details directly to Stripe (via StripeJS),
// and receive a token which represents the card object, and add that token into the form.
form.addEventListener("submit", event => {
event.preventDefault();
event.stopPropagation();
if (this.isVisible(stripeElementsForm)) {
event.preventDefault();
event.stopPropagation();
stripe.createPaymentMethod({type: "card", card: stripe_element}).then(response => {
if (response.error) {
error_container.textContent = response.error.message;
} else {
pm_id_field.setAttribute("value", response.paymentMethod.id);
exp_month_field.setAttribute("value", response.paymentMethod.card.exp_month);
exp_year_field.setAttribute("value", response.paymentMethod.card.exp_year);
brand_field.setAttribute("value", response.paymentMethod.card.brand);
last4_field.setAttribute("value", response.paymentMethod.card.last4);
stripe.createPaymentMethod({type: "card", card: stripe_element}).then(response => {
if (response.error) {
error_container.textContent = response.error.message;
} else {
pm_id_field.setAttribute("value", response.paymentMethod.id);
exp_month_field.setAttribute("value", response.paymentMethod.card.exp_month);
exp_year_field.setAttribute("value", response.paymentMethod.card.exp_year);
brand_field.setAttribute("value", response.paymentMethod.card.brand);
last4_field.setAttribute("value", response.paymentMethod.card.last4);
form.submit();
}
});
form.submit();
}
});
}
});
}
isVisible(element) {
while (element) {
if (window.getComputedStyle(element).display === "none") {
return false;
}
element = element.parentElement;
}
return true;
}
}