@pelcro/react-pelcro-js 3.37.0 → 3.38.0

package/dist/index.esm.js

@@ -11606,7 +11606,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";
   }
@@ -11616,6 +11616,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) {
@@ -11718,6 +11721,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);
   whenUserReady(() => {
     if (!window.Stripe && !supportsVantiv && !supportsTap) {
       pure_1(window.Pelcro.environment.stripe);
@@ -11727,9 +11731,15 @@ 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/three-d-secure.min.js", "braintree-3D-secure-sdk");
+    window.Pelcro.helpers.loadSDK("https://js.braintreegateway.com/web/3.99.0/js/hosted-fields.min.js", "braintree-hosted-fields-sdk");
   }
 
   // Load Vantiv SDKs
@@ -16365,7 +16375,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) => {
@@ -16384,7 +16394,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, {
@@ -16439,7 +16449,8 @@ const PAYMENT_GATEWAYS_ENUM = {
   paypal: "braintree",
   vantiv: "vantiv",
   tap: "tap",
-  cybersource: "cybersource"
+  cybersource: "cybersource",
+  braintree: "braintree"
 };
 
 /**
@@ -17378,6 +17389,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
@@ -17401,6 +17624,7 @@ class CybersourceGateway {
 const initialState$l = {
   disableSubmit: false,
   isLoading: false,
+  isSkeletonLoaded: false,
   disableCouponButton: false,
   couponObject: null,
   couponCode: "",
@@ -18047,23 +18271,591 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   };
   /* ====== End Tap integration ======== */
 
-  const submitUsingVantiv = state => {
+  /* ====== Start Braintree integration  ======== */
+  const braintreeInstanceRef = React__default.useRef(null);
+  const braintree3DSecureInstanceRef = React__default.useRef(null);
+  function getClientToken() {
+    return new Promise((resolve, reject) => {
+      window.Pelcro.payment.generateClientToken({
+        auth_token: window.Pelcro.user.read().auth_token,
+        site_id: window.Pelcro.siteid
+      }, (error, response) => {
+        if (error) {
+          reject(error);
+        }
+        if (response) {
+          resolve(response.client_token);
+        }
+      });
+    });
+  }
+  async function initializeBraintree() {
+    if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || props !== null && props !== void 0 && props.freeOrders)) return;
+    if (cardProcessor === "braintree" && !selectedPaymentMethodId) {
+      const braintreeToken = await getClientToken();
+      const isBraintreeEnabled = Boolean(braintreeToken);
+      if (!isBraintreeEnabled) {
+        console.error("Braintree integration is currently not enabled on this site's config");
+        return;
+      }
+      if (type !== "updatePaymentSource") {
+        braintreeInstanceRef.current = new window.braintree.client.create({
+          authorization: braintreeToken
+        }).then(clientInstance => {
+          const options = {
+            authorization: braintreeToken,
+            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
+          });
+          braintree3DSecureInstanceRef.current = new window.braintree.threeDSecure.create({
+            version: 2,
+            authorization: braintreeToken
+          }).then(threeDSecureInstance => {
+            return threeDSecureInstance;
+          });
+          return window.braintree.hostedFields.create(options);
+        });
+        braintreeInstanceRef.current.then(hostedFieldInstance => {
+          hostedFieldInstance.on("notEmpty", function (event) {
+            const field = event.fields[event.emittedBy];
+            if (field.isPotentiallyValid) {
+              field.container.classList.remove("pelcro-input-invalid");
+            }
+          });
+          hostedFieldInstance.on("validityChange", function (event) {
+            const field = event.fields[event.emittedBy];
+
+            // Remove any previously applied error or warning classes
+            field.container.classList.remove("is-valid");
+            field.container.classList.remove("pelcro-input-invalid");
+            if (field.isValid) {
+              field.container.classList.add("is-valid");
+            } else if (field.isPotentiallyValid) ; else {
+              field.container.classList.add("pelcro-input-invalid");
+            }
+          });
+        });
+      } else if (type == "updatePaymentSource" && paymentMethodToEdit) {
+        const {
+          properties
+        } = paymentMethodToEdit !== null && paymentMethodToEdit !== void 0 ? paymentMethodToEdit : {};
+        const {
+          exp_month: expMonth,
+          exp_year: expYear
+        } = properties !== null && properties !== void 0 ? properties : {};
+        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: {
+              expirationMonth: {
+                container: "#expiration-month",
+                prefill: expMonth
+              },
+              expirationYear: {
+                container: "#expiration-year",
+                prefill: expYear
+              }
+            }
+          };
+          dispatch({
+            type: SKELETON_LOADER,
+            payload: true
+          });
+          return window.braintree.hostedFields.create(options);
+        });
+        braintreeInstanceRef.current.then(hostedFieldInstance => {
+          hostedFieldInstance.on("notEmpty", function (event) {
+            const field = event.fields[event.emittedBy];
+            if (field.isPotentiallyValid) {
+              field.container.classList.remove("pelcro-input-invalid");
+            }
+          });
+          hostedFieldInstance.on("validityChange", function (event) {
+            const field = event.fields[event.emittedBy];
+
+            // Remove any previously applied error or warning classes
+            field.container.classList.remove("is-valid");
+            field.container.classList.remove("pelcro-input-invalid");
+            if (field.isValid) {
+              field.container.classList.add("is-valid");
+            } else if (field.isPotentiallyValid) ; else {
+              field.container.classList.add("pelcro-input-invalid");
+            }
+          });
+        });
+      }
+    }
+  }
+  useEffect(() => {
+    initializeBraintree();
+  }, [selectedPaymentMethodId, paymentMethodToEdit]);
+  const braintreeErrorHandler = tokenizeErr => {
+    var _tokenizeErr$details, _tokenizeErr$details2;
+    const cardNumber = document.querySelector("#card-number");
+    const expirationDate = document.querySelector("#expiration-date");
+    const cvv = document.querySelector("#cvv");
+    const fields = tokenizeErr !== null && tokenizeErr !== void 0 && (_tokenizeErr$details = tokenizeErr.details) !== null && _tokenizeErr$details !== void 0 && _tokenizeErr$details.invalidFields ? Object.values(tokenizeErr === null || tokenizeErr === void 0 ? void 0 : (_tokenizeErr$details2 = tokenizeErr.details) === null || _tokenizeErr$details2 === void 0 ? void 0 : _tokenizeErr$details2.invalidFields) : null;
+    switch (tokenizeErr.code) {
+      case "HOSTED_FIELDS_FIELDS_EMPTY":
+        // occurs when none of the fields are filled in
+        cardNumber.classList.add("pelcro-input-invalid");
+        expirationDate.classList.add("pelcro-input-invalid");
+        cvv.classList.add("pelcro-input-invalid");
+        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";
+        // });
+        fields.forEach(field => {
+          field.classList.add("pelcro-input-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) => {
+    var _ref6, _ref7, _state$updatedPrice2;
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
     if (isUsingExistingPaymentMethod) {
-      // no need to create a new source using vantiv
-      return handleVantivPayment(null, state.couponCode);
+      // no need to create a new source using braintree
+      return handleBraintreePayment(null, state.couponCode);
     }
-    if (!vantivInstanceRef.current) {
-      return console.error("Vantiv sdk script wasn't loaded, you need to load vantiv sdk before rendering the vantiv payment flow");
+    if (!braintreeInstanceRef.current) {
+      return console.error("Braintree sdk script wasn't loaded, you need to load braintree sdk before rendering the braintree payment flow");
     }
-    const orderId = `pelcro-${new Date().getTime()}`;
-    /*     
-    calls handleVantivPayment to either handle a payment or update a source by simply creating a new source 
-    */
-    vantivInstanceRef.current.getPaypageRegistrationId({
-      id: orderId,
-      orderId: orderId
-    });
+    const getOrderItemsTotal = () => {
+      if (!order) {
+        return null;
+      }
+      const isQuickPurchase = !Array.isArray(order);
+      if (isQuickPurchase) {
+        return order.price * order.quantity;
+      }
+      if (order.length === 0) {
+        return null;
+      }
+      return order.reduce((total, item) => {
+        return total + item.price * item.quantity;
+      }, 0);
+    };
+    const totalAmount = (_ref6 = (_ref7 = (_state$updatedPrice2 = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice2 !== void 0 ? _state$updatedPrice2 : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref7 !== void 0 ? _ref7 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref6 !== void 0 ? _ref6 : getOrderItemsTotal();
+    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)
+            }
+          });
+        }
+        if (type == "updatePaymentSource" || type == "deletePaymentSource") {
+          handleBraintreePayment(payload, state.couponCode);
+        } else {
+          braintree3DSecureInstanceRef.current.then(threeDSecureInstance => {
+            threeDSecureInstance.verifyCard({
+              onLookupComplete: function (data, next) {
+                next();
+              },
+              amount: totalAmount !== null && totalAmount !== void 0 ? totalAmount : "0.00",
+              nonce: payload.nonce,
+              bin: payload.details.bin
+            }).then(payload => {
+              if (payload.liabilityShifted) {
+                handleBraintreePayment(payload, state.couponCode);
+              } else if (payload.liabilityShiftPossible) {
+                dispatch({
+                  type: DISABLE_SUBMIT,
+                  payload: false
+                });
+                dispatch({
+                  type: LOADING,
+                  payload: false
+                });
+                return dispatch({
+                  type: SHOW_ALERT,
+                  payload: {
+                    type: "error",
+                    content: "We encountered an issue verifying your transaction with 3D Secure, please try again."
+                  }
+                });
+              } else {
+                // Liability has not shifted and will not shift
+                dispatch({
+                  type: DISABLE_SUBMIT,
+                  payload: false
+                });
+                dispatch({
+                  type: LOADING,
+                  payload: false
+                });
+                return dispatch({
+                  type: SHOW_ALERT,
+                  payload: {
+                    type: "error",
+                    content: "We encountered an issue verifying your transaction with 3D Secure, please try another payment method."
+                  }
+                });
+              }
+            }).catch(error => {
+              console.error(error);
+              dispatch({
+                type: DISABLE_SUBMIT,
+                payload: false
+              });
+              dispatch({
+                type: LOADING,
+                payload: false
+              });
+              return dispatch({
+                type: SHOW_ALERT,
+                payload: {
+                  type: "error",
+                  content: "There was a problem with your request."
+                }
+              });
+            });
+          });
+        }
+      });
+    }).catch(error => {
+      if (error) {
+        console.error(error);
+        return;
+      }
+    });
+  };
+  const handleBraintreePayment = (braintreePaymentRequest, couponCode) => {
+    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);
+    } 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) {
+      // no need to create a new source using vantiv
+      return handleVantivPayment(null, state.couponCode);
+    }
+    if (!vantivInstanceRef.current) {
+      return console.error("Vantiv sdk script wasn't loaded, you need to load vantiv sdk before rendering the vantiv payment flow");
+    }
+    const orderId = `pelcro-${new Date().getTime()}`;
+    /*     
+    calls handleVantivPayment to either handle a payment or update a source by simply creating a new source 
+    */
+    vantivInstanceRef.current.getPaypageRegistrationId({
+      id: orderId,
+      orderId: orderId
+    });
   };
   function handleVantivPayment(paymentRequest, couponCode) {
     if (paymentRequest) {
@@ -18401,13 +19193,13 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       });
 
       // When Google pay / Apple pay source created
-      paymentRequest.on("source", _ref6 => {
+      paymentRequest.on("source", _ref8 => {
         var _source$card;
         let {
           complete,
           source,
           ...data
-        } = _ref6;
+        } = _ref8;
         dispatch({
           type: DISABLE_COUPON_BUTTON,
           payload: true
@@ -18422,11 +19214,11 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         });
         complete("success");
         if ((source === null || source === void 0 ? void 0 : (_source$card = source.card) === null || _source$card === void 0 ? void 0 : _source$card.three_d_secure) === "required") {
-          return generate3DSecureSource(source).then(_ref7 => {
+          return generate3DSecureSource(source).then(_ref9 => {
             let {
               source,
               error
-            } = _ref7;
+            } = _ref9;
             if (error) {
               return handlePaymentError(error);
             }
@@ -19143,11 +19935,11 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   const createPaymentSource = (state, dispatch) => {
     return stripe.createSource({
       type: "card"
-    }).then(_ref8 => {
+    }).then(_ref10 => {
       let {
         source,
         error
-      } = _ref8;
+      } = _ref10;
       if (error) {
         return handlePaymentError(error);
       }
@@ -19261,11 +20053,11 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     } = paymentMethodToDelete;
     return stripe.createSource({
       type: "card"
-    }).then(_ref9 => {
+    }).then(_ref11 => {
       let {
         source,
         error
-      } = _ref9;
+      } = _ref11;
       if (error) {
         return handlePaymentError(error);
       }
@@ -19363,12 +20155,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     }
     stripe.createSource({
       type: "card"
-    }).then(_ref10 => {
-      var _ref11, _ref12, _state$updatedPrice2;
+    }).then(_ref12 => {
+      var _ref13, _ref14, _state$updatedPrice3;
       let {
         source,
         error
-      } = _ref10;
+      } = _ref12;
       if (error) {
         return handlePaymentError(error);
       }
@@ -19387,7 +20179,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           return total + item.price * item.quantity;
         }, 0);
       };
-      (_ref11 = (_ref12 = (_state$updatedPrice2 = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice2 !== void 0 ? _state$updatedPrice2 : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref12 !== void 0 ? _ref12 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref11 !== void 0 ? _ref11 : getOrderItemsTotal();
+      (_ref13 = (_ref14 = (_state$updatedPrice3 = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice3 !== void 0 ? _state$updatedPrice3 : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref14 !== void 0 ? _ref14 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref13 !== void 0 ? _ref13 : getOrderItemsTotal();
       return handlePayment(source);
     }).catch(error => {
       return handlePaymentError(error);
@@ -19569,6 +20361,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,
@@ -19606,6 +20403,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           if (getSiteCardProcessor() === "cybersource") {
             return submitUsingCybersource(state, dispatch);
           }
+          if (getSiteCardProcessor() === "braintree") {
+            return submitUsingBraintree(state, dispatch);
+          }
           if (selectedPaymentMethodId) {
             // pay with selected method (source) if exists already
             return handlePayment({
@@ -19994,6 +20794,11 @@ const CheckoutForm = _ref => {
     paymentMethodToEdit
   } = usePelcro();
   const cardProcessor = getSiteCardProcessor();
+  const {
+    state: {
+      isSkeletonLoaded
+    }
+  } = useContext(store$l);
   if (selectedPaymentMethodId) {
     return null;
   }
@@ -20025,12 +20830,61 @@ const CheckoutForm = _ref => {
       placeholder: "Exp Year *"
     }))));
   }
-  if (cardProcessor === "stripe") {
+  if (cardProcessor === "braintree") {
     if (type === "updatePaymentSource") {
       var _paymentMethodToEdit$;
+      return /*#__PURE__*/React__default.createElement("div", null, isSkeletonLoaded && paymentMethodToEdit ? /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("label", {
+        htmlFor: "card-number"
+      }, "Card Number *"), /*#__PURE__*/React__default.createElement(Input, {
+        id: "card-number",
+        className: "plc-tracking-widest plc-flex-grow plc-h-12 plc-text-center",
+        value: `•••• •••• •••• ${paymentMethodToEdit === null || paymentMethodToEdit === void 0 ? void 0 : (_paymentMethodToEdit$ = paymentMethodToEdit.properties) === null || _paymentMethodToEdit$ === void 0 ? void 0 : _paymentMethodToEdit$.last4}`,
+        disabled: true
+      }), /*#__PURE__*/React__default.createElement("div", {
+        className: "plc-flex plc-items-start plc-space-x-8 plc-my-6"
+      }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("label", {
+        htmlFor: "expiration-month"
+      }, "Expiration Month *"), /*#__PURE__*/React__default.createElement("div", {
+        id: "expiration-month",
+        className: "pelcro-input-field plc-h-12 plc-bg-white"
+      })), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("label", {
+        htmlFor: "expiration-year"
+      }, "Expiration Year *"), /*#__PURE__*/React__default.createElement("div", {
+        id: "expiration-year",
+        className: "pelcro-input-field plc-h-12 plc-bg-white"
+      })))) : /*#__PURE__*/React__default.createElement("div", {
+        className: "plc-w-full plc-h-40 plc-bg-gray-300 plc-rounded plc-animate-pulse"
+      }));
+    }
+    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-8 plc-my-6"
+    }, /*#__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"
+    }, "CVC *"), /*#__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-40 plc-bg-gray-300 plc-rounded plc-animate-pulse"
+    }));
+  }
+  if (cardProcessor === "stripe") {
+    if (type === "updatePaymentSource") {
+      var _paymentMethodToEdit$2;
       return /*#__PURE__*/React__default.createElement("div", null, paymentMethodToEdit ? /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Input, {
         className: "plc-tracking-widest plc-flex-grow plc-text-center",
-        value: `•••• •••• •••• ${paymentMethodToEdit === null || paymentMethodToEdit === void 0 ? void 0 : (_paymentMethodToEdit$ = paymentMethodToEdit.properties) === null || _paymentMethodToEdit$ === void 0 ? void 0 : _paymentMethodToEdit$.last4}`,
+        value: `•••• •••• •••• ${paymentMethodToEdit === null || paymentMethodToEdit === void 0 ? void 0 : (_paymentMethodToEdit$2 = paymentMethodToEdit.properties) === null || _paymentMethodToEdit$2 === void 0 ? void 0 : _paymentMethodToEdit$2.last4}`,
         disabled: true
       })) : /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Input, {
         className: "plc-bg-gray-300 plc-animate-pulse"