fix: fixes the drop in error in a more robust way

kiva · Dec 1, 2021 · b5ee94c · b5ee94c
1 parent b01e746
commit b5ee94c
Show file tree

Hide file tree

Showing 9 changed files with 798 additions and 789 deletions.
diff --git a/src/components/AutoDeposit/AutoDepositDropInPaymentWrapper.vue b/src/components/AutoDeposit/AutoDepositDropInPaymentWrapper.vue
@@ -1,17 +1,15 @@
 <template>
 	<div class="row">
 		<div class="dropin-payment-holder small-12 columns">
-			<keep-alive>
-				<braintree-drop-in-interface
-					v-if="isClientReady"
-					ref="braintreeDropInInterface"
-					:amount="amount | numeral('0.00')"
-					flow="vault"
-					:payment-types="['paypal', 'card']"
-					:preselect-vaulted-payment-method="action === 'Registration'"
-					@transactions-enabled="enableConfirmButton = $event"
-				/>
-			</keep-alive>
+			<braintree-drop-in-interface
+				v-if="isClientReady"
+				ref="braintreeDropInInterface"
+				:amount="amount | numeral('0.00')"
+				flow="vault"
+				:payment-types="['paypal', 'card']"
+				:preselect-vaulted-payment-method="action === 'Registration'"
+				@transactions-enabled="enableConfirmButton = $event"
+			/>
 			<div id="dropin-button">
 				<kv-button
 					value="submit"

diff --git a/src/components/Causes/CausesDropInPaymentWrapper.vue b/src/components/Causes/CausesDropInPaymentWrapper.vue
@@ -1,16 +1,14 @@
 <template>
 	<div class="dropin-payment-holder tw-px-0 tw-max-w-md">
-		<keep-alive>
-			<braintree-drop-in-interface
-				v-if="isClientReady"
-				ref="braintreeDropInInterface"
-				:amount="amount | numeral('0.00')"
-				flow="vault"
-				:payment-types="['paypal', 'card']"
-				:preselect-vaulted-payment-method="action === 'Registration'"
-				@transactions-enabled="enableConfirmButton = $event"
-			/>
-		</keep-alive>
+		<braintree-drop-in-interface
+			v-if="isClientReady"
+			ref="braintreeDropInInterface"
+			:amount="amount | numeral('0.00')"
+			flow="vault"
+			:payment-types="['paypal', 'card']"
+			:preselect-vaulted-payment-method="action === 'Registration'"
+			@transactions-enabled="enableConfirmButton = $event"
+		/>
 		<div id="dropin-submit" class="tw-w-full">
 			<kv-button
 				:state="buttonState"

diff --git a/src/components/Checkout/CheckoutDropInPaymentWrapper.vue b/src/components/Checkout/CheckoutDropInPaymentWrapper.vue
@@ -1,18 +1,16 @@
 <template>
 	<div class="row align-right">
 		<div class="dropin-payment-holder small-12 columns">
-			<keep-alive>
-				<braintree-drop-in-interface
-					v-if="isClientReady"
-					ref="braintreeDropInInterface"
-					:amount="amount"
-					flow="checkout"
-					:payment-types="paymentTypes"
-					:preselect-vaulted-payment-method="!isGuestCheckout"
-					:auth="isGuestCheckout ? 'token-key' : 'client-token'"
-					@transactions-enabled="enableCheckoutButton = $event"
-				/>
-			</keep-alive>
+			<braintree-drop-in-interface
+				v-if="isClientReady"
+				ref="braintreeDropInInterface"
+				:amount="amount"
+				flow="checkout"
+				:payment-types="paymentTypes"
+				:preselect-vaulted-payment-method="!isGuestCheckout"
+				:auth="isGuestCheckout ? 'token-key' : 'client-token'"
+				@transactions-enabled="enableCheckoutButton = $event"
+			/>
 			<div v-if="isGuestCheckout" id="guest-checkout">
 				<label class="input-label" for="email">
 					Where should we email your receipt?

diff --git a/src/components/MonthlyGood/MonthlyGoodDropInPaymentWrapper.vue b/src/components/MonthlyGood/MonthlyGoodDropInPaymentWrapper.vue
@@ -1,17 +1,15 @@
 <template>
 	<div class="row align-center">
 		<div class="dropin-payment-holder small-12 columns">
-			<keep-alive>
-				<braintree-drop-in-interface
-					v-if="isClientReady"
-					ref="braintreeDropInInterface"
-					:amount="amount | numeral('0.00')"
-					flow="vault"
-					:payment-types="['paypal', 'card']"
-					:preselect-vaulted-payment-method="action === 'Registration'"
-					@transactions-enabled="enableConfirmButton = $event"
-				/>
-			</keep-alive>
+			<braintree-drop-in-interface
+				v-if="isClientReady"
+				ref="braintreeDropInInterface"
+				:amount="amount | numeral('0.00')"
+				flow="vault"
+				:payment-types="['paypal', 'card']"
+				:preselect-vaulted-payment-method="action === 'Registration'"
+				@transactions-enabled="enableConfirmButton = $event"
+			/>
 			<div id="dropin-button">
 				<kv-button
 					value="submit"

diff --git a/src/components/Payment/BraintreeDropInInterface.vue b/src/components/Payment/BraintreeDropInInterface.vue
@@ -227,7 +227,7 @@ export default {
 	},
 	mounted() {
 		// Prevents BT error in the case this component gets initialized multiple times
-		const isElementEmpty = document.getElementById('dropin-container').innerHTML === '';
+		const isElementEmpty = document?.getElementById('dropin-container')?.innerHTML === '';
 		if (isElementEmpty) {
 			this.getDropInAuthToken();
 		}