From 2fe96c5f63eb665ca1d261edeab4eac0083115f5 Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Fri, 3 Dec 2021 01:21:13 +0000
Subject: [PATCH] Update Stripe controller hidden fields

---
 .../payment/_stripe_sca.html.haml             | 14 +++++++----
 .../controllers/stripe_controller.js          | 24 +++++++++++++------
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/app/views/split_checkout/payment/_stripe_sca.html.haml b/app/views/split_checkout/payment/_stripe_sca.html.haml
index c65b41d12d..0cfb1c238a 100644
--- a/app/views/split_checkout/payment/_stripe_sca.html.haml
+++ b/app/views/split_checkout/payment/_stripe_sca.html.haml
@@ -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" }
     
\ No newline at end of file
diff --git a/app/webpacker/controllers/stripe_controller.js b/app/webpacker/controllers/stripe_controller.js
index c7f50d47e1..9ebb2deedf 100644
--- a/app/webpacker/controllers/stripe_controller.js
+++ b/app/webpacker/controllers/stripe_controller.js
@@ -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();
         }
       });