fix: fixes issue with double initializing of BT drop in

VUE-881
kiva · Nov 30, 2021 · b3b2161 · b3b2161
1 parent b134727
commit b3b2161
Show file tree

Hide file tree

Showing 7 changed files with 130 additions and 118 deletions.
diff --git a/src/components/AutoDeposit/AutoDepositDropInPaymentWrapper.vue b/src/components/AutoDeposit/AutoDepositDropInPaymentWrapper.vue
@@ -1,15 +1,17 @@
 <template>
 	<div class="row">
 		<div class="dropin-payment-holder small-12 columns">
-			<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"
+				/>
+			</keep-alive>
 			<div id="dropin-button">
 				<kv-button
 					value="submit"

diff --git a/src/components/Causes/CausesDropInPaymentWrapper.vue b/src/components/Causes/CausesDropInPaymentWrapper.vue
@@ -1,14 +1,16 @@
 <template>
 	<div class="dropin-payment-holder tw-px-0 tw-max-w-md">
-		<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"
+			/>
+		</keep-alive>
 		<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,16 +1,18 @@
 <template>
 	<div class="row align-right">
 		<div class="dropin-payment-holder small-12 columns">
-			<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"
+				/>
+			</keep-alive>
 			<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,15 +1,17 @@
 <template>
 	<div class="row align-center">
 		<div class="dropin-payment-holder small-12 columns">
-			<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"
+				/>
+			</keep-alive>
 			<div id="dropin-button">
 				<kv-button
 					value="submit"

diff --git a/src/components/Payment/BraintreeDropInInterface.vue b/src/components/Payment/BraintreeDropInInterface.vue
@@ -125,74 +125,70 @@ export default {
 			}
 		},
 		initializeDropIn(authToken) {
-			// Prevents BT error in the case this component gets initialized multiple times
-			const isElementEmpty = document.getElementById('dropin-container').innerHTML === '';
-			if (isElementEmpty) {
-				Dropin.create({
-					authorization: authToken,
-					container: '#dropin-container',
-					dataCollector: {
-						kount: true // Required if Kount fraud data collection is enabled
+			Dropin.create({
+				authorization: authToken,
+				container: '#dropin-container',
+				dataCollector: {
+					kount: true // Required if Kount fraud data collection is enabled
+				},
+				// vaultManager: true, - Useful for testing and removing payment methods easily.
+				paymentOptionPriority: this.paymentTypes,
+				preselectVaultedPaymentMethod: this.preselectVaultedPaymentMethod,
+				card: {
+					vault: {
+						allowVaultCardOverride: true,
 					},
-					// vaultManager: true, - Useful for testing and removing payment methods easily.
-					paymentOptionPriority: this.paymentTypes,
-					preselectVaultedPaymentMethod: this.preselectVaultedPaymentMethod,
-					card: {
-						vault: {
-							allowVaultCardOverride: true,
-						},
-					},
-					paypal: {
-						flow: this.flow,
-						amount: numeral(this.amount).format('0.00'),
-						currency: 'USD',
-						buttonStyle: {
-							color: 'gold',
-							shape: 'rect',
-							size: 'responsive',
-						}
+				},
+				paypal: {
+					flow: this.flow,
+					amount: numeral(this.amount).format('0.00'),
+					currency: 'USD',
+					buttonStyle: {
+						color: 'gold',
+						shape: 'rect',
+						size: 'responsive',
+					}
+				},
+				googlePay: {
+					googlePayVersion: 2,
+					merchantId: this.$appConfig.googlePay.merchantId,
+					transactionInfo: {
+						totalPriceStatus: 'FINAL',
+						totalPrice: numeral(this.amount).format('0.00'),
+						currencyCode: 'USD'
 					},
-					googlePay: {
-						googlePayVersion: 2,
-						merchantId: this.$appConfig.googlePay.merchantId,
-						transactionInfo: {
-							totalPriceStatus: 'FINAL',
-							totalPrice: numeral(this.amount).format('0.00'),
-							currencyCode: 'USD'
-						},
-						allowedPaymentMethods: [{
-							type: 'CARD',
-							parameters: {
-								billingAddressRequired: true,
-								billingAddressParameters: {
-									format: 'FULL'
-								}
+					allowedPaymentMethods: [{
+						type: 'CARD',
+						parameters: {
+							billingAddressRequired: true,
+							billingAddressParameters: {
+								format: 'FULL'
 							}
-						}]
-					},
-					applePay: {
-						displayName: 'Kiva',
-						paymentRequest: {
-							total: {
-								label: 'Kiva',
-								amount: numeral(this.amount).format('0.00'),
-							},
-							requiredBillingContactFields: ['postalAddress']
 						}
+					}]
+				},
+				applePay: {
+					displayName: 'Kiva',
+					paymentRequest: {
+						total: {
+							label: 'Kiva',
+							amount: numeral(this.amount).format('0.00'),
+						},
+						requiredBillingContactFields: ['postalAddress']
 					}
-				}).then(btCreateInstance => {
-					this.btDropinInstance = btCreateInstance;
-					this.initializeDropInActions();
-				}).catch(btCreateError => {
-					console.error(btCreateError);
-					Sentry.withScope(scope => {
-						scope.setTag('bt_stage_dropin', 'btCreateError');
-						scope.setTag('bt_client_create_error', btCreateError.message);
-						Sentry.captureException(btCreateError.code);
-					});
-					this.$showTipMsg('An Error has occured. Please refresh the page and try again.', 'error');
+				}
+			}).then(btCreateInstance => {
+				this.btDropinInstance = btCreateInstance;
+				this.initializeDropInActions();
+			}).catch(btCreateError => {
+				console.error(btCreateError);
+				Sentry.withScope(scope => {
+					scope.setTag('bt_stage_dropin', 'btCreateError');
+					scope.setTag('bt_client_create_error', btCreateError.message);
+					Sentry.captureException(btCreateError.code);
 				});
-			}
+				this.$showTipMsg('An Error has occured. Please refresh the page and try again.', 'error');
+			});
 		},
 		initializeDropInActions() {
 			// more info: https://developers.braintreepayments.com/guides/drop-in/customization/javascript/v3#events
@@ -230,8 +226,12 @@ export default {
 		},
 	},
 	mounted() {
-		this.getDropInAuthToken();
-	}
+		// Prevents BT error in the case this component gets initialized multiple times
+		const isElementEmpty = document.getElementById('dropin-container').innerHTML === '';
+		if (isElementEmpty) {
+			this.getDropInAuthToken();
+		}
+	},
 };
 </script>
 

diff --git a/src/pages/Donate/DonateFormDropInPaymentWrapper.vue b/src/pages/Donate/DonateFormDropInPaymentWrapper.vue
@@ -18,15 +18,17 @@
 					subscription settings
 				</router-link>.
 			</kv-alert>
-			<braintree-drop-in-interface
-				v-if="isClientReady && isLoggedIn && !hasExistingAutoDeposit"
-				ref="braintreeDropInInterface"
-				:amount="donateAmountAsString"
-				flow="vault"
-				:payment-types="['paypal', 'card']"
-				:preselect-vaulted-payment-method="true"
-				@transactions-enabled="enableConfirmButton = $event"
-			/>
+			<keep-alive>
+				<braintree-drop-in-interface
+					v-if="isClientReady && isLoggedIn && !hasExistingAutoDeposit"
+					ref="braintreeDropInInterface"
+					:amount="donateAmountAsString"
+					flow="vault"
+					:payment-types="['paypal', 'card']"
+					:preselect-vaulted-payment-method="true"
+					@transactions-enabled="enableConfirmButton = $event"
+				/>
+			</keep-alive>
 			<kv-button
 				v-if="isLoggedIn && !hasExistingAutoDeposit"
 				class="dropin-submit"

diff --git a/src/pages/Settings/PaymentSettings.vue b/src/pages/Settings/PaymentSettings.vue
@@ -61,14 +61,16 @@
 							</kv-button>
 							<transition name="kvfade">
 								<div v-show="showAddACard">
-									<braintree-drop-in-interface
-										v-if="isClientReady"
-										ref="braintreeDropInInterface"
-										:payment-types="['card']"
-										auth="token-key"
-										:key="dropInComponentKey"
-										@transactions-enabled="enableAddCardButton = $event"
-									/>
+									<keep-alive>
+										<braintree-drop-in-interface
+											v-if="isClientReady"
+											ref="braintreeDropInInterface"
+											:payment-types="['card']"
+											auth="token-key"
+											:key="dropInComponentKey"
+											@transactions-enabled="enableAddCardButton = $event"
+										/>
+									</keep-alive>
 								</div>
 							</transition>
 						</fieldset>