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

Update Stripe controller hidden fields

Browse Source
This commit is contained in:
Matt-Yorkley
2021-12-03 01:21:13 +00:00
parent 9979ecf8b4
commit 2fe96c5f63
2 changed files with 26 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,13 +13,17 @@
= t('split_checkout.step2.form.stripe.use_new_card')
%div{ "data-controller": "stripe", "data-stripe-key": "#{Stripe.publishable_key}" }
= f.hidden_field :token, { "data-target": "stripe.responseToken" }
= hidden_field_tag "order[payments_attributes][][source_attributes][month]", nil, { "data-stripe-target": "expMonth" }
= hidden_field_tag "order[payments_attributes][][source_attributes][year]", nil, { "data-stripe-target": "expYear" }
= hidden_field_tag "order[payments_attributes][][source_attributes][cc_type]", nil, { "data-stripe-target": "brand" }
= hidden_field_tag "order[payments_attributes][][source_attributes][last_digits]", nil, { "data-stripe-target": "last4" }
= hidden_field_tag "order[payments_attributes][][source_attributes][gateway_payment_profile_id]", nil, { "data-stripe-target": "pmId" }
%div.card-element{ "data-target": "stripe.cardElement" }
%div.card-errors{ "data-target": "stripe.cardErrors" }
%div.card-element{ "data-stripe-target": "cardElement" }
%div.card-errors{ "data-stripe-target": "cardErrors" }
- if spree_current_user
.checkout-input
= check_box_tag :save_card, {id: "save_card", name: "save_card", checked: false, value: "1"}
= label :save_card, t('split_checkout.step2.form.stripe.save_card'), { for: "save_card" }
= check_box_tag "order[payments_attributes][][source_attributes][save_requested_by_customer]", 1, false
= label :save_requested_by_customer, t('split_checkout.step2.form.stripe.save_card'), { for: "save_requested_by_customer" }

24
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", "responseToken" ];
static targets = [ "cardElement", "cardErrors", "expMonth", "expYear", "brand", "last4", "pmId" ];
static styles = {
base: {
fontFamily: "Roboto, Arial, sans-serif",
@@ -16,9 +16,13 @@ export default class extends Controller {
connect() {
const stripe = Stripe(this.data.get("key"));
const elements = stripe.elements();
const form = this.responseTokenTarget.form;
const form = this.pmIdTarget.form;
const error_container = this.cardErrorsTarget;
const token_field = this.responseTokenTarget;
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 stripe_element = elements.create("card", {
style: this.constructor.styles,
@@ -27,7 +31,7 @@ export default class extends Controller {
// Mount Stripe Elements JS to the field and add form validations
stripe_element.mount(this.cardElementTarget);
stripe_element.addEventListener("change", function (event) {
stripe_element.addEventListener("change", event => {
if (event.error) {
error_container.textContent = event.error.message;
} else {
@@ -37,14 +41,20 @@ 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", function (event) {
form.addEventListener("submit", event => {
event.preventDefault();
event.stopPropagation();
stripe.createPaymentMethod({type: "card", card: stripe_element}).then(function (response) {
stripe.createPaymentMethod({type: "card", card: stripe_element}).then(response => {
if (response.error) {
error_container.textContent = response.error.message;
} else {
token_field.setAttribute("value", response.paymentMethod.id);
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();
}
});