raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-02-15 23:57:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Extract (arrow) functions for callbacks used by event listeners and reduce variable assignments

Browse Source
This commit is contained in:
Matt-Yorkley
2021-12-20 15:23:21 +00:00
parent 24c051bad3
commit 33c156bb55
2 changed files with 39 additions and 41 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{ "data-controller": "stripe", "data-stripe-key": "#{Stripe.publishable_key}", "data-stripe-target": "stripeElementsForm" }
%div{ "data-controller": "stripe", "data-stripe-key": "#{Stripe.publishable_key}" }
.stripe-card
= 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

78
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", "stripeElementsForm" ];
static targets = [ "cardElement", "cardErrors", "expMonth", "expYear", "brand", "last4", "pmId" ];
static styles = {
base: {
fontFamily: "Roboto, Arial, sans-serif",
@@ -14,54 +14,52 @@ export default class extends Controller {
};
connect() {
const stripe = Stripe(this.data.get("key"));
const elements = stripe.elements();
const form = this.pmIdTarget.form;
const error_container = this.cardErrorsTarget;
const exp_month_field = this.expMonthTarget;
const exp_year_field = this.expYearTarget;
const brand_field = this.brandTarget;
const last4_field = this.last4Target;
const pm_id_field = this.pmIdTarget;
const stripeElementsForm = this.stripeElementsFormTarget;
this.parentForm = this.pmIdTarget.form;
const stripe_element = elements.create("card", {
// Initialize Stripe JS
this.stripe = Stripe(this.data.get("key"));
this.stripeElement = this.stripe.elements().create("card", {
style: this.constructor.styles,
hidePostalCode: true
});
// Mount Stripe Elements JS to the field and add form validations
stripe_element.mount(this.cardElementTarget);
stripe_element.addEventListener("change", event => {
if (event.error) {
error_container.textContent = event.error.message;
// Mount Stripe Elements JS to the form field
this.stripeElement.mount(this.cardElementTarget);
this.parentForm.addEventListener("submit", this.stripeSubmit);
this.stripeElement.addEventListener("change", this.updateErrors);
}
// 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.
stripeSubmit = (event) => {
if(!this.stripeSelected()) { return }
event.preventDefault();
event.stopPropagation();
this.stripe.createPaymentMethod({type: "card", card: this.stripeElement}).then(response => {
if (response.error) {
this.updateErrors(response);
} else {
error_container.textContent = "";
this.pmIdTarget.setAttribute("value", response.paymentMethod.id);
this.expMonthTarget.setAttribute("value", response.paymentMethod.card.exp_month);
this.expYearTarget.setAttribute("value", response.paymentMethod.card.exp_year);
this.brandTarget.setAttribute("value", response.paymentMethod.card.brand);
this.last4Target.setAttribute("value", response.paymentMethod.card.last4);
this.parentForm.submit();
}
});
}
// 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 => {
if(!this.stripeSelected()) { return }
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);
form.submit();
}
});
});
// Update validation messages from Stripe shown in the form
updateErrors = (data) => {
if (data.error) {
this.cardErrorsTarget.textContent = data.error.message;
} else {
this.cardErrorsTarget.textContent = "";
}
}
// Boolean; true if Stripe is shown / currently selected