@pelcro/react-pelcro-js 3.26.0-beta.52 → 3.26.0-beta.54

package/dist/index.esm.js

@@ -11898,7 +11898,7 @@ const debounce = (func, waitTime) => {
   };
 };
 function getSiteCardProcessor() {
-  var _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$site$r3;
+  var _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$site$r3, _window$Pelcro$site$r4;
   if ((_window$Pelcro$site$r = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r !== void 0 && _window$Pelcro$site$r.vantiv_gateway_settings) {
     return "vantiv";
   }
@@ -11908,6 +11908,9 @@ function getSiteCardProcessor() {
   if ((_window$Pelcro$site$r3 = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r3 !== void 0 && _window$Pelcro$site$r3.cybersource_gateway_settings) {
     return "cybersource";
   }
+  if ((_window$Pelcro$site$r4 = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r4 !== void 0 && _window$Pelcro$site$r4.braintree_gateway_settings) {
+    return "braintree";
+  }
   return "stripe";
 }
 function getFourDigitYear(lastTwoDigits) {
@@ -12008,6 +12011,7 @@ const loadPaymentSDKs = () => {
   usePelcro.getStore();
   const supportsVantiv = Boolean(window.Pelcro.site.read().vantiv_gateway_settings);
   const supportsTap = Boolean(window.Pelcro.site.read().tap_gateway_settings);
+  const supportsBraintree = Boolean(window.Pelcro.site.read().braintree_gateway_settings);
   if (!window.Stripe && !supportsVantiv && !supportsTap) {
     pure_1(window.Pelcro.environment.stripe);
   }
@@ -12015,9 +12019,14 @@ const loadPaymentSDKs = () => {
 
   // Load PayPal SDKs
   const supportsPaypal = Boolean(window.Pelcro.site.read().braintree_tokenization);
+  if (supportsPaypal || supportsBraintree) {
+    window.Pelcro.helpers.loadSDK("https://js.braintreegateway.com/web/3.99.0/js/client.min.js", "braintree-sdk");
+  }
   if (supportsPaypal) {
-    window.Pelcro.helpers.loadSDK("https://js.braintreegateway.com/web/3.69.0/js/client.min.js", "braintree-sdk");
-    window.Pelcro.helpers.loadSDK("https://js.braintreegateway.com/web/3.69.0/js/paypal-checkout.min.js", "braintree-paypal-sdk");
+    window.Pelcro.helpers.loadSDK("https://js.braintreegateway.com/web/3.99.0/js/paypal-checkout.min.js", "braintree-paypal-sdk");
+  }
+  if (supportsBraintree) {
+    window.Pelcro.helpers.loadSDK("https://js.braintreegateway.com/web/3.99.0/js/hosted-fields.min.js", "braintree-histed-fields-sdk");
   }
 
   // Load Vantiv SDKs
@@ -17222,7 +17231,7 @@ var _isPaymentGatewayInvalid = /*#__PURE__*/new WeakMap();
 var _generateUserError = /*#__PURE__*/new WeakMap();
 class Payment {
   /**
-   * @param {(StripeGateway|PaypalGateway|VantivGateway|TapGateway|CybersourceGateway)} paymentGateway
+   * @param {(StripeGateway|PaypalGateway|VantivGateway|TapGateway|CybersourceGateway|BraintreeGateway)} paymentGateway
    */
   constructor(paymentGateway) {
     _defineProperty$3(this, "execute", (options, callback) => {
@@ -17241,7 +17250,7 @@ class Payment {
     _classPrivateFieldInitSpec$1(this, _isPaymentGatewayInvalid, {
       writable: true,
       value: gateway => {
-        return gateway && !(gateway instanceof StripeGateway || gateway instanceof PaypalGateway || gateway instanceof VantivGateway || gateway instanceof TapGateway || gateway instanceof CybersourceGateway);
+        return gateway && !(gateway instanceof StripeGateway || gateway instanceof PaypalGateway || gateway instanceof VantivGateway || gateway instanceof TapGateway || gateway instanceof CybersourceGateway || gateway instanceof BraintreeGateway);
       }
     });
     _classPrivateFieldInitSpec$1(this, _generateUserError, {
@@ -17296,7 +17305,8 @@ const PAYMENT_GATEWAYS_ENUM = {
   paypal: "braintree",
   vantiv: "vantiv",
   tap: "tap",
-  cybersource: "cybersource"
+  cybersource: "cybersource",
+  braintree: "braintree"
 };
 
 /**
@@ -18235,6 +18245,218 @@ class CybersourceGateway {
     });
   }
 }
+var _paymentGateway6 = /*#__PURE__*/new WeakMap();
+var _createSubscription6 = /*#__PURE__*/new WeakMap();
+var _renewSubscription5 = /*#__PURE__*/new WeakMap();
+var _createGiftedSubscription6 = /*#__PURE__*/new WeakMap();
+var _renewGiftedSubscription5 = /*#__PURE__*/new WeakMap();
+var _purchaseEcommerceOrder5 = /*#__PURE__*/new WeakMap();
+var _payInvoice6 = /*#__PURE__*/new WeakMap();
+class BraintreeGateway {
+  constructor() {
+    _classPrivateFieldInitSpec$1(this, _paymentGateway6, {
+      writable: true,
+      value: PAYMENT_GATEWAYS_ENUM["braintree"]
+    });
+    _defineProperty$3(this, "execute", (options, callback) => {
+      const types = PAYMENT_TYPES;
+      switch (options.type) {
+        case types.CREATE_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _createSubscription6).call(this, options, callback);
+        case types.RENEW_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _renewSubscription5).call(this, options, callback);
+        case types.CREATE_GIFTED_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _createGiftedSubscription6).call(this, options, callback);
+        case types.RENEW_GIFTED_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _renewGiftedSubscription5).call(this, options, callback);
+        case types.PURCHASE_ECOMMERCE_ORDER:
+          return _classPrivateFieldGet(this, _purchaseEcommerceOrder5).call(this, options, callback);
+        case types.PAY_INVOICE:
+          return _classPrivateFieldGet(this, _payInvoice6).call(this, options, callback);
+        default:
+          console.error("Unsupported payment method: braintree Gateway");
+      }
+    });
+    _classPrivateFieldInitSpec$1(this, _createSubscription6, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          token,
+          plan,
+          couponCode,
+          product,
+          quantity = 1,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway6),
+          gateway_token: token
+        };
+        window.Pelcro.subscription.create({
+          quantity,
+          auth_token: window.Pelcro.user.read().auth_token,
+          plan_id: plan.id,
+          campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
+          coupon_code: couponCode,
+          address_id: product.address_required ? addressId : null,
+          ...params
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+    _classPrivateFieldInitSpec$1(this, _renewSubscription5, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          subscriptionIdToRenew,
+          token,
+          plan,
+          couponCode,
+          product,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway6),
+          gateway_token: token
+        };
+        window.Pelcro.subscription.renew({
+          auth_token: window.Pelcro.user.read().auth_token,
+          plan_id: plan.id,
+          coupon_code: couponCode,
+          campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
+          subscription_id: subscriptionIdToRenew,
+          address_id: product.address_required ? addressId : null,
+          ...params
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+    _classPrivateFieldInitSpec$1(this, _createGiftedSubscription6, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          token,
+          plan,
+          couponCode,
+          product,
+          giftRecipient,
+          quantity = 1,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway6),
+          gateway_token: token
+        };
+        window.Pelcro.subscription.create({
+          quantity,
+          auth_token: window.Pelcro.user.read().auth_token,
+          plan_id: plan.id,
+          coupon_code: couponCode,
+          campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
+          gift_recipient_email: giftRecipient.email,
+          gift_recipient_first_name: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.firstName,
+          gift_recipient_last_name: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.lastName,
+          gift_start_date: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.startDate,
+          gift_message: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.giftMessage,
+          address_id: product.address_required ? addressId : null,
+          ...params
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+    _classPrivateFieldInitSpec$1(this, _renewGiftedSubscription5, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          subscriptionIdToRenew,
+          token,
+          product,
+          plan,
+          couponCode,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway6),
+          gateway_token: token
+        };
+        window.Pelcro.subscription.renewGift({
+          auth_token: window.Pelcro.user.read().auth_token,
+          plan_id: plan.id,
+          coupon_code: couponCode,
+          subscription_id: subscriptionIdToRenew,
+          address_id: product.address_required ? addressId : null,
+          ...params
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+    _classPrivateFieldInitSpec$1(this, _purchaseEcommerceOrder5, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          token,
+          items,
+          couponCode,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway6),
+          gateway_token: token
+        };
+        window.Pelcro.ecommerce.order.create({
+          items,
+          coupon_code: couponCode,
+          campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
+          ...params,
+          ...(addressId && {
+            address_id: addressId
+          })
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+    _classPrivateFieldInitSpec$1(this, _payInvoice6, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          token,
+          invoiceId
+        } = options;
+        const params = options.isExistingSource ? {
+          source_id: token,
+          invoice_id: invoiceId
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway6),
+          gateway_token: token,
+          invoice_id: invoiceId
+        };
+        window.Pelcro.invoice.pay(params, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+  }
+}
 
 /**
  * @typedef {Object} PaymentStateType
@@ -18258,6 +18480,7 @@ class CybersourceGateway {
 const initialState$l = {
   disableSubmit: false,
   isLoading: false,
+  isSkeletonLoaded: false,
   disableCouponButton: false,
   couponObject: null,
   couponCode: "",
@@ -18936,6 +19159,375 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   };
   /* ====== End Tap integration ======== */
 
+  /* ====== Start Braintree integration ======== */
+  const braintreeInstanceRef = React__default.useRef(null);
+  useEffect(() => {
+    if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || props !== null && props !== void 0 && props.freeOrders)) return;
+    if (cardProcessor === "braintree" && !selectedPaymentMethodId) {
+      var _window$Pelcro$site$r6;
+      const {
+        token: braintreeToken
+      } = (_window$Pelcro$site$r6 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r6 === void 0 ? void 0 : _window$Pelcro$site$r6.braintree_gateway_settings;
+      const isBraintreeEnabled = Boolean(braintreeToken);
+      if (!isBraintreeEnabled) {
+        console.error("Braintree integration is currently not enabled on this site's config");
+        return;
+      }
+      braintreeInstanceRef.current = new window.braintree.client.create({
+        authorization: braintreeToken
+      }).then(clientInstance => {
+        const options = {
+          client: clientInstance,
+          styles: {
+            input: {
+              "font-size": "14px"
+            },
+            "input.invalid": {
+              color: "red"
+            },
+            "input.valid": {
+              color: "green"
+            }
+          },
+          fields: {
+            number: {
+              container: "#card-number",
+              placeholder: "4111 1111 1111 1111"
+            },
+            cvv: {
+              container: "#cvv",
+              placeholder: "123"
+            },
+            expirationDate: {
+              container: "#expiration-date",
+              placeholder: "10/2022"
+            }
+          }
+        };
+        dispatch({
+          type: SKELETON_LOADER,
+          payload: true
+        });
+        return window.braintree.hostedFields.create(options);
+      });
+    }
+  }, [selectedPaymentMethodId]);
+  const braintreeErrorHandler = tokenizeErr => {
+    switch (tokenizeErr.code) {
+      case "HOSTED_FIELDS_FIELDS_EMPTY":
+        // occurs when none of the fields are filled in
+        return "All fields are empty! Please fill out the form.";
+      // break;
+      case "HOSTED_FIELDS_FIELDS_INVALID":
+        // occurs when certain fields do not pass client side validation
+        console.error("Some fields are invalid:", tokenizeErr.details.invalidFieldKeys.toString());
+
+        // you can also programmatically access the field containers for the invalid fields
+        // tokenizeErr.details.invalidFields.forEach(function (
+        //   fieldContainer
+        // ) {
+        //   fieldContainer.className = "invalid";
+        // });
+        return `Some fields are invalid: ${tokenizeErr.details.invalidFieldKeys.toString()}`;
+      case "HOSTED_FIELDS_TOKENIZATION_FAIL_ON_DUPLICATE":
+        // occurs when:
+        //   * the client token used for client authorization was generated
+        //     with a customer ID and the fail on duplicate payment method
+        //     option is set to true
+        //   * the card being tokenized has previously been vaulted (with any customer)
+        // See: https://developer.paypal.com/braintree/docs/reference/request/client-token/generate#options.fail_on_duplicate_payment_method
+        return "This payment method already exists in your vault.";
+      case "HOSTED_FIELDS_TOKENIZATION_CVV_VERIFICATION_FAILED":
+        // occurs when:
+        //   * the client token used for client authorization was generated
+        //     with a customer ID and the verify card option is set to true
+        //     and you have credit card verification turned on in the Braintree
+        //     control panel
+        //   * the cvv does not pass verification (https://developer.paypal.com/braintree/docs/reference/general/testing#avs-and-cvv/cid-responses)
+        // See: https://developer.paypal.com/braintree/docs/reference/request/client-token/generate#options.verify_card
+        return "CVV did not pass verification";
+      case "HOSTED_FIELDS_FAILED_TOKENIZATION":
+        // occurs for any other tokenization error on the server
+        return "Tokenization failed server side. Is the card valid?";
+      case "HOSTED_FIELDS_TOKENIZATION_NETWORK_ERROR":
+        // occurs when the Braintree gateway cannot be contacted
+        return "Network error occurred when tokenizing.";
+      default:
+        console.error("Something bad happened!", tokenizeErr);
+        return "Something bad happened!";
+    }
+  };
+  const submitUsingBraintree = (state, dispatch) => {
+    const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
+    if (isUsingExistingPaymentMethod) {
+      // no need to create a new source using braintree
+      return handleBraintreePayment(null, state.couponCode);
+    }
+    if (!braintreeInstanceRef.current) {
+      return console.error("Braintree sdk script wasn't loaded, you need to load braintree sdk before rendering the braintree payment flow");
+    }
+    braintreeInstanceRef.current.then(hostedFieldInstance => {
+      hostedFieldInstance.tokenize((tokenizeErr, payload) => {
+        if (tokenizeErr) {
+          dispatch({
+            type: DISABLE_SUBMIT,
+            payload: false
+          });
+          dispatch({
+            type: LOADING,
+            payload: false
+          });
+          return dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "error",
+              content: braintreeErrorHandler(tokenizeErr)
+            }
+          });
+        }
+        console.log(payload);
+        handleBraintreePayment(payload, state);
+      });
+    }).catch(error => {
+      if (error) {
+        console.error(error);
+        return;
+      }
+    });
+  };
+  const handleBraintreePayment = (braintreePaymentRequest, state) => {
+    const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
+    const braintreeNonce = braintreePaymentRequest === null || braintreePaymentRequest === void 0 ? void 0 : braintreePaymentRequest.nonce;
+    if (type === "createPayment") {
+      handleBraintreeSubscription();
+    } else if (type === "orderCreate") {
+      purchase(new BraintreeGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : braintreeNonce, state, dispatch);
+    } else if (type === "invoicePayment") {
+      payInvoice(new BraintreeGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : braintreeNonce, dispatch);
+    } else if (type === "createPaymentSource") {
+      createNewBraintreeCard();
+    } else if (type === "updatePaymentSource") {
+      updateBraintreeCard();
+    } else if (type === "deletePaymentSource") {
+      replaceBraintreeCard();
+    }
+    function createNewBraintreeCard() {
+      window.Pelcro.paymentMethods.create({
+        auth_token: window.Pelcro.user.read().auth_token,
+        token: braintreeNonce,
+        gateway: "braintree"
+      }, (err, res) => {
+        dispatch({
+          type: DISABLE_SUBMIT,
+          payload: false
+        });
+        dispatch({
+          type: LOADING,
+          payload: false
+        });
+        if (err) {
+          onFailure(err);
+          return dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "error",
+              content: getErrorMessages(err)
+            }
+          });
+        }
+        dispatch({
+          type: SHOW_ALERT,
+          payload: {
+            type: "success",
+            content: t("messages.sourceCreated")
+          }
+        });
+        onSuccess(res);
+      });
+    }
+    function replaceBraintreeCard() {
+      const {
+        id: paymentMethodId
+      } = paymentMethodToDelete;
+      window.Pelcro.paymentMethods.create({
+        auth_token: window.Pelcro.user.read().auth_token,
+        token: braintreeNonce,
+        gateway: "braintree"
+      }, (err, res) => {
+        if (err) {
+          dispatch({
+            type: DISABLE_SUBMIT,
+            payload: false
+          });
+          dispatch({
+            type: LOADING,
+            payload: false
+          });
+          onFailure(err);
+          return dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "error",
+              content: getErrorMessages(err)
+            }
+          });
+        }
+        if (res) {
+          setTimeout(() => {
+            window.Pelcro.paymentMethods.deletePaymentMethod({
+              auth_token: window.Pelcro.user.read().auth_token,
+              payment_method_id: paymentMethodId
+            }, (err, res) => {
+              dispatch({
+                type: DISABLE_SUBMIT,
+                payload: false
+              });
+              dispatch({
+                type: LOADING,
+                payload: false
+              });
+              if (err) {
+                onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
+                return dispatch({
+                  type: SHOW_ALERT,
+                  payload: {
+                    type: "error",
+                    content: getErrorMessages(err)
+                  }
+                });
+              }
+              onSuccess(res);
+            });
+          }, 2000);
+        }
+      });
+    }
+    function updateBraintreeCard() {
+      const {
+        id: paymentMethodId
+      } = paymentMethodToEdit;
+      const {
+        expirationMonth,
+        expirationYear
+      } = braintreePaymentRequest === null || braintreePaymentRequest === void 0 ? void 0 : braintreePaymentRequest.details;
+      const {
+        isDefault
+      } = state;
+      window.Pelcro.paymentMethods.update({
+        auth_token: window.Pelcro.user.read().auth_token,
+        payment_method_id: paymentMethodId,
+        token: braintreeNonce,
+        gateway: "braintree",
+        exp_month: expirationMonth,
+        exp_year: expirationYear,
+        is_default: isDefault
+      }, (err, res) => {
+        dispatch({
+          type: DISABLE_SUBMIT,
+          payload: false
+        });
+        dispatch({
+          type: LOADING,
+          payload: false
+        });
+        if (err) {
+          onFailure(err);
+          return dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "error",
+              content: getErrorMessages(err)
+            }
+          });
+        }
+        dispatch({
+          type: SHOW_ALERT,
+          payload: {
+            type: "success",
+            content: t("messages.sourceUpdated")
+          }
+        });
+        onSuccess(res);
+      });
+    }
+    function handleBraintreeSubscription() {
+      const payment = new Payment(new BraintreeGateway());
+      const createSubscription = !isGift && !subscriptionIdToRenew;
+      const renewSubscription = !isGift && subscriptionIdToRenew;
+      const giftSubscriprition = isGift && !subscriptionIdToRenew;
+      const renewGift = isRenewingGift;
+      if (renewGift) {
+        return payment.execute({
+          type: PAYMENT_TYPES.RENEW_GIFTED_SUBSCRIPTION,
+          token: isUsingExistingPaymentMethod ? selectedPaymentMethodId : braintreeNonce,
+          plan,
+          couponCode,
+          product,
+          isExistingSource: isUsingExistingPaymentMethod,
+          subscriptionIdToRenew,
+          addressId: selectedAddressId
+        }, (err, res) => {
+          if (err) {
+            return handlePaymentError(err);
+          }
+          onSuccess(res);
+        });
+      } else if (giftSubscriprition) {
+        return payment.execute({
+          type: PAYMENT_TYPES.CREATE_GIFTED_SUBSCRIPTION,
+          token: isUsingExistingPaymentMethod ? selectedPaymentMethodId : braintreeNonce,
+          quantity: plan.quantity,
+          plan,
+          couponCode,
+          product,
+          isExistingSource: isUsingExistingPaymentMethod,
+          giftRecipient,
+          addressId: selectedAddressId
+        }, (err, res) => {
+          if (err) {
+            return handlePaymentError(err);
+          }
+          onSuccess(res);
+        });
+      } else if (renewSubscription) {
+        return payment.execute({
+          type: PAYMENT_TYPES.RENEW_SUBSCRIPTION,
+          token: isUsingExistingPaymentMethod ? selectedPaymentMethodId : braintreeNonce,
+          quantity: plan.quantity,
+          plan,
+          couponCode,
+          product,
+          isExistingSource: isUsingExistingPaymentMethod,
+          subscriptionIdToRenew,
+          addressId: selectedAddressId
+        }, (err, res) => {
+          if (err) {
+            return handlePaymentError(err);
+          }
+          onSuccess(res);
+        });
+      } else if (createSubscription) {
+        return payment.execute({
+          type: PAYMENT_TYPES.CREATE_SUBSCRIPTION,
+          token: isUsingExistingPaymentMethod ? selectedPaymentMethodId : braintreeNonce,
+          quantity: plan.quantity,
+          plan,
+          couponCode,
+          product,
+          isExistingSource: isUsingExistingPaymentMethod,
+          addressId: selectedAddressId
+        }, (err, res) => {
+          if (err) {
+            return handlePaymentError(err);
+          }
+          onSuccess(res);
+        });
+      }
+    }
+  };
+
+  /* ====== End Braintree integration ======== */
+
   const submitUsingVantiv = state => {
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
     if (isUsingExistingPaymentMethod) {
@@ -19215,9 +19807,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   useEffect(() => {
     if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || props !== null && props !== void 0 && props.freeOrders)) return;
     if (cardProcessor === "vantiv" && !selectedPaymentMethodId) {
-      var _window$Pelcro$site$r6, _window$Pelcro$site$r7;
-      const payPageId = (_window$Pelcro$site$r6 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r6 === void 0 ? void 0 : _window$Pelcro$site$r6.vantiv_gateway_settings.pay_page_id;
-      const reportGroup = (_window$Pelcro$site$r7 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r7 === void 0 ? void 0 : _window$Pelcro$site$r7.vantiv_gateway_settings.report_group;
+      var _window$Pelcro$site$r7, _window$Pelcro$site$r8;
+      const payPageId = (_window$Pelcro$site$r7 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r7 === void 0 ? void 0 : _window$Pelcro$site$r7.vantiv_gateway_settings.pay_page_id;
+      const reportGroup = (_window$Pelcro$site$r8 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r8 === void 0 ? void 0 : _window$Pelcro$site$r8.vantiv_gateway_settings.report_group;
       vantivInstanceRef.current = new window.EprotectIframeClient({
         paypageId: payPageId,
         reportGroup: reportGroup,
@@ -19356,9 +19948,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
    * Updates the total amount after adding taxes only if site taxes are enabled
    */
   const updateTotalAmountWithTax = () => {
-    var _window$Pelcro$site$r8;
+    var _window$Pelcro$site$r9;
     if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || props !== null && props !== void 0 && props.freeOrders)) return;
-    const taxesEnabled = (_window$Pelcro$site$r8 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r8 === void 0 ? void 0 : _window$Pelcro$site$r8.taxes_enabled;
+    const taxesEnabled = (_window$Pelcro$site$r9 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r9 === void 0 ? void 0 : _window$Pelcro$site$r9.taxes_enabled;
     if (taxesEnabled && type === "createPayment") {
       dispatch({
         type: DISABLE_SUBMIT,
@@ -20372,11 +20964,11 @@ const PaymentMethodContainerWithoutStripe = _ref => {
    * @return {Promise}
    */
   const resolveTaxCalculation = () => {
-    var _window$Pelcro$site$r9;
+    var _window$Pelcro$site$r10;
     if (type === "invoicePayment") {
       return new Promise(resolve => resolve());
     }
-    const taxesEnabled = (_window$Pelcro$site$r9 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r9 === void 0 ? void 0 : _window$Pelcro$site$r9.taxes_enabled;
+    const taxesEnabled = (_window$Pelcro$site$r10 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r10 === void 0 ? void 0 : _window$Pelcro$site$r10.taxes_enabled;
     return new Promise((resolve, reject) => {
       // resolve early if taxes isn't enabled
       if (!taxesEnabled) {
@@ -20542,6 +21134,11 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           ...state,
           isLoading: action.payload
         });
+      case SKELETON_LOADER:
+        return lib_7({
+          ...state,
+          isSkeletonLoaded: action.payload
+        });
       case SHOW_COUPON_FIELD:
         return lib_7({
           ...state,
@@ -20587,8 +21184,8 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           if (getSiteCardProcessor() === "cybersource") {
             return submitUsingCybersource(state, dispatch);
           }
-          if (getSiteCardProcessor() === "cybersource") {
-            return submitUsingCybersource(state, dispatch);
+          if (getSiteCardProcessor() === "braintree") {
+            return submitUsingBraintree(state, dispatch);
           }
           if (selectedPaymentMethodId) {
             if (!isAuthenticated() && plan.type === "donation") {
@@ -21009,6 +21606,11 @@ const CheckoutForm = _ref => {
     paymentMethodToEdit
   } = usePelcro();
   const cardProcessor = getSiteCardProcessor();
+  const {
+    state: {
+      isSkeletonLoaded
+    }
+  } = useContext(store$l);
   if (selectedPaymentMethodId) {
     return null;
   }
@@ -21040,6 +21642,30 @@ const CheckoutForm = _ref => {
       placeholder: "Exp Year *"
     }))));
   }
+  if (cardProcessor === "braintree") {
+    return /*#__PURE__*/React__default.createElement("div", null, isSkeletonLoaded ? /*#__PURE__*/React__default.createElement("div", {
+      className: "plc-max-w-[50em]"
+    }, /*#__PURE__*/React__default.createElement("label", {
+      htmlFor: "card-number"
+    }, "Card Number"), /*#__PURE__*/React__default.createElement("div", {
+      id: "card-number",
+      className: "pelcro-input-field plc-h-12 plc-bg-white"
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "plc-flex plc-items-start plc-space-x-3 plc-mb-4"
+    }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("label", {
+      htmlFor: "expiration-date"
+    }, "Expiration Date"), /*#__PURE__*/React__default.createElement("div", {
+      id: "expiration-date",
+      className: "pelcro-input-field plc-h-12 plc-bg-white"
+    })), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("label", {
+      htmlFor: "cvv"
+    }, "CVV"), /*#__PURE__*/React__default.createElement("div", {
+      id: "cvv",
+      className: "pelcro-input-field plc-h-12 plc-bg-white"
+    })))) : /*#__PURE__*/React__default.createElement("div", {
+      className: "plc-w-full plc-h-36 plc-bg-gray-300 plc-rounded plc-animate-pulse"
+    }));
+  }
   if (cardProcessor === "stripe") {
     if (type === "updatePaymentSource") {
       var _paymentMethodToEdit$;