Draft: Issue #3406817: Refactor add-payment-method form to support address book...

Issue #3406817: Refactor add-payment-method form to support address book values in Stripe Payment Element

Closes #3406817

js/commerce_stripe.payment_element_setup_intent.js

+/**
+ * @file
+ * Defines behaviors for the Stripe Payment Element SetupIntent intent form.
+ */
+
+(($, Drupal, drupalSettings, Stripe) => {
+  /**
+   * Attaches the commerceStripePaymentElementSetupIntent behavior.
+   */
+  Drupal.behaviors.commerceStripePaymentElementSetupIntent = {
+    attach(context) {
+      if (
+        !drupalSettings.commerceStripePaymentElementSetupIntent ||
+        !drupalSettings.commerceStripePaymentElementSetupIntent.publishableKey
+      ) {
+        return;
+      }
+
+      const settings = drupalSettings.commerceStripePaymentElementSetupIntent;
+
+      function processStripeForm() {
+        const $form = $(this).closest('form');
+        const $primaryButton = $form.find(':input.button--primary');
+
+        // Create a Stripe client.
+        const stripe = Stripe(settings.publishableKey);
+
+        // Create an instance of Stripe Elements.
+        const elements = stripe.elements(settings.createElementsOptions);
+        const paymentElement = elements.create(
+          'payment',
+          settings.paymentElementOptions,
+        );
+        paymentElement.mount(`#${settings.elementId}`);
+        paymentElement.on('ready', () => {
+          $primaryButton.prop('disabled', false).removeClass('is-disabled');
+        });
+
+        $form.on('submit.stripe_payment_element', (e) => {
+          // Allow the form to be submitted to Drupal when the
+          // payment method id has been received.
+          if ($('#stripe-payment-method-id', $form).val() != '') {
+            return;
+          }
+
+          e.preventDefault();
+          $primaryButton.prop('disabled', true);
+
+          // Required to submit the form elements to Stripe.
+          elements.submit()
+
+          const billingInfo = getBillingInfo(settings);
+          // Create a payment method from the elements with billing details.
+          stripe
+            .createPaymentMethod({
+              elements,
+              params: {
+                billing_details: {
+                  name: billingInfo.name,
+                  address: billingInfo.address,
+                  email: settings.email,
+                },
+              }
+            })
+            .then((result) => {
+              if (result.error) {
+                // Inform the user if there was an error.
+                // Display the message error in the payment form.
+                Drupal.commerceStripe.displayError(result.error.message);
+                // Allow the customer to re-submit the form.
+                $primaryButton.prop('disabled', false);
+            } else {
+              // Uppon a successful response, set the payment method id
+              // and submit the form to Drupal.
+              $('#stripe-payment-method-id', $form).get(0).value =  result.paymentMethod.id;
+              $primaryButton.prop('disabled', false).removeClass('is-disabled');
+              $primaryButton.click();
+              $primaryButton.prop('disabled', true).addClass('is-disabled');
+            }
+          });
+        });
+      }
+
+      // Resolve the billing details from the add payment form.
+      const getBillingInfo = (settings) =>{
+        let billingInfo = {
+          name: '',
+          address: {},
+        }
+        let billingWrapper = false;
+        if ($('edit-add-payment-method-billing-information').length > 0) {
+          billingWrapper = $('#edit-add-payment-method-billing-information', context);
+        }
+        if ($('edit-payment-information-add-payment-method').length > 0) {
+          billingWrapper = $('#edit-payment-information-add-payment-method', context);
+        }
+
+        // The customer is using a saved address, grab the rendered values.
+        if (billingWrapper && $('.address-line1', billingWrapper).length > 0 && $('.address-line1', billingWrapper).text() != '') {
+          billingInfo.name = $('.name', billingWrapper).text(),
+          billingInfo.address = {
+            line1: $('.address-line1', billingWrapper).text(),
+            line2: $('.address-line2', billingWrapper).text(),
+            city: $('.locality', billingWrapper).text(),
+            state: $('.administrative-area', billingWrapper).text(),
+            postal_code: $('.postal-code', billingWrapper).text(),
+            country: $('.country', billingWrapper).text()
+          }
+        }
+
+        // The customer is using a new address, grab the values from the form.
+        else if ($('[data-stripe="address.line1"]').val() != undefined) {
+          billingInfo.name = $('[data-stripe="name.1"]').val() + ' ' + $('[data-stripe="name.2"]').val(),
+          billingInfo.address = {
+            line1: $('[data-stripe="address.line1"]').val(),
+            line2: $('[data-stripe="address.line2"]').val(),
+            city: $('[data-stripe="address.city"]').val(),
+            state: $('[data-stripe="address.state"]').val(),
+            postal_code: $('[data-stripe="address.postal_code"]').val(),
+            country: $('[data-stripe="address.country"]').val()
+          };
+        }
+
+        // If the billing addres cannot be resolved, it wasn't on the form
+        // and should be copied from the shipping info, if available.
+        if (Object.keys(billingInfo.address).length === 0 && settings.shippingInfo) {
+          billingInfo.address = settings.shippingInfo.address;
+          billingInfo.name = settings.shippingInfo.name;
+        }
+
+        return billingInfo;
+      }
+
+      $(once('stripe-processed', `#${settings.elementId}`, context)).each(
+        processStripeForm,
+      );
+    },
+
+    detach: (context, settings, trigger) => {
+      if (trigger !== 'unload') {
+        return;
+      }
+      const $form = $(
+        `[id^=${drupalSettings.commerceStripePaymentElementSetupIntent.elementId}]`,
+        context,
+      ).closest('form');
+      if ($form.length === 0) {
+        return;
+      }
+      $form.off('submit.stripe_payment_element');
+    },
+  };
+})(jQuery, Drupal, drupalSettings, window.Stripe);