@trap_stevo/legendarybuilderproreact-ui/dist/HUDComponents/HUDCheckout.js

The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton

import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/extends";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
var _excluded = ["stripePromise", "onPaymentSuccessContinue", "onPayment", "totalAmount", "customerID", "currency"];
import _regeneratorRuntime from "@babel/runtime/regenerator";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import * as React from "react";
import { useState, useEffect, useCallback, useMemo } from "react";
import { Elements, useStripe, useElements } from "@stripe/react-stripe-js";
import { CardElement } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";
import { motion } from "framer-motion";
import { FaPaypal, FaApple } from "react-icons/fa";
import { HUDUniversalHUDUtilityManager, ContainsOnlyNumericCharacters } from "../HUDManagers/HUDUniversalHUDUtilityManager.js";
import { useTimeout } from "../HUDManagers/HUDUniversalHUDEventEffectsManager.js";
import HUDTransitionIcon from "./HUDTransitionIcon.js";
import HUDShimmer from "./HUDShimmer.js";
import HUDIcon from "./HUDIcon.js";
var paymentMethods = [{
  id: "card",
  name: "Card",
  icon: /*#__PURE__*/React.createElement(HUDIcon, {
    name: "credit-card"
  })
}, {
  id: "paypal",
  name: "PayPal",
  icon: /*#__PURE__*/React.createElement(FaPaypal, null)
}, {
  id: "apple",
  name: "Apple Pay",
  icon: /*#__PURE__*/React.createElement(FaApple, null)
}];
var currencySymbols = {
  USD: "$",
  EUR: "€",
  GBP: "£",
  JPY: "¥",
  CAD: "C$",
  AUD: "A$",
  INR: "₹",
  CNY: "¥",
  BRL: "R$",
  ZAR: "R"
};
var countries = [{
  code: "US",
  name: "United States"
}, {
  code: "CA",
  name: "Canada"
}, {
  code: "GB",
  name: "United Kingdom"
}, {
  code: "AU",
  name: "Australia"
}, {
  code: "DE",
  name: "Germany"
}, {
  code: "FR",
  name: "France"
}, {
  code: "IN",
  name: "India"
}, {
  code: "JP",
  name: "Japan"
}, {
  code: "BR",
  name: "Brazil"
}, {
  code: "ZA",
  name: "South Africa"
}, {
  code: "MX",
  name: "Mexico"
}, {
  code: "IT",
  name: "Italy"
}, {
  code: "ES",
  name: "Spain"
}, {
  code: "NL",
  name: "Netherlands"
}, {
  code: "SE",
  name: "Sweden"
}, {
  code: "NO",
  name: "Norway"
}, {
  code: "DK",
  name: "Denmark"
}, {
  code: "CH",
  name: "Switzerland"
}, {
  code: "BE",
  name: "Belgium"
}, {
  code: "AT",
  name: "Austria"
}, {
  code: "SG",
  name: "Singapore"
}, {
  code: "HK",
  name: "Hong Kong"
}, {
  code: "KR",
  name: "South Korea"
}, {
  code: "TH",
  name: "Thailand"
}, {
  code: "NZ",
  name: "New Zealand"
}, {
  code: "AE",
  name: "United Arab Emirates"
}, {
  code: "MY",
  name: "Malaysia"
}, {
  code: "ID",
  name: "Indonesia"
}, {
  code: "PH",
  name: "Philippines"
}, {
  code: "RU",
  name: "Russia"
}, {
  code: "CN",
  name: "China"
}, {
  code: "PL",
  name: "Poland"
}, {
  code: "FI",
  name: "Finland"
}, {
  code: "PT",
  name: "Portugal"
}, {
  code: "IE",
  name: "Ireland"
}, {
  code: "GR",
  name: "Greece"
}, {
  code: "HU",
  name: "Hungary"
}, {
  code: "CZ",
  name: "Czech Republic"
}, {
  code: "TR",
  name: "Turkey"
}, {
  code: "AR",
  name: "Argentina"
}, {
  code: "CL",
  name: "Chile"
}, {
  code: "CO",
  name: "Colombia"
}, {
  code: "VE",
  name: "Venezuela"
}, {
  code: "PE",
  name: "Peru"
}];
var statesUS = [{
  code: "AL",
  name: "Alabama"
}, {
  code: "AK",
  name: "Alaska"
}, {
  code: "AZ",
  name: "Arizona"
}, {
  code: "AR",
  name: "Arkansas"
}, {
  code: "CA",
  name: "California"
}, {
  code: "CO",
  name: "Colorado"
}, {
  code: "CT",
  name: "Connecticut"
}, {
  code: "DE",
  name: "Delaware"
}, {
  code: "FL",
  name: "Florida"
}, {
  code: "GA",
  name: "Georgia"
}, {
  code: "HI",
  name: "Hawaii"
}, {
  code: "ID",
  name: "Idaho"
}, {
  code: "IL",
  name: "Illinois"
}, {
  code: "IN",
  name: "Indiana"
}, {
  code: "IA",
  name: "Iowa"
}, {
  code: "KS",
  name: "Kansas"
}, {
  code: "KY",
  name: "Kentucky"
}, {
  code: "LA",
  name: "Louisiana"
}, {
  code: "ME",
  name: "Maine"
}, {
  code: "MD",
  name: "Maryland"
}, {
  code: "MA",
  name: "Massachusetts"
}, {
  code: "MI",
  name: "Michigan"
}, {
  code: "MN",
  name: "Minnesota"
}, {
  code: "MS",
  name: "Mississippi"
}, {
  code: "MO",
  name: "Missouri"
}, {
  code: "MT",
  name: "Montana"
}, {
  code: "NE",
  name: "Nebraska"
}, {
  code: "NV",
  name: "Nevada"
}, {
  code: "NH",
  name: "New Hampshire"
}, {
  code: "NJ",
  name: "New Jersey"
}, {
  code: "NM",
  name: "New Mexico"
}, {
  code: "NY",
  name: "New York"
}, {
  code: "NC",
  name: "North Carolina"
}, {
  code: "ND",
  name: "North Dakota"
}, {
  code: "OH",
  name: "Ohio"
}, {
  code: "OK",
  name: "Oklahoma"
}, {
  code: "OR",
  name: "Oregon"
}, {
  code: "PA",
  name: "Pennsylvania"
}, {
  code: "RI",
  name: "Rhode Island"
}, {
  code: "SC",
  name: "South Carolina"
}, {
  code: "SD",
  name: "South Dakota"
}, {
  code: "TN",
  name: "Tennessee"
}, {
  code: "TX",
  name: "Texas"
}, {
  code: "UT",
  name: "Utah"
}, {
  code: "VT",
  name: "Vermont"
}, {
  code: "VA",
  name: "Virginia"
}, {
  code: "WA",
  name: "Washington"
}, {
  code: "WV",
  name: "West Virginia"
}, {
  code: "WI",
  name: "Wisconsin"
}, {
  code: "WY",
  name: "Wyoming"
}, {
  code: "DC",
  name: "District of Columbia"
}];
var brandColors = {
  visa: "linear-gradient(45deg, #1A73E8, #003366)",
  mastercard: "linear-gradient(45deg, #FF9800, #E91E63)",
  amex: "linear-gradient(45deg, #4B9CD3, #1A1F71)",
  discover: "linear-gradient(45deg, #FF6F00, #FFA000)",
  "default": "linear-gradient(45deg, #2C3E50, #34495E)"
};
var brandTextColors = {
  visa: "#1A73E8",
  mastercard: "#FF9800",
  amex: "#4B9CD3",
  discover: "#FF6F00",
  "default": "#2C3E50"
};
var styles = {
  container: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    fontFamily: "'Poppins', sans-serif",
    textAlign: "center",
    borderRadius: "14px",
    boxShadow: "0 10px 25px rgba(0, 0, 0, 0.15)",
    background: "#fff",
    maxWidth: "469px",
    minWidth: "369px",
    padding: "25px",
    margin: "auto"
  },
  title: {
    fontWeight: "bold",
    fontSize: "20px",
    color: "#333",
    marginBottom: "15px"
  },
  paymentSuccessfulContainer: {
    display: "flex",
    flexDirection: "column",
    gap: "0.69rem"
  },
  paymentOptions: {
    position: "relative",
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-around",
    width: "calc(100%)",
    gap: "0.269rem",
    marginBottom: "20px"
  },
  paymentMethod: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    cursor: "pointer",
    transition: "all 0.369s",
    border: "2px solid #ccc",
    borderRadius: "10px",
    height: "80px",
    width: "100px",
    color: "#ccc",
    gap: "0.269rem"
  },
  floatingCard: {
    transformStyle: "preserve-3d",
    borderRadius: "0.569rem",
    boxShadow: "0 5.69px 4.69px rgba(0, 0, 0, 0.269)",
    background: "linear-gradient(45deg, #1A73E8, #003366)",
    color: "#fff",
    height: "69%",
    width: "100%",
    padding: "20px"
  },
  cardContainer: {
    display: "flex",
    height: "200px",
    width: "calc(100%)",
    perspective: "1000px"
  },
  cardHolder: {
    userSelect: "none",
    textTransform: "uppercase",
    fontSize: "14px",
    marginTop: "15px"
  },
  cardNumber: {
    userSelect: "none",
    letterSpacing: "2px",
    fontSize: "22px",
    marginTop: "20px"
  },
  cardTop: {
    display: "flex",
    justifyContent: "space-between",
    userSelect: "none",
    fontSize: "12px"
  },
  animatedLetter: {
    display: "inline-block"
  },
  selectedMethod: {
    border: "2px solid #1A73E8",
    backgroundColor: "#f0f7ff",
    color: "#1A73E8"
  },
  form: {
    display: "flex",
    flexDirection: "column",
    width: "calc(100%)",
    gap: "0.869rem"
  },
  detailsSection: {
    overflow: "hidden",
    borderRadius: "8px",
    border: "1px solid #ccc",
    width: "100%",
    marginBottom: "0.369rem",
    marginTop: "0.369rem"
  },
  detailsHeader: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    userSelect: "none",
    cursor: "pointer",
    fontWeight: "bold",
    fontSize: "16px",
    backgroundColor: "#f5f5f5",
    padding: "12px"
  },
  detailsContent: {
    display: "flex",
    flexDirection: "column",
    backgroundColor: "#fff",
    gap: "10px",
    padding: "12px"
  },
  countrySelector: {
    position: "relative",
    width: "100%"
  },
  dropdown: {
    position: "absolute",
    overflowY: "auto",
    border: "1px solid #ccc",
    borderRadius: "8px",
    boxShadow: "0 10px 20px rgba(0, 0, 0, 0.15)",
    background: "#fff",
    maxHeight: "87.69px",
    width: "100%",
    zIndex: 1000,
    left: 0,
    top: "100%"
  },
  dropdownItem: {
    cursor: "pointer",
    transition: "background 0.269s",
    textAlign: "left",
    fontSize: "0.869rem",
    color: "#777",
    padding: "10px"
  },
  input: {
    position: "relative",
    display: "flex",
    fontSize: "14px",
    border: "1px solid #ccc",
    borderRadius: "8px",
    padding: "10px"
  },
  flexRow: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    gap: "0.369rem"
  },
  continueButton: {
    cursor: "pointer",
    fontSize: "16px",
    border: "none",
    borderRadius: "8px",
    backgroundColor: "#1A73E8",
    color: "#fff",
    padding: "12px",
    marginTop: "10px"
  },
  priceLabel: {
    userSelect: "none",
    fontWeight: "569",
    fontSize: "1.069rem",
    color: "#1A73E8"
  },
  errorText: {
    fontSize: "14px",
    color: "#ff4d4d",
    marginTop: "5px"
  },
  infoText: {
    fontSize: "14px",
    color: "#555",
    marginTop: "10px"
  }
};
var cardElementOptions = {
  style: {
    base: {
      fontSize: "16px",
      color: "#333",
      fontFamily: "Poppins, sans-serif",
      "::placeholder": {
        color: "#aaa"
      }
    },
    invalid: {
      color: "#ff4d4d"
    }
  }
};
var CheckoutForm = function CheckoutForm(_ref) {
  var _ref$checkoutPaymentS = _ref.checkoutPaymentSuccessfulContinueButtonAnimationTransitionConfigurationSettings,
    checkoutPaymentSuccessfulContinueButtonAnimationTransitionConfigurationSettings = _ref$checkoutPaymentS === void 0 ? {} : _ref$checkoutPaymentS,
    _ref$checkoutPaymentS2 = _ref.checkoutPaymentSuccessfulContinueButtonInitialAnimationConfigurationSettings,
    checkoutPaymentSuccessfulContinueButtonInitialAnimationConfigurationSettings = _ref$checkoutPaymentS2 === void 0 ? {} : _ref$checkoutPaymentS2,
    _ref$checkoutPaymentS3 = _ref.checkoutPaymentSuccessfulLabelAnimationTransitionConfigurationSettings,
    checkoutPaymentSuccessfulLabelAnimationTransitionConfigurationSettings = _ref$checkoutPaymentS3 === void 0 ? {} : _ref$checkoutPaymentS3,
    _ref$checkoutPaymentS4 = _ref.checkoutPaymentSuccessfulContinueButtonAnimationConfigurationSettings,
    checkoutPaymentSuccessfulContinueButtonAnimationConfigurationSettings = _ref$checkoutPaymentS4 === void 0 ? {} : _ref$checkoutPaymentS4,
    _ref$checkoutPaymentS5 = _ref.checkoutPaymentSuccessfulLabelInitialAnimationConfigurationSettings,
    checkoutPaymentSuccessfulLabelInitialAnimationConfigurationSettings = _ref$checkoutPaymentS5 === void 0 ? {} : _ref$checkoutPaymentS5,
    _ref$checkoutPaymentS6 = _ref.checkoutPaymentSuccessfulContinueButtonHoverConfigurationSettings,
    checkoutPaymentSuccessfulContinueButtonHoverConfigurationSettings = _ref$checkoutPaymentS6 === void 0 ? {} : _ref$checkoutPaymentS6,
    _ref$checkoutPaymentS7 = _ref.checkoutPaymentSuccessfulIndicatorContainerConfigurationSettings,
    checkoutPaymentSuccessfulIndicatorContainerConfigurationSettings = _ref$checkoutPaymentS7 === void 0 ? {} : _ref$checkoutPaymentS7,
    _ref$checkoutPaymentS8 = _ref.checkoutPaymentSuccessfulContinueButtonTapConfigurationSettings,
    checkoutPaymentSuccessfulContinueButtonTapConfigurationSettings = _ref$checkoutPaymentS8 === void 0 ? {} : _ref$checkoutPaymentS8,
    _ref$checkoutContactD = _ref.checkoutContactDetailsSectionRequiredLabelConfigurationSettings,
    checkoutContactDetailsSectionRequiredLabelConfigurationSettings = _ref$checkoutContactD === void 0 ? {} : _ref$checkoutContactD,
    _ref$checkoutBillingD = _ref.checkoutBillingDetailsSectionRequiredLabelConfigurationSettings,
    checkoutBillingDetailsSectionRequiredLabelConfigurationSettings = _ref$checkoutBillingD === void 0 ? {} : _ref$checkoutBillingD,
    _ref$checkoutBillingD2 = _ref.checkoutBillingDetailsSectionExpandedIconConfigurationSettings,
    checkoutBillingDetailsSectionExpandedIconConfigurationSettings = _ref$checkoutBillingD2 === void 0 ? {} : _ref$checkoutBillingD2,
    _ref$checkoutContactD2 = _ref.checkoutContactDetailsSectionExpandedIconConfigurationSettings,
    checkoutContactDetailsSectionExpandedIconConfigurationSettings = _ref$checkoutContactD2 === void 0 ? {} : _ref$checkoutContactD2,
    _ref$checkoutPaymentS9 = _ref.checkoutPaymentSuccessfulContinueButtonConfigurationSettings,
    checkoutPaymentSuccessfulContinueButtonConfigurationSettings = _ref$checkoutPaymentS9 === void 0 ? {} : _ref$checkoutPaymentS9,
    _ref$checkoutPaymentS10 = _ref.checkoutPaymentSuccessfulLabelAnimationConfigurationSettings,
    checkoutPaymentSuccessfulLabelAnimationConfigurationSettings = _ref$checkoutPaymentS10 === void 0 ? {} : _ref$checkoutPaymentS10,
    _ref$checkoutContactD3 = _ref.checkoutContactDetailsSectionExpandIconConfigurationSettings,
    checkoutContactDetailsSectionExpandIconConfigurationSettings = _ref$checkoutContactD3 === void 0 ? {} : _ref$checkoutContactD3,
    _ref$checkoutBillingD3 = _ref.checkoutBillingDetailsSectionExpandIconConfigurationSettings,
    checkoutBillingDetailsSectionExpandIconConfigurationSettings = _ref$checkoutBillingD3 === void 0 ? {} : _ref$checkoutBillingD3,
    _ref$checkoutBillingD4 = _ref.checkoutBillingDetailsSectionNameLabelConfigurationSettings,
    checkoutBillingDetailsSectionNameLabelConfigurationSettings = _ref$checkoutBillingD4 === void 0 ? {} : _ref$checkoutBillingD4,
    _ref$checkoutBillingD5 = _ref.checkoutBillingDetailsSectionContainerConfigurationSettings,
    checkoutBillingDetailsSectionContainerConfigurationSettings = _ref$checkoutBillingD5 === void 0 ? {} : _ref$checkoutBillingD5,
    _ref$checkoutBillingC = _ref.checkoutBillingContentInitialAnimationConfigurationSettings,
    checkoutBillingContentInitialAnimationConfigurationSettings = _ref$checkoutBillingC === void 0 ? {} : _ref$checkoutBillingC,
    _ref$checkoutContactD4 = _ref.checkoutContactDetailsSectionNameLabelConfigurationSettings,
    checkoutContactDetailsSectionNameLabelConfigurationSettings = _ref$checkoutContactD4 === void 0 ? {} : _ref$checkoutContactD4,
    _ref$checkoutContactD5 = _ref.checkoutContactDetailsSectionContainerConfigurationSettings,
    checkoutContactDetailsSectionContainerConfigurationSettings = _ref$checkoutContactD5 === void 0 ? {} : _ref$checkoutContactD5,
    _ref$checkoutContactC = _ref.checkoutContactContentInitialAnimationConfigurationSettings,
    checkoutContactContentInitialAnimationConfigurationSettings = _ref$checkoutContactC === void 0 ? {} : _ref$checkoutContactC,
    _ref$checkoutPaymentS11 = _ref.checkoutPaymentSuccessfulIconContainerConfigurationSettings,
    checkoutPaymentSuccessfulIconContainerConfigurationSettings = _ref$checkoutPaymentS11 === void 0 ? {} : _ref$checkoutPaymentS11,
    _ref$checkoutPriceLab = _ref.checkoutPriceLabelAnimationTransitionConfigurationSettings,
    checkoutPriceLabelAnimationTransitionConfigurationSettings = _ref$checkoutPriceLab === void 0 ? {} : _ref$checkoutPriceLab,
    _ref$checkoutPriceLab2 = _ref.checkoutPriceLabelInitialAnimationConfigurationSettings,
    checkoutPriceLabelInitialAnimationConfigurationSettings = _ref$checkoutPriceLab2 === void 0 ? {} : _ref$checkoutPriceLab2,
    _ref$checkoutContactC2 = _ref.checkoutContactContentAnimationConfigurationSettings,
    checkoutContactContentAnimationConfigurationSettings = _ref$checkoutContactC2 === void 0 ? {} : _ref$checkoutContactC2,
    _ref$checkoutBillingC2 = _ref.checkoutBillingContentAnimationConfigurationSettings,
    checkoutBillingContentAnimationConfigurationSettings = _ref$checkoutBillingC2 === void 0 ? {} : _ref$checkoutBillingC2,
    _ref$checkoutPayement = _ref.checkoutPayementOptionNameLabelConfigurationSettings,
    checkoutPayementOptionNameLabelConfigurationSettings = _ref$checkoutPayement === void 0 ? {} : _ref$checkoutPayement,
    _ref$checkoutPaymentS12 = _ref.checkoutPaymentSuccessfulLabelConfigurationSettings,
    checkoutPaymentSuccessfulLabelConfigurationSettings = _ref$checkoutPaymentS12 === void 0 ? {} : _ref$checkoutPaymentS12,
    _ref$checkoutPaymentS13 = _ref.checkoutPaymentSuccessfulIconConfigurationSettings,
    checkoutPaymentSuccessfulIconConfigurationSettings = _ref$checkoutPaymentS13 === void 0 ? {} : _ref$checkoutPaymentS13,
    _ref$checkoutPriceLab3 = _ref.checkoutPriceLabelAnimationConfigurationSettings,
    checkoutPriceLabelAnimationConfigurationSettings = _ref$checkoutPriceLab3 === void 0 ? {} : _ref$checkoutPriceLab3,
    _ref$checkoutFloating = _ref.checkoutFloatingCardContentConfigurationSettings,
    checkoutFloatingCardContentConfigurationSettings = _ref$checkoutFloating === void 0 ? {} : _ref$checkoutFloating,
    _ref$checkoutFloating2 = _ref.checkoutFloatingCardTopIconConfigurationSettings,
    checkoutFloatingCardTopIconConfigurationSettings = _ref$checkoutFloating2 === void 0 ? {} : _ref$checkoutFloating2,
    _ref$paymentSuccessfu = _ref.paymentSuccessfulContainerConfigurationSettings,
    paymentSuccessfulContainerConfigurationSettings = _ref$paymentSuccessfu === void 0 ? {} : _ref$paymentSuccessfu,
    _ref$checkoutPayButto = _ref.checkoutPayButtonLoadingConfigurationSettings,
    checkoutPayButtonLoadingConfigurationSettings = _ref$checkoutPayButto === void 0 ? {} : _ref$checkoutPayButto,
    _ref$checkoutFloating3 = _ref.checkoutFloatingCardConfigurationSettings,
    checkoutFloatingCardConfigurationSettings = _ref$checkoutFloating3 === void 0 ? {} : _ref$checkoutFloating3,
    _ref$countryDropdownI = _ref.countryDropdownItemConfigurationSettings,
    countryDropdownItemConfigurationSettings = _ref$countryDropdownI === void 0 ? {} : _ref$countryDropdownI,
    _ref$checkoutPriceLab4 = _ref.checkoutPriceLabelConfigurationSettings,
    checkoutPriceLabelConfigurationSettings = _ref$checkoutPriceLab4 === void 0 ? {} : _ref$checkoutPriceLab4,
    _ref$checkoutCardInpu = _ref.checkoutCardInputConfigurationSettings,
    checkoutCardInputConfigurationSettings = _ref$checkoutCardInpu === void 0 ? {} : _ref$checkoutCardInpu,
    _ref$checkoutFullName = _ref.checkoutFullNameConfigurationSettings,
    checkoutFullNameConfigurationSettings = _ref$checkoutFullName === void 0 ? {} : _ref$checkoutFullName,
    _ref$countrySelectorC = _ref.countrySelectorConfigurationSettings,
    countrySelectorConfigurationSettings = _ref$countrySelectorC === void 0 ? {} : _ref$countrySelectorC,
    _ref$countryDropdownC = _ref.countryDropdownConfigurationSettings,
    countryDropdownConfigurationSettings = _ref$countryDropdownC === void 0 ? {} : _ref$countryDropdownC,
    _ref$continueButtonCo = _ref.continueButtonConfigurationSettings,
    continueButtonConfigurationSettings = _ref$continueButtonCo === void 0 ? {} : _ref$continueButtonCo,
    _ref$paymentOptionsCo = _ref.paymentOptionsConfigurationSettings,
    paymentOptionsConfigurationSettings = _ref$paymentOptionsCo === void 0 ? {} : _ref$paymentOptionsCo,
    _ref$animatedLetterCo = _ref.animatedLetterConfigurationSettings,
    animatedLetterConfigurationSettings = _ref$animatedLetterCo === void 0 ? {} : _ref$animatedLetterCo,
    _ref$selectedMethodCo = _ref.selectedMethodConfigurationSettings,
    selectedMethodConfigurationSettings = _ref$selectedMethodCo === void 0 ? {} : _ref$selectedMethodCo,
    _ref$contactContentCo = _ref.contactContentConfigurationSettings,
    contactContentConfigurationSettings = _ref$contactContentCo === void 0 ? {} : _ref$contactContentCo,
    _ref$contactSectionCo = _ref.contactSectionConfigurationSettings,
    contactSectionConfigurationSettings = _ref$contactSectionCo === void 0 ? {} : _ref$contactSectionCo,
    _ref$billingContentCo = _ref.billingContentConfigurationSettings,
    billingContentConfigurationSettings = _ref$billingContentCo === void 0 ? {} : _ref$billingContentCo,
    _ref$billingSectionCo = _ref.billingSectionConfigurationSettings,
    billingSectionConfigurationSettings = _ref$billingSectionCo === void 0 ? {} : _ref$billingSectionCo,
    _ref$billingHeaderCon = _ref.billingHeaderConfigurationSettings,
    billingHeaderConfigurationSettings = _ref$billingHeaderCon === void 0 ? {} : _ref$billingHeaderCon,
    _ref$contactHeaderCon = _ref.contactHeaderConfigurationSettings,
    contactHeaderConfigurationSettings = _ref$contactHeaderCon === void 0 ? {} : _ref$contactHeaderCon,
    _ref$cardContainerCon = _ref.cardContainerConfigurationSettings,
    cardContainerConfigurationSettings = _ref$cardContainerCon === void 0 ? {} : _ref$cardContainerCon,
    _ref$paymentMethodCon = _ref.paymentMethodConfigurationSettings,
    paymentMethodConfigurationSettings = _ref$paymentMethodCon === void 0 ? {} : _ref$paymentMethodCon,
    _ref$floatingCardConf = _ref.floatingCardConfigurationSettings,
    floatingCardConfigurationSettings = _ref$floatingCardConf === void 0 ? {} : _ref$floatingCardConf,
    _ref$cardHolderConfig = _ref.cardHolderConfigurationSettings,
    cardHolderConfigurationSettings = _ref$cardHolderConfig === void 0 ? {} : _ref$cardHolderConfig,
    _ref$cardNumberConfig = _ref.cardNumberConfigurationSettings,
    cardNumberConfigurationSettings = _ref$cardNumberConfig === void 0 ? {} : _ref$cardNumberConfig,
    _ref$priceLabelConfig = _ref.priceLabelConfigurationSettings,
    priceLabelConfigurationSettings = _ref$priceLabelConfig === void 0 ? {} : _ref$priceLabelConfig,
    _ref$errorTextConfigu = _ref.errorTextConfigurationSettings,
    errorTextConfigurationSettings = _ref$errorTextConfigu === void 0 ? {} : _ref$errorTextConfigu,
    _ref$containerConfigu = _ref.containerConfigurationSettings,
    containerConfigurationSettings = _ref$containerConfigu === void 0 ? {} : _ref$containerConfigu,
    _ref$infoTextConfigur = _ref.infoTextConfigurationSettings,
    infoTextConfigurationSettings = _ref$infoTextConfigur === void 0 ? {} : _ref$infoTextConfigur,
    _ref$flexRowConfigura = _ref.flexRowConfigurationSettings,
    flexRowConfigurationSettings = _ref$flexRowConfigura === void 0 ? {} : _ref$flexRowConfigura,
    _ref$cardTopConfigura = _ref.cardTopConfigurationSettings,
    cardTopConfigurationSettings = _ref$cardTopConfigura === void 0 ? {} : _ref$cardTopConfigura,
    _ref$titleConfigurati = _ref.titleConfigurationSettings,
    titleConfigurationSettings = _ref$titleConfigurati === void 0 ? {} : _ref$titleConfigurati,
    _ref$inputConfigurati = _ref.inputConfigurationSettings,
    inputConfigurationSettings = _ref$inputConfigurati === void 0 ? {} : _ref$inputConfigurati,
    _ref$formConfiguratio = _ref.formConfigurationSettings,
    formConfigurationSettings = _ref$formConfiguratio === void 0 ? {} : _ref$formConfiguratio,
    _ref$checkoutPaymentS14 = _ref.checkoutPaymentSuccessfulIndicatorContainerConfigurations,
    checkoutPaymentSuccessfulIndicatorContainerConfigurations = _ref$checkoutPaymentS14 === void 0 ? {} : _ref$checkoutPaymentS14,
    _ref$checkoutBillingD6 = _ref.checkoutBillingDetailsSectionRequiredLabelConfigurations,
    checkoutBillingDetailsSectionRequiredLabelConfigurations = _ref$checkoutBillingD6 === void 0 ? {} : _ref$checkoutBillingD6,
    _ref$checkoutContactD6 = _ref.checkoutContactDetailsSectionRequiredLabelConfigurations,
    checkoutContactDetailsSectionRequiredLabelConfigurations = _ref$checkoutContactD6 === void 0 ? {} : _ref$checkoutContactD6,
    _ref$checkoutContactD7 = _ref.checkoutContactDetailsSectionExpandedIconConfigurations,
    checkoutContactDetailsSectionExpandedIconConfigurations = _ref$checkoutContactD7 === void 0 ? {} : _ref$checkoutContactD7,
    _ref$checkoutBillingD7 = _ref.checkoutBillingDetailsSectionExpandedIconConfigurations,
    checkoutBillingDetailsSectionExpandedIconConfigurations = _ref$checkoutBillingD7 === void 0 ? {} : _ref$checkoutBillingD7,
    _ref$checkoutBillingD8 = _ref.checkoutBillingDetailsSectionExpandIconConfigurations,
    checkoutBillingDetailsSectionExpandIconConfigurations = _ref$checkoutBillingD8 === void 0 ? {} : _ref$checkoutBillingD8,
    _ref$checkoutContactD8 = _ref.checkoutContactDetailsSectionExpandIconConfigurations,
    checkoutContactDetailsSectionExpandIconConfigurations = _ref$checkoutContactD8 === void 0 ? {} : _ref$checkoutContactD8,
    _ref$checkoutPaymentS15 = _ref.checkoutPaymentSuccessfulContinueButtonConfigurations,
    checkoutPaymentSuccessfulContinueButtonConfigurations = _ref$checkoutPaymentS15 === void 0 ? {} : _ref$checkoutPaymentS15,
    _ref$checkoutBillingD9 = _ref.checkoutBillingDetailsSectionContainerConfigurations,
    checkoutBillingDetailsSectionContainerConfigurations = _ref$checkoutBillingD9 === void 0 ? {} : _ref$checkoutBillingD9,
    _ref$checkoutBillingD10 = _ref.checkoutBillingDetailsSectionNameLabelConfigurations,
    checkoutBillingDetailsSectionNameLabelConfigurations = _ref$checkoutBillingD10 === void 0 ? {} : _ref$checkoutBillingD10,
    _ref$checkoutContactD9 = _ref.checkoutContactDetailsSectionContainerConfigurations,
    checkoutContactDetailsSectionContainerConfigurations = _ref$checkoutContactD9 === void 0 ? {} : _ref$checkoutContactD9,
    _ref$checkoutContactD10 = _ref.checkoutContactDetailsSectionNameLabelConfigurations,
    checkoutContactDetailsSectionNameLabelConfigurations = _ref$checkoutContactD10 === void 0 ? {} : _ref$checkoutContactD10,
    _ref$checkoutBillingD11 = _ref.checkoutBillingDetailsSectionHeaderConfigurations,
    checkoutBillingDetailsSectionHeaderConfigurations = _ref$checkoutBillingD11 === void 0 ? {} : _ref$checkoutBillingD11,
    _ref$checkoutContactD11 = _ref.checkoutContactDetailsSectionHeaderConfigurations,
    checkoutContactDetailsSectionHeaderConfigurations = _ref$checkoutContactD11 === void 0 ? {} : _ref$checkoutContactD11,
    _ref$checkoutFloating4 = _ref.checkoutFloatingCardBrandNameLabelConfigurations,
    checkoutFloatingCardBrandNameLabelConfigurations = _ref$checkoutFloating4 === void 0 ? {} : _ref$checkoutFloating4,
    _ref$checkoutPayement2 = _ref.checkoutPayementProcessErrorLabelConfigurations,
    checkoutPayementProcessErrorLabelConfigurations = _ref$checkoutPayement2 === void 0 ? {} : _ref$checkoutPayement2,
    _ref$checkoutStateSel = _ref.checkoutStateSelectionMenuButtomConfigurations,
    checkoutStateSelectionMenuButtomConfigurations = _ref$checkoutStateSel === void 0 ? {} : _ref$checkoutStateSel,
    _ref$checkoutFloating5 = _ref.checkoutFloatingCardHolderLabelConfigurations,
    checkoutFloatingCardHolderLabelConfigurations = _ref$checkoutFloating5 === void 0 ? {} : _ref$checkoutFloating5,
    _ref$checkoutFloating6 = _ref.checkoutFloatingCardNumberLabelConfigurations,
    checkoutFloatingCardNumberLabelConfigurations = _ref$checkoutFloating6 === void 0 ? {} : _ref$checkoutFloating6,
    _ref$checkoutPayement3 = _ref.checkoutPayementOptionNameLabelConfigurations,
    checkoutPayementOptionNameLabelConfigurations = _ref$checkoutPayement3 === void 0 ? {} : _ref$checkoutPayement3,
    _ref$checkoutPaymentS16 = _ref.checkoutPaymentSuccessfulLabelConfigurations,
    checkoutPaymentSuccessfulLabelConfigurations = _ref$checkoutPaymentS16 === void 0 ? {} : _ref$checkoutPaymentS16,
    _ref$checkoutFloating7 = _ref.checkoutFloatingCardContainerConfigurations,
    checkoutFloatingCardContainerConfigurations = _ref$checkoutFloating7 === void 0 ? {} : _ref$checkoutFloating7,
    _ref$checkoutPaymentS17 = _ref.checkoutPaymentSuccessfulIconConfigurations,
    checkoutPaymentSuccessfulIconConfigurations = _ref$checkoutPaymentS17 === void 0 ? {} : _ref$checkoutPaymentS17,
    _ref$checkoutCountryD = _ref.checkoutCountryDropdownItemConfigurations,
    checkoutCountryDropdownItemConfigurations = _ref$checkoutCountryD === void 0 ? {} : _ref$checkoutCountryD,
    _ref$checkoutFloating8 = _ref.checkoutFloatingCardShimmerConfigurations,
    checkoutFloatingCardShimmerConfigurations = _ref$checkoutFloating8 === void 0 ? {} : _ref$checkoutFloating8,
    _ref$checkoutFloating9 = _ref.checkoutFloatingCardContentConfigurations,
    checkoutFloatingCardContentConfigurations = _ref$checkoutFloating9 === void 0 ? {} : _ref$checkoutFloating9,
    _ref$checkoutFloating10 = _ref.checkoutFloatingCardTopIconConfigurations,
    checkoutFloatingCardTopIconConfigurations = _ref$checkoutFloating10 === void 0 ? {} : _ref$checkoutFloating10,
    _ref$paymentSuccessfu2 = _ref.paymentSuccessfulContainerConfigurations,
    paymentSuccessfulContainerConfigurations = _ref$paymentSuccessfu2 === void 0 ? {} : _ref$paymentSuccessfu2,
    _ref$checkoutStreetAd = _ref.checkoutStreetAddressInputConfigurations,
    checkoutStreetAddressInputConfigurations = _ref$checkoutStreetAd === void 0 ? {} : _ref$checkoutStreetAd,
    _ref$checkoutStateSel2 = _ref.checkoutStateSelectionMenuConfigurations,
    checkoutStateSelectionMenuConfigurations = _ref$checkoutStateSel2 === void 0 ? {} : _ref$checkoutStateSel2,
    _ref$checkoutStatePro = _ref.checkoutStateProvinceInputConfigurations,
    checkoutStateProvinceInputConfigurations = _ref$checkoutStatePro === void 0 ? {} : _ref$checkoutStatePro,
    _ref$checkoutCountryD2 = _ref.checkoutCountryDropdownConfigurations,
    checkoutCountryDropdownConfigurations = _ref$checkoutCountryD2 === void 0 ? {} : _ref$checkoutCountryD2,
    _ref$checkoutCountryS = _ref.checkoutCountrySelectorConfigurations,
    checkoutCountrySelectorConfigurations = _ref$checkoutCountryS === void 0 ? {} : _ref$checkoutCountryS,
    _ref$checkoutFloating11 = _ref.checkoutFloatingCardTopConfigurations,
    checkoutFloatingCardTopConfigurations = _ref$checkoutFloating11 === void 0 ? {} : _ref$checkoutFloating11,
    _ref$checkoutBillingC3 = _ref.checkoutBillingContentConfigurations,
    checkoutBillingContentConfigurations = _ref$checkoutBillingC3 === void 0 ? {} : _ref$checkoutBillingC3,
    _ref$checkoutContactC3 = _ref.checkoutContactContentConfigurations,
    checkoutContactContentConfigurations = _ref$checkoutContactC3 === void 0 ? {} : _ref$checkoutContactC3,
    _ref$checkoutPaymentO = _ref.checkoutPaymentOptionsConfigurations,
    checkoutPaymentOptionsConfigurations = _ref$checkoutPaymentO === void 0 ? {} : _ref$checkoutPaymentO,
    _ref$checkoutPaymentO2 = _ref.checkoutPaymentOptionConfigurations,
    checkoutPaymentOptionConfigurations = _ref$checkoutPaymentO2 === void 0 ? {} : _ref$checkoutPaymentO2,
    _ref$checkoutFormCont = _ref.checkoutFormContainerConfigurations,
    checkoutFormContainerConfigurations = _ref$checkoutFormCont === void 0 ? {} : _ref$checkoutFormCont,
    _ref$checkoutFloating12 = _ref.checkoutFloatingCardConfigurations,
    checkoutFloatingCardConfigurations = _ref$checkoutFloating12 === void 0 ? {} : _ref$checkoutFloating12,
    _ref$checkoutCountryI = _ref.checkoutCountryInputConfigurations,
    checkoutCountryInputConfigurations = _ref$checkoutCountryI === void 0 ? {} : _ref$checkoutCountryI,
    _ref$checkoutPriceLab5 = _ref.checkoutPriceLabelConfigurations,
    checkoutPriceLabelConfigurations = _ref$checkoutPriceLab5 === void 0 ? {} : _ref$checkoutPriceLab5,
    _ref$checkoutEmailInp = _ref.checkoutEmailInputConfigurations,
    checkoutEmailInputConfigurations = _ref$checkoutEmailInp === void 0 ? {} : _ref$checkoutEmailInp,
    _ref$checkoutPhoneInp = _ref.checkoutPhoneInputConfigurations,
    checkoutPhoneInputConfigurations = _ref$checkoutPhoneInp === void 0 ? {} : _ref$checkoutPhoneInp,
    _ref$checkoutStateIte = _ref.checkoutStateItemConfigurations,
    checkoutStateItemConfigurations = _ref$checkoutStateIte === void 0 ? {} : _ref$checkoutStateIte,
    _ref$checkoutPayButto2 = _ref.checkoutPayButtonConfigurations,
    checkoutPayButtonConfigurations = _ref$checkoutPayButto2 === void 0 ? {} : _ref$checkoutPayButto2,
    _ref$checkoutCityInpu = _ref.checkoutCityInputConfigurations,
    checkoutCityInputConfigurations = _ref$checkoutCityInpu === void 0 ? {} : _ref$checkoutCityInpu,
    _ref$checkoutCardInpu2 = _ref.checkoutCardInputConfigurations,
    checkoutCardInputConfigurations = _ref$checkoutCardInpu2 === void 0 ? {} : _ref$checkoutCardInpu2,
    _ref$checkoutContaine = _ref.checkoutContainerConfigurations,
    checkoutContainerConfigurations = _ref$checkoutContaine === void 0 ? {} : _ref$checkoutContaine,
    _ref$checkoutInfoText = _ref.checkoutInfoTextConfigurations,
    checkoutInfoTextConfigurations = _ref$checkoutInfoText === void 0 ? {} : _ref$checkoutInfoText,
    _ref$checkoutFullName2 = _ref.checkoutFullNameConfigurations,
    checkoutFullNameConfigurations = _ref$checkoutFullName2 === void 0 ? {} : _ref$checkoutFullName2,
    _ref$checkoutTitleCon = _ref.checkoutTitleConfigurations,
    checkoutTitleConfigurations = _ref$checkoutTitleCon === void 0 ? {} : _ref$checkoutTitleCon,
    onPaymentSuccessContinue = _ref.onPaymentSuccessContinue,
    onPayment = _ref.onPayment,
    _ref$checkoutFormPaym = _ref.checkoutFormPaymentSuccessBottomContent,
    checkoutFormPaymentSuccessBottomContent = _ref$checkoutFormPaym === void 0 ? null : _ref$checkoutFormPaym,
    _ref$checkoutFormPaym2 = _ref.checkoutFormPaymentSuccessTopContent,
    checkoutFormPaymentSuccessTopContent = _ref$checkoutFormPaym2 === void 0 ? null : _ref$checkoutFormPaym2,
    _ref$checkoutFormPaym3 = _ref.checkoutFormPaymentSuccessContent,
    checkoutFormPaymentSuccessContent = _ref$checkoutFormPaym3 === void 0 ? null : _ref$checkoutFormPaym3,
    _ref$checkoutFloating13 = _ref.checkoutFloatingCardBottomContent,
    checkoutFloatingCardBottomContent = _ref$checkoutFloating13 === void 0 ? null : _ref$checkoutFloating13,
    _ref$checkoutFloating14 = _ref.checkoutFloatingCardTopContent,
    checkoutFloatingCardTopContent = _ref$checkoutFloating14 === void 0 ? null : _ref$checkoutFloating14,
    _ref$checkoutFloating15 = _ref.checkoutFloatingCardContent,
    checkoutFloatingCardContent = _ref$checkoutFloating15 === void 0 ? null : _ref$checkoutFloating15,
    _ref$checkoutFormDeta = _ref.checkoutFormDetailsContent,
    checkoutFormDetailsContent = _ref$checkoutFormDeta === void 0 ? null : _ref$checkoutFormDeta,
    _ref$checkoutHeaderCo = _ref.checkoutHeaderContent,
    checkoutHeaderContent = _ref$checkoutHeaderCo === void 0 ? null : _ref$checkoutHeaderCo,
    _ref$checkoutCenterCo = _ref.checkoutCenterContent,
    checkoutCenterContent = _ref$checkoutCenterCo === void 0 ? null : _ref$checkoutCenterCo,
    _ref$checkoutFooterCo = _ref.checkoutFooterContent,
    checkoutFooterContent = _ref$checkoutFooterCo === void 0 ? null : _ref$checkoutFooterCo,
    _ref$checkoutUpperCon = _ref.checkoutUpperContent,
    checkoutUpperContent = _ref$checkoutUpperCon === void 0 ? null : _ref$checkoutUpperCon,
    _ref$checkoutFormCont2 = _ref.checkoutFormContent,
    checkoutFormContent = _ref$checkoutFormCont2 === void 0 ? null : _ref$checkoutFormCont2,
    _ref$checkoutCountryD3 = _ref.checkoutCountryDropdownItemHoverBackgroundColor,
    checkoutCountryDropdownItemHoverBackgroundColor = _ref$checkoutCountryD3 === void 0 ? "#f5f5f5" : _ref$checkoutCountryD3,
    _ref$checkoutCountryD4 = _ref.checkoutCountryDropdownItemBackgroundColor,
    checkoutCountryDropdownItemBackgroundColor = _ref$checkoutCountryD4 === void 0 ? "#fff" : _ref$checkoutCountryD4,
    _ref$allowedPaymentMe = _ref.allowedPaymentMethods,
    allowedPaymentMethods = _ref$allowedPaymentMe === void 0 ? ["card", "paypal", "apple"] : _ref$allowedPaymentMe,
    _ref$checkoutTitle = _ref.checkoutTitle,
    checkoutTitle = _ref$checkoutTitle === void 0 ? "Choose Your Payment Method" : _ref$checkoutTitle,
    _ref$contactDetailsRe = _ref.contactDetailsRequired,
    contactDetailsRequired = _ref$contactDetailsRe === void 0 ? false : _ref$contactDetailsRe,
    _ref$checkoutStateSel3 = _ref.checkoutStateSelectionMenuTitle,
    checkoutStateSelectionMenuTitle = _ref$checkoutStateSel3 === void 0 ? "Select State" : _ref$checkoutStateSel3,
    _ref$inputFullName = _ref.inputFullName,
    inputFullName = _ref$inputFullName === void 0 ? null : _ref$inputFullName,
    _ref$inputEmail = _ref.inputEmail,
    inputEmail = _ref$inputEmail === void 0 ? null : _ref$inputEmail,
    _ref$inputPhone = _ref.inputPhone,
    inputPhone = _ref$inputPhone === void 0 ? null : _ref$inputPhone,
    _ref$inputCountry = _ref.inputCountry,
    inputCountry = _ref$inputCountry === void 0 ? null : _ref$inputCountry,
    _ref$inputStreet = _ref.inputStreet,
    inputStreet = _ref$inputStreet === void 0 ? null : _ref$inputStreet,
    _ref$inputState = _ref.inputState,
    inputState = _ref$inputState === void 0 ? null : _ref$inputState,
    _ref$inputCity = _ref.inputCity,
    inputCity = _ref$inputCity === void 0 ? null : _ref$inputCity,
    _ref$totalAmount = _ref.totalAmount,
    totalAmount = _ref$totalAmount === void 0 ? 1000 : _ref$totalAmount,
    _ref$customerID = _ref.customerID,
    customerID = _ref$customerID === void 0 ? null : _ref$customerID,
    _ref$currency = _ref.currency,
    currency = _ref$currency === void 0 ? "USD" : _ref$currency;
  var _useTimeout = useTimeout(),
    schedule = _useTimeout.schedule;
  var elements = useElements();
  var stripe = useStripe();
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    contactExpanded = _useState2[0],
    setContactExpanded = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    billingExpanded = _useState4[0],
    setBillingExpanded = _useState4[1];
  var _useState5 = useState("card"),
    _useState6 = _slicedToArray(_useState5, 2),
    selectedMethod = _useState6[0],
    setSelectedMethod = _useState6[1];
  var _useState7 = useState(false),
    _useState8 = _slicedToArray(_useState7, 2),
    paymentSuccess = _useState8[0],
    setPaymentSuccess = _useState8[1];
  var _useState9 = useState("default"),
    _useState10 = _slicedToArray(_useState9, 2),
    cardBrand = _useState10[0],
    setCardBrand = _useState10[1];
  var _useState11 = useState("4242"),
    _useState12 = _slicedToArray(_useState11, 2),
    lastDigits = _useState12[0],
    setLastDigits = _useState12[1];
  var _useState13 = useState(false),
    _useState14 = _slicedToArray(_useState13, 2),
    loading = _useState14[0],
    setLoading = _useState14[1];
  var _useState15 = useState(null),
    _useState16 = _slicedToArray(_useState15, 2),
    error = _useState16[0],
    setError = _useState16[1];
  var _useState17 = useState(0),
    _useState18 = _slicedToArray(_useState17, 2),
    cardRotateX = _useState18[0],
    setCardRotateX = _useState18[1];
  var _useState19 = useState(0),
    _useState20 = _slicedToArray(_useState19, 2),
    cardRotateY = _useState20[0],
    setCardRotateY = _useState20[1];
  var _useState21 = useState(countries),
    _useState22 = _slicedToArray(_useState21, 2),
    filteredCountries = _useState22[0],
    setFilteredCountries = _useState22[1];
  var _useState23 = useState(false),
    _useState24 = _slicedToArray(_useState23, 2),
    showCountryDropdown = _useState24[0],
    setShowCountryDropdown = _useState24[1];
  var _useState25 = useState(""),
    _useState26 = _slicedToArray(_useState25, 2),
    searchTerm = _useState26[0],
    setSearchTerm = _useState26[1];
  var _useState27 = useState(inputPhone ? inputPhone : ""),
    _useState28 = _slicedToArray(_useState27, 2),
    cardHolderPhone = _useState28[0],
    setCardHolderPhone = _useState28[1];
  var _useState29 = useState(inputEmail ? inputEmail : ""),
    _useState30 = _slicedToArray(_useState29, 2),
    cardHolderEmail = _useState30[0],
    setCardHolderEmail = _useState30[1];
  var _useState31 = useState(inputFullName ? inputFullName.toUpperCase() : ""),
    _useState32 = _slicedToArray(_useState31, 2),
    cardHolder = _useState32[0],
    setCardHolder = _useState32[1];
  var _useState33 = useState(inputCountry ? inputCountry.toUpperCase() : "US"),
    _useState34 = _slicedToArray(_useState33, 2),
    country = _useState34[0],
    setCountry = _useState34[1];
  var _useState35 = useState(inputStreet ? inputStreet : ""),
    _useState36 = _slicedToArray(_useState35, 2),
    street = _useState36[0],
    setStreet = _useState36[1];
  var _useState37 = useState(inputState ? inputState : ""),
    _useState38 = _slicedToArray(_useState37, 2),
    state = _useState38[0],
    setState = _useState38[1];
  var _useState39 = useState(inputCity ? inputCity : ""),
    _useState40 = _slicedToArray(_useState39, 2),
    city = _useState40[0],
    setCity = _useState40[1];
  var availablePaymentMethods = useMemo(function () {
    return paymentMethods.filter(function (method) {
      return allowedPaymentMethods.includes(method.id);
    });
  }, [allowedPaymentMethods]);
  var mergedStyles = useMemo(function () {
    return {
      container: _objectSpread(_objectSpread({}, styles.container), containerConfigurationSettings),
      title: _objectSpread(_objectSpread({}, styles.title), titleConfigurationSettings),
      paymentSuccessfulContainer: _objectSpread(_objectSpread({}, styles.paymentSuccessfulContainer), paymentSuccessfulContainerConfigurationSettings),
      paymentOptions: _objectSpread(_objectSpread({}, styles.paymentOptions), paymentOptionsConfigurationSettings),
      paymentMethod: _objectSpread(_objectSpread({}, styles.paymentMethod), paymentMethodConfigurationSettings),
      floatingCard: _objectSpread(_objectSpread({}, styles.floatingCard), floatingCardConfigurationSettings),
      cardContainer: _objectSpread(_objectSpread({}, styles.cardContainer), cardContainerConfigurationSettings),
      cardHolder: _objectSpread(_objectSpread({}, styles.cardHolder), cardHolderConfigurationSettings),
      cardNumber: _objectSpread(_objectSpread({}, styles.cardNumber), cardNumberConfigurationSettings),
      cardTop: _objectSpread(_objectSpread({}, styles.cardTop), cardTopConfigurationSettings),
      animatedLetter: _objectSpread(_objectSpread({}, styles.animatedLetter), animatedLetterConfigurationSettings),
      selectedMethod: _objectSpread(_objectSpread({}, styles.selectedMethod), selectedMethodConfigurationSettings),
      form: _objectSpread(_objectSpread({}, styles.form), formConfigurationSettings),
      billingSection: _objectSpread(_objectSpread({}, styles.detailsSection), billingSectionConfigurationSettings),
      billingHeader: _objectSpread(_objectSpread({}, styles.detailsHeader), billingHeaderConfigurationSettings),
      billingContent: _objectSpread(_objectSpread({}, styles.detailsContent), billingContentConfigurationSettings),
      contactSection: _objectSpread(_objectSpread({}, styles.detailsSection), contactSectionConfigurationSettings),
      contactHeader: _objectSpread(_objectSpread({}, styles.detailsHeader), contactHeaderConfigurationSettings),
      contactContent: _objectSpread(_objectSpread({}, styles.detailsContent), contactContentConfigurationSettings),
      countrySelector: _objectSpread(_objectSpread({}, styles.countrySelector), countrySelectorConfigurationSettings),
      dropdown: _objectSpread(_objectSpread({}, styles.dropdown), countryDropdownConfigurationSettings),
      dropdownItem: _objectSpread(_objectSpread({}, styles.dropdownItem), countryDropdownItemConfigurationSettings),
      input: _objectSpread(_objectSpread({}, styles.input), inputConfigurationSettings),
      flexRow: _objectSpread(_objectSpread({}, styles.flexRow), flexRowConfigurationSettings),
      continueButton: _objectSpread(_objectSpread({}, styles.continueButton), continueButtonConfigurationSettings),
      priceLabel: _objectSpread(_objectSpread({}, styles.priceLabel), priceLabelConfigurationSettings),
      errorText: _objectSpread(_objectSpread({}, styles.errorText), errorTextConfigurationSettings),
      infoText: _objectSpread(_objectSpread({}, styles.infoText), infoTextConfigurationSettings)
    };
  }, [paymentSuccessfulContainerConfigurationSettings, countryDropdownItemConfigurationSettings, countrySelectorConfigurationSettings, countryDropdownConfigurationSettings, continueButtonConfigurationSettings, paymentOptionsConfigurationSettings, animatedLetterConfigurationSettings, selectedMethodConfigurationSettings, contactContentConfigurationSettings, contactSectionConfigurationSettings, billingContentConfigurationSettings, billingSectionConfigurationSettings, billingHeaderConfigurationSettings, contactHeaderConfigurationSettings, cardContainerConfigurationSettings, paymentMethodConfigurationSettings, floatingCardConfigurationSettings, cardHolderConfigurationSettings, cardNumberConfigurationSettings, priceLabelConfigurationSettings, errorTextConfigurationSettings, containerConfigurationSettings, infoTextConfigurationSettings, flexRowConfigurationSettings, cardTopConfigurationSettings, titleConfigurationSettings, inputConfigurationSettings, formConfigurationSettings, styles]);
  var handleSubmit = useCallback( /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(event) {
      var cardElement, _yield$stripe$createP, error, paymentMethod;
      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
        while (1) switch (_context2.prev = _context2.next) {
          case 0:
            event.preventDefault();
            setLoading(true);
            setError(null);
            if (!(!stripe || !elements)) {
              _context2.next = 5;
              break;
            }
            return _context2.abrupt("return");
          case 5:
            if (!contactDetailsRequired) {
              _context2.next = 14;
              break;
            }
            if (HUDUniversalHUDUtilityManager.CheckPhoneNumber(cardHolderPhone)) {
              _context2.next = 10;
              break;
            }
            setError("Invalid phone number.");
            setLoading(false);
            return _context2.abrupt("return");
          case 10:
            if (HUDUniversalHUDUtilityManager.CheckEmail(cardHolderEmail)) {
              _context2.next = 14;
              break;
            }
            setError("Invalid email.");
            setLoading(false);
            return _context2.abrupt("return");
          case 14:
            cardElement = elements.getElement(CardElement);
            _context2.next = 17;
            return stripe.createPaymentMethod({
              type: "card",
              card: cardElement,
              billing_details: {
                name: cardHolder,
                phone: cardHolderPhone.trim() !== "" ? cardHolderPhone : null,
                email: cardHolderEmail,
                address: {
                  country: country,
                  line1: street,
                  city: city,
                  state: state
                }
              }
            });
          case 17:
            _yield$stripe$createP = _context2.sent;
            error = _yield$stripe$createP.error;
            paymentMethod = _yield$stripe$createP.paymentMethod;
            if (!error) {
              _context2.next = 24;
              break;
            }
            setError(error.message);
            setLoading(false);
            return _context2.abrupt("return");
          case 24:
            schedule( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
              return _regeneratorRuntime.wrap(function _callee$(_context) {
                while (1) switch (_context.prev = _context.next) {
                  case 0:
                    _context.prev = 0;
                    _context.next = 3;
                    return onPayment(customerID, paymentMethod, totalAmount, currency);
                  case 3:
                    setPaymentSuccess(true);
                    setStreet("");
                    setCity("");
                    _context.next = 11;
                    break;
                  case 8:
                    _context.prev = 8;
                    _context.t0 = _context["catch"](0);
                    setError(_context.t0.message || "Did not pay. Try again");
                  case 11:
                    setLoading(false);
                  case 12:
                  case "end":
                    return _context.stop();
                }
              }, _callee, null, [[0, 8]]);
            })), 2000);
          case 25:
          case "end":
            return _context2.stop();
        }
      }, _callee2);
    }));
    return function (_x) {
      return _ref2.apply(this, arguments);
    };
  }(), [stripe, elements, CardElement, customerID, totalAmount, currency, cardHolder, cardHolderEmail, cardHolderPhone, country, state, street, city, contactDetailsRequired]);
  var handlePaymentSuccessfulProceed = useCallback(function () {
    setPaymentSuccess(false);
    setCardBrand("default");
    setLastDigits("4242");
    setCardHolder("");
    if (onP