🚧🧠🌴 Fix Braintree 3DS in Dev portal (and much more)

app/helpers/payment_details_helper.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module PaymentDetailsHelper
-  delegate :has_billing_address?, :billing_address, to: :current_account
+  delegate :billing_address, to: :current_account
 
   attr_reader :braintree_authorization
 
@@ -61,7 +61,7 @@ def braintree_form_data
       threeDSecureEnabled: site_account.payment_gateway_options[:three_ds_enabled],
       clientToken: braintree_authorization,
       countriesList: merchant_countries,
-      billingAddress: has_billing_address? ? billing_address_data : empty_billing_address_data
+      billingAddress: billing_address_data
     }
   end
 
@@ -78,18 +78,4 @@ def billing_address_data # rubocop:disable Metrics/AbcSize
       zip: billing_address[:zip]
     }.transform_values { |value| value.presence || '' }
   end
-
-  def empty_billing_address_data
-    {
-      firstName: '',
-      lastName: '',
-      address: '',
-      city: '',
-      country: '',
-      company: '',
-      phone: '',
-      state: '',
-      zip: ''
-    }
-  end
 end

app/javascript/packs/braintree_customer_form.ts

@@ -1,17 +1,13 @@
-import { client } from 'braintree-web'
-
-import { createBraintreeClient } from 'PaymentGateways/braintree/braintree'
 import { BraintreeFormWrapper } from 'PaymentGateways/braintree/BraintreeForm'
 import { safeFromJsonString } from 'utilities/json-utils'
 
-import type { Client } from 'braintree-web'
 import type { BraintreeFormDataset } from 'PaymentGateways/braintree/types'
 
 const CONTAINER_ID = 'braintree-form-wrapper'
 
-// eslint-disable-next-line @typescript-eslint/no-misused-promises
-document.addEventListener('DOMContentLoaded', async () => {
+document.addEventListener('DOMContentLoaded', () => {
   const container = document.getElementById(CONTAINER_ID)
+
   if (!container) {
     throw new Error('The target ID was not found: ' + CONTAINER_ID)
   }
@@ -21,16 +17,14 @@ document.addEventListener('DOMContentLoaded', async () => {
   if (!data) {
     throw new Error('Braintree data was not provided')
   }
-  const { billingAddress, clientToken, countriesList, formActionPath, threeDSecureEnabled, selectedCountryCode } = data
 
-  const braintreeClient = await createBraintreeClient(client, clientToken) as Client
+  const { billingAddress, clientToken, countriesList, formActionPath, threeDSecureEnabled } = data
 
   BraintreeFormWrapper({
-    braintreeClient,
-    formActionPath: formActionPath,
-    countriesList: countriesList,
-    selectedCountryCode,
     billingAddress,
+    clientToken,
+    countriesList,
+    formActionPath,
     threeDSecureEnabled
   }, CONTAINER_ID)
 })

app/javascript/packs/braintree_provider_form.ts

@@ -0,0 +1,51 @@
+import * as flash from 'utilities/flash'
+import { createHostedFields } from 'PaymentGateways/braintree/utils/createHostedFields'
+
+import type { BraintreeError } from 'braintree-web'
+
+import 'PaymentGateways/braintree/BraintreeProviderForm.scss'
+
+document.addEventListener('DOMContentLoaded', () => {
+  const form = document.querySelector<HTMLFormElement>('form#new_customer')
+  const submit = document.querySelector<HTMLButtonElement>('button[type="submit"]')
+  const hostedFieldset = document.querySelector<HTMLElement>('fieldset#hosted-fields')
+  const fakeFieldset = document.querySelector<HTMLElement>('fieldset#fake-fields')
+  const nonce = document.querySelector<HTMLInputElement>('input#braintree_nonce')
+
+  if (!(submit && form && hostedFieldset && fakeFieldset && nonce)) {
+    throw new Error('Required elements not found')
+  }
+
+  const clientToken = document.getElementById('braintree_data')?.dataset.clientToken
+
+  if (!clientToken) {
+    throw new Error('Braintree token not found')
+  }
+
+  void createHostedFields(clientToken)
+    .then(hostedFieldsInstance => {
+      fakeFieldset.remove()
+      hostedFieldset.style.display = 'revert'
+      submit.removeAttribute('disabled')
+
+      form.addEventListener('submit', (event: Event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        submit.setAttribute('disabled', 'disabled')
+
+        hostedFieldsInstance.tokenize()
+          .then(payload => {
+            nonce.setAttribute('value', payload.nonce)
+            form.submit()
+          })
+          .catch((error: BraintreeError) => {
+            submit.removeAttribute('disabled')
+            flash.error('Credit card could not be updated.')
+            console.error(error)
+          })
+      })
+    })
+    .catch((error: BraintreeError) => {
+      console.error(error)
+    })
+})