@pelcro/react-pelcro-js 3.26.0-beta.61 → 3.26.0-beta.63

package/dist/index.cjs.js

@@ -12087,7 +12087,8 @@ const loadPaymentSDKs = () => {
     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");
+    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
@@ -19231,61 +19232,174 @@ const PaymentMethodContainerWithoutStripe = _ref => {
 
   /* ====== Start Braintree integration ======== */
   const braintreeInstanceRef = React__default['default'].useRef(null);
-  React.useEffect(() => {
+  const braintree3DSecureInstanceRef = React__default['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) {
-      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 braintreeToken = await getClientToken();
       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"
+      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"
+              }
             },
-            "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"
+              }
             }
-          },
-          fields: {
-            number: {
-              container: "#card-number",
-              placeholder: "4111 1111 1111 1111"
-            },
-            cvv: {
-              container: "#cvv",
-              placeholder: "123"
+          };
+          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"
+              }
             },
-            expirationDate: {
-              container: "#expiration-date",
-              placeholder: "10/2022"
+            fields: {
+              expirationMonth: {
+                container: "#expiration-month",
+                prefill: expMonth
+              },
+              expirationYear: {
+                container: "#expiration-year",
+                prefill: expYear
+              }
             }
-          }
-        };
-        dispatch({
-          type: SKELETON_LOADER,
-          payload: true
+          };
+          dispatch({
+            type: SKELETON_LOADER,
+            payload: true
+          });
+          return window.braintree.hostedFields.create(options);
         });
-        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");
+            }
+          });
+        });
+      }
     }
-  }, [selectedPaymentMethodId]);
+  }
+  React.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":
@@ -19298,6 +19412,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         // ) {
         //   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:
@@ -19328,6 +19445,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     }
   };
   const submitUsingBraintree = (state, dispatch) => {
+    var _ref6, _ref7, _state$updatedPrice;
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
     if (isUsingExistingPaymentMethod) {
       // no need to create a new source using braintree
@@ -19336,6 +19454,22 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     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 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$updatedPrice = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice !== void 0 ? _state$updatedPrice : 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) {
@@ -19355,8 +19489,74 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             }
           });
         }
-        console.log(payload);
-        handleBraintreePayment(payload, state);
+        if (type == "updatePaymentSource" || type == "deletePaymentSource") {
+          handleBraintreePayment(payload, state);
+        } 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);
+              } 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) {
@@ -19880,9 +20080,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   React.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$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;
+      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;
       vantivInstanceRef.current = new window.EprotectIframeClient({
         paypageId: payPageId,
         reportGroup: reportGroup,
@@ -19960,13 +20160,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
@@ -19981,11 +20181,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) {
               handlePaymentError(error);
               fireBugSnag({
@@ -20021,9 +20221,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
    * Updates the total amount after adding taxes only if site taxes are enabled
    */
   const updateTotalAmountWithTax = () => {
-    var _window$Pelcro$site$r9;
+    var _window$Pelcro$site$r8;
     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$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$r8 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r8 === void 0 ? void 0 : _window$Pelcro$site$r8.taxes_enabled;
     if (taxesEnabled && type === "createPayment") {
       dispatch({
         type: DISABLE_SUBMIT,
@@ -20745,11 +20945,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);
       }
@@ -20863,11 +21063,11 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     } = paymentMethodToDelete;
     return stripe.createSource({
       type: "card"
-    }).then(_ref9 => {
+    }).then(_ref11 => {
       let {
         source,
         error
-      } = _ref9;
+      } = _ref11;
       if (error) {
         return handlePaymentError(error);
       }
@@ -21009,12 +21209,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     }
     stripe.createSource({
       type: "card"
-    }).then(_ref10 => {
-      var _ref11, _ref12, _state$updatedPrice;
+    }).then(_ref12 => {
+      var _ref13, _ref14, _state$updatedPrice2;
       let {
         source,
         error
-      } = _ref10;
+      } = _ref12;
       if (error) {
         return handlePaymentError(error);
       }
@@ -21033,7 +21233,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           return total + item.price * item.quantity;
         }, 0);
       };
-      (_ref11 = (_ref12 = (_state$updatedPrice = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice !== void 0 ? _state$updatedPrice : 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$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 && _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);
@@ -21045,11 +21245,11 @@ const PaymentMethodContainerWithoutStripe = _ref => {
    * @return {Promise}
    */
   const resolveTaxCalculation = () => {
-    var _window$Pelcro$site$r10;
+    var _window$Pelcro$site$r9;
     if (type === "invoicePayment") {
       return new Promise(resolve => resolve());
     }
-    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;
+    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;
     return new Promise((resolve, reject) => {
       // resolve early if taxes isn't enabled
       if (!taxesEnabled) {
@@ -21724,35 +21924,60 @@ const CheckoutForm = _ref => {
     }))));
   }
   if (cardProcessor === "braintree") {
+    if (type === "updatePaymentSource") {
+      var _paymentMethodToEdit$;
+      return /*#__PURE__*/React__default['default'].createElement("div", null, isSkeletonLoaded && paymentMethodToEdit ? /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("label", {
+        htmlFor: "card-number"
+      }, "Card Number *"), /*#__PURE__*/React__default['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['default'].createElement("div", {
+        className: "plc-flex plc-items-start plc-space-x-8 plc-my-6"
+      }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("label", {
+        htmlFor: "expiration-month"
+      }, "Expiration Month *"), /*#__PURE__*/React__default['default'].createElement("div", {
+        id: "expiration-month",
+        className: "pelcro-input-field plc-h-12 plc-bg-white"
+      })), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("label", {
+        htmlFor: "expiration-year"
+      }, "Expiration Year *"), /*#__PURE__*/React__default['default'].createElement("div", {
+        id: "expiration-year",
+        className: "pelcro-input-field plc-h-12 plc-bg-white"
+      })))) : /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "plc-w-full plc-h-40 plc-bg-gray-300 plc-rounded plc-animate-pulse"
+      }));
+    }
     return /*#__PURE__*/React__default['default'].createElement("div", null, isSkeletonLoaded ? /*#__PURE__*/React__default['default'].createElement("div", {
       className: "plc-max-w-[50em]"
     }, /*#__PURE__*/React__default['default'].createElement("label", {
       htmlFor: "card-number"
-    }, "Card Number"), /*#__PURE__*/React__default['default'].createElement("div", {
+    }, "Card Number *"), /*#__PURE__*/React__default['default'].createElement("div", {
       id: "card-number",
       className: "pelcro-input-field plc-h-12 plc-bg-white"
     }), /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "plc-flex plc-items-start plc-space-x-3 plc-mb-4"
+      className: "plc-flex plc-items-start plc-space-x-8 plc-my-6"
     }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("label", {
       htmlFor: "expiration-date"
-    }, "Expiration Date"), /*#__PURE__*/React__default['default'].createElement("div", {
+    }, "Expiration Date *"), /*#__PURE__*/React__default['default'].createElement("div", {
       id: "expiration-date",
       className: "pelcro-input-field plc-h-12 plc-bg-white"
     })), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("label", {
       htmlFor: "cvv"
-    }, "CVV"), /*#__PURE__*/React__default['default'].createElement("div", {
+    }, "CVC *"), /*#__PURE__*/React__default['default'].createElement("div", {
       id: "cvv",
       className: "pelcro-input-field plc-h-12 plc-bg-white"
     })))) : /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "plc-w-full plc-h-36 plc-bg-gray-300 plc-rounded plc-animate-pulse"
+      className: "plc-w-full plc-h-40 plc-bg-gray-300 plc-rounded plc-animate-pulse"
     }));
   }
   if (cardProcessor === "stripe") {
     if (type === "updatePaymentSource") {
-      var _paymentMethodToEdit$;
+      var _paymentMethodToEdit$2;
       return /*#__PURE__*/React__default['default'].createElement("div", null, paymentMethodToEdit ? /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['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['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Input, {
         className: "plc-bg-gray-300 plc-animate-pulse"

package/dist/index.esm.js

@@ -12057,7 +12057,8 @@ const loadPaymentSDKs = () => {
     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");
+    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
@@ -19201,61 +19202,174 @@ const PaymentMethodContainerWithoutStripe = _ref => {
 
   /* ====== Start Braintree integration ======== */
   const braintreeInstanceRef = React__default.useRef(null);
-  useEffect(() => {
+  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) {
-      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 braintreeToken = await getClientToken();
       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"
+      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"
+              }
             },
-            "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"
+              }
             }
-          },
-          fields: {
-            number: {
-              container: "#card-number",
-              placeholder: "4111 1111 1111 1111"
-            },
-            cvv: {
-              container: "#cvv",
-              placeholder: "123"
+          };
+          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"
+              }
             },
-            expirationDate: {
-              container: "#expiration-date",
-              placeholder: "10/2022"
+            fields: {
+              expirationMonth: {
+                container: "#expiration-month",
+                prefill: expMonth
+              },
+              expirationYear: {
+                container: "#expiration-year",
+                prefill: expYear
+              }
             }
-          }
-        };
-        dispatch({
-          type: SKELETON_LOADER,
-          payload: true
+          };
+          dispatch({
+            type: SKELETON_LOADER,
+            payload: true
+          });
+          return window.braintree.hostedFields.create(options);
         });
-        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");
+            }
+          });
+        });
+      }
     }
-  }, [selectedPaymentMethodId]);
+  }
+  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":
@@ -19268,6 +19382,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         // ) {
         //   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:
@@ -19298,6 +19415,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     }
   };
   const submitUsingBraintree = (state, dispatch) => {
+    var _ref6, _ref7, _state$updatedPrice;
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
     if (isUsingExistingPaymentMethod) {
       // no need to create a new source using braintree
@@ -19306,6 +19424,22 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     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 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$updatedPrice = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice !== void 0 ? _state$updatedPrice : 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) {
@@ -19325,8 +19459,74 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             }
           });
         }
-        console.log(payload);
-        handleBraintreePayment(payload, state);
+        if (type == "updatePaymentSource" || type == "deletePaymentSource") {
+          handleBraintreePayment(payload, state);
+        } 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);
+              } 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) {
@@ -19850,9 +20050,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$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;
+      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;
       vantivInstanceRef.current = new window.EprotectIframeClient({
         paypageId: payPageId,
         reportGroup: reportGroup,
@@ -19930,13 +20130,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
@@ -19951,11 +20151,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) {
               handlePaymentError(error);
               fireBugSnag({
@@ -19991,9 +20191,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
    * Updates the total amount after adding taxes only if site taxes are enabled
    */
   const updateTotalAmountWithTax = () => {
-    var _window$Pelcro$site$r9;
+    var _window$Pelcro$site$r8;
     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$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$r8 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r8 === void 0 ? void 0 : _window$Pelcro$site$r8.taxes_enabled;
     if (taxesEnabled && type === "createPayment") {
       dispatch({
         type: DISABLE_SUBMIT,
@@ -20715,11 +20915,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);
       }
@@ -20833,11 +21033,11 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     } = paymentMethodToDelete;
     return stripe.createSource({
       type: "card"
-    }).then(_ref9 => {
+    }).then(_ref11 => {
       let {
         source,
         error
-      } = _ref9;
+      } = _ref11;
       if (error) {
         return handlePaymentError(error);
       }
@@ -20979,12 +21179,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     }
     stripe.createSource({
       type: "card"
-    }).then(_ref10 => {
-      var _ref11, _ref12, _state$updatedPrice;
+    }).then(_ref12 => {
+      var _ref13, _ref14, _state$updatedPrice2;
       let {
         source,
         error
-      } = _ref10;
+      } = _ref12;
       if (error) {
         return handlePaymentError(error);
       }
@@ -21003,7 +21203,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           return total + item.price * item.quantity;
         }, 0);
       };
-      (_ref11 = (_ref12 = (_state$updatedPrice = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice !== void 0 ? _state$updatedPrice : 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$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 && _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);
@@ -21015,11 +21215,11 @@ const PaymentMethodContainerWithoutStripe = _ref => {
    * @return {Promise}
    */
   const resolveTaxCalculation = () => {
-    var _window$Pelcro$site$r10;
+    var _window$Pelcro$site$r9;
     if (type === "invoicePayment") {
       return new Promise(resolve => resolve());
     }
-    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;
+    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;
     return new Promise((resolve, reject) => {
       // resolve early if taxes isn't enabled
       if (!taxesEnabled) {
@@ -21694,35 +21894,60 @@ const CheckoutForm = _ref => {
     }))));
   }
   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", {
+    }, "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"
+      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", {
+    }, "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", {
+    }, "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-36 plc-bg-gray-300 plc-rounded plc-animate-pulse"
+      className: "plc-w-full plc-h-40 plc-bg-gray-300 plc-rounded plc-animate-pulse"
     }));
   }
   if (cardProcessor === "stripe") {
     if (type === "updatePaymentSource") {
-      var _paymentMethodToEdit$;
+      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"

package/dist/pelcro.css

@@ -1774,6 +1774,12 @@ apple-pay-button {
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
 
+.pelcro-root .plc-space-x-8 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(2rem * var(--tw-space-x-reverse));
+  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .pelcro-root .plc-appearance-none {
   -webkit-appearance: none;
           appearance: none;
@@ -2211,6 +2217,10 @@ apple-pay-button {
   height: 9rem;
 }
 
+.pelcro-root .plc-h-40 {
+  height: 10rem;
+}
+
 .pelcro-root .plc-h-52 {
   height: 13rem;
 }
@@ -2298,6 +2308,11 @@ apple-pay-button {
   margin-bottom: 1rem;
 }
 
+.pelcro-root .plc-my-6 {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
 .pelcro-root .plc-my-auto {
   margin-top: auto;
   margin-bottom: auto;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pelcro/react-pelcro-js",
   "description": "Pelcro's React UI Elements",
-  "version": "3.26.0-beta.61",
+  "version": "3.26.0-beta.63",
   "license": "MIT",
   "private": false,
   "main": "dist/index.cjs.js",