Invoize Checkout | Freemius

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="en" ng-app="checkoutApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Lang" content="en"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Invoize Checkout | Freemius</title> <script type="text/javascript"> (function () { window.__is_eu = false; window.__is_gdpr = false; }()); </script> <link rel="stylesheet" type="text/css" href="https://checkout.freemius.com/assets/css/style.css?v=381" /> <script src="//js.freemius.com/fs/prototype.js?v=381" type="text/javascript"></script> <script src="//js.freemius.com/vendors/jquery/jquery-1.11.2.min.js?v=381" type="text/javascript"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.4/js.cookie.min.js" type="text/javascript"></script> <script src="//js.freemius.com/fs/script-manager.js?v=381" type="text/javascript"></script> <script src="//js.freemius.com/fs/init.js?v=381" type="text/javascript"></script> <script src="//js.freemius.com/fs/action.js?v=381" type="text/javascript"></script> <script src="//js.freemius.com/fs/page.js?v=381" type="text/javascript"></script> <script src="//js.freemius.com/fs/user.js?v=381" type="text/javascript"></script> <script src="//js.freemius.com/fs/context.js?v=381" type="text/javascript"></script> <script src="//www.paypalobjects.com/api/checkout.src.js" type="text/javascript"></script> <script src="https://js.stripe.com/v2/" type="text/javascript"></script> <script src="https://js.stripe.com/v3/" type="text/javascript"></script> <script src="https://checkout.freemius.com/assets/js/vendor.min.js?v=381" type="text/javascript"></script> <script src="https://checkout.freemius.com/assets/js/checkout.min.js?v=381" type="text/javascript"></script> <script type="text/javascript"> FS.Scripts.addTrackingScript(function(){ // Dynamically inject gtag script. FS.Scripts.injectScript('//www.googletagmanager.com/gtag/js?id=G-38HH7RDY2C', { async: true }); window.dataLayer = window.dataLayer || []; window.gtag = function() {dataLayer.push(arguments);} gtag('js', new Date()); var gtagConfig = { send_page_view: false }; if ('8080' === window.location.port) { gtagConfig.debug_mode = true; } gtag('config', 'G-38HH7RDY2C', gtagConfig); }); </script> <script type="text/javascript"> // TODO: If we ever want to use Optimize, we would need to update the following code with the new GA4 syntax to require the relevant Optimize container. // if (window.ga) { // ga('require', 'GTM-PBQXZD6'); // } </script>  </head> <body class="rw-layout-main rw-context-freemius-checkout fs-checkout-dialog"> <section id="wrap_section"> <script type="text/javascript"> (function(){ FS.PostMessage.init_child(); }()); </script>  <script type="text/javascript"> window.FS__EU_COUNTRIES_VAT = {"AT":0.2,"BE":0.21,"BG":0.2,"HR":0.25,"CY":0.19,"CZ":0.21,"DK":0.25,"EE":0.22,"FI":0.255,"FR":0.2,"DE":0.19,"GR":0.24,"HU":0.27,"IC":0,"GG":0,"IE":0.23,"IT":0.22,"LV":0.21,"LT":0.21,"LU":0.17,"MT":0.18,"NL":0.21,"PL":0.23,"PT":0.23,"RO":0.19,"SK":0.2,"SI":0.22,"ES":0.21,"SE":0.25,"GB":0.2}; window.FS__COUNTRIES_WITHOUT_POSTAL_OR_ZIP_CODE = ["AO","AG","AW","BS","BZ","BJ","BM","BO","BQ","BW","BF","BI","CM","CF","TD","KM","CG","CD","CK","CI","CW","DJ","DM","GQ","ER","FJ","TF","GA","GM","GH","GD","GY","HM","HK","KI","KP","LY","MO","MW","ML","MR","NR","NL","AN","NU","QA","RW","KN","ST","SC","SL","SX","SB","SO","SR","SY","TL","TG","TK","TO","TT","TV","UG","AE","VU","YE","ZW"]; window.FS__COUNTRIES_WITH_NON_NUMERIC_ZIP_CODES = ["AD","AL","AQ","AR","AX","AZ","BB","BM","BN","BN","CA","FK","GB","GG","GH","GI","GS","HN","IE","IM","IO","JE","KY","LC","LT","LV","MD","MT","NL","PE","PN","SH","SI","SO","SZ","TC","VC","VE","VG","WS"]; window.FS__GDPR_COMPLIANT_COUNTRIES = {"AL":true,"AD":true,"AT":true,"BY":true,"BE":true,"BA":true,"BG":true,"HR":true,"CY":true,"CZ":true,"DK":true,"EE":true,"FI":true,"FR":true,"DE":true,"GI":true,"GR":true,"HU":true,"IS":true,"IE":true,"IC":true,"GG":true,"IM":true,"IT":true,"LV":true,"LI":true,"LT":true,"LU":true,"MK":true,"MD":true,"MC":true,"ME":true,"MT":true,"NL":true,"PL":true,"PT":true,"RO":true,"RS":true,"SK":true,"SI":true,"SM":true,"ES":true,"SE":true,"GB":true,"VA":true,"NO":true,"IL":true,"BR":true}; window.FS__CHECKOUT_VERSION = "381"; </script>   <script type="text/javascript"> window.fsClearPayPalSessionAndReload = function() { const hasParent = FS.PostMessage.hasParent(); const inDashboardMode = false; if (hasParent && inDashboardMode) { // Remove __fs_pp_session and __fs_pp_token from the parent URL if running from the SDK. In the SDK we add the query params to persist the PayPal session when redirecting back from PayPal. const newUrl = FS.Page.url(FS.PostMessage.parent_url(), { __fs_pp_session: null, __fs_pp_token : null, paypal_token : null, paypal_payer_id: null, token : null, }); // Ask parent to forward to the new URL. FS.PostMessage.post('forward', { url: newUrl }); } else { window.location.reload(); } } </script>  <div ng-controller="MainCtrl" ng-cloak id="checkout_wrapper" class="fs-checkout-wrapper " ng-class="{'fs-checkout-wrapper--is-independent': isIndependentPage(), 'fs-checkout-wrapper--is-full-size': appearanceConfig.isFullPageSize, 'fs-checkout-wrapper--is-completed': context.upgradeComplete}">  <div> <b ng-init="context.countryGatekeeperData = {"restricted_countries":["ir","cu","kp","sy","so","ye","ve","sd","ss","ni","ly","mm","ru"],"is_current_country_restricted":false}"></b> <b ng-init="context.plugin = {"parent_plugin_id":null,"slug":"invoize","title":"Invoize","money_back_period":30,"refund_policy":"strict","annual_renewals_discount":null,"renewals_discount_type":"percentage","type":"plugin","is_static":false,"public_key":"pk_35932ea57247ebc4c8a4329274adb","id":"16134"}"></b> <b ng-init="context.pluginType = 'plugin'"></b> <b ng-init="context.plugin.developer_email = 'invoize@wpsora.com'"></b> <b ng-init="context.customCheckoutConfirmationSaas = false"></b> <b ng-init="context.pageMode = 'dialog'"></b> <b ng-init="context.plan = {"plugin_id":"16134","name":"ivzpro","title":"Pro","description":null,"is_free_localhost":true,"is_block_features":false,"is_block_features_monthly":false,"license_type":0,"is_https_support":false,"trial_period":14,"is_require_subscription":false,"support_kb":"https:\/\/wpsora.com\/invoize\/docs","support_forum":null,"support_email":"support@wpsora.com","support_phone":null,"support_skype":null,"is_success_manager":false,"is_featured":false,"is_hidden":false,"id":"26921","created":"2024-08-02 07:25:45","updated":"2024-11-14 06:14:33"}"></b> <b ng-init="context.plansOrder = ["27772","26921","27475","27523","28439"]"></b> <b ng-init="context.isFreePlan = false"></b> <b ng-init="context.isPreLaunch = false"></b> <b ng-init="context.hasFreeReleases = true"></b> <b ng-init="context.isGeoLocatedFromEU = false"></b> <b ng-init="context.isGeoLocationGdprOptinRequired = false"></b> <b ng-init="context.marketingOptinFromServer = null"></b> <b ng-init="context.isAffiliationEnabled = true"></b> <b ng-init="context.isCartEnabled = false"></b> <b ng-init="context.isMS = false"></b> <b ng-init="context.isProcessingCartAction = false"></b> <b ng-init="context.currencies = {"usd":"$"}"></b> <b ng-init="context.currency = 'usd'"></b> <b ng-init="context.hasMultipleCurrencies = false"></b> <b ng-init="context.currencySymbol = '$'"></b> <b ng-init="context.pricingItemsByCurrencyAndLicenses = {"usd":{"1":{"plan_id":"26921","licenses":1,"monthly_price":null,"annual_price":39,"lifetime_price":null,"is_whitelabeled":false,"is_hidden":false,"id":"33268","created":"2024-08-03 01:15:18","updated":"2024-10-28 02:47:18","currency":"usd"}}}"></b> <b ng-init="context.currencyToLicenseQuantities = {"usd":[1]}"></b> <b ng-init="context.licenseQuantities = [1]"></b> <b ng-init="context.sdkInstallData = null"></b> <b ng-init="context.hasMultipleLicenseQuantities = false"></b> <b ng-init="context.disableLicensesSelector = false"></b> <b ng-init="context.hideLicenses = false"></b> <b ng-init="context.sdkVersion = "1.0.0""></b> <b ng-init="context.pricing = {"plan_id":"26921","licenses":1,"monthly_price":null,"annual_price":39,"lifetime_price":null,"is_whitelabeled":false,"is_hidden":false,"id":"33268","created":"2024-08-03 01:15:18","updated":"2024-10-28 02:47:18","currency":"usd"}"></b> <b ng-init="context.hasFreePlan = true"></b> <b ng-init="context.install = {}"></b> <b ng-init="context.proratedDiscountUnavailable = false"></b> <b ng-init="context.licenseQuotaUpdateDisabled = false"></b> <b ng-init="context.hideCoupon = false"></b> <b ng-init="context.billingCycles = ["monthly","annual","lifetime"]"></b> <b ng-init="context.billingCycle = 'annual'"></b> <b ng-init="context.hideBillingCycles = false"></b> <b ng-init="context.multiSiteDiscount = {"monthly":0,"annual":0,"lifetime":0}"></b> <b ng-init="context.currenciesSingleSitePricing = {"monthly_price":{"usd":3.25},"annual_price":{"usd":39},"lifetime_price":{"usd":0}}"></b> <b ng-init="context.isTrialMode = "free""></b> <b ng-init="context.trial = {}"></b> <b ng-init="context.countries = {"AF":"Afghanistan","AX":"Aland Islands","AL":"Albania","DZ":"Algeria","AS":"American Samoa","AD":"Andorra","AO":"Angola","AI":"Anguilla","AQ":"Antarctica","AG":"Antigua And Barbuda","AR":"Argentina","AM":"Armenia","AW":"Aruba","AU":"Australia","AT":"Austria","AZ":"Azerbaijan","BS":"Bahamas","BH":"Bahrain","BD":"Bangladesh","BB":"Barbados","BY":"Belarus","BE":"Belgium","BZ":"Belize","BJ":"Benin","BM":"Bermuda","BT":"Bhutan","BO":"Bolivia","BA":"Bosnia And Herzegovina","BW":"Botswana","BV":"Bouvet Island","BR":"Brazil","IO":"British Indian Ocean Territory","BN":"Brunei Darussalam","BG":"Bulgaria","BF":"Burkina Faso","BI":"Burundi","KH":"Cambodia","CM":"Cameroon","CA":"Canada","IC":"Canary Islands","CV":"Cape Verde","BQ":"Caribbean Netherlands","KY":"Cayman Islands","CF":"Central African Republic","TD":"Chad","CL":"Chile","CN":"China","CX":"Christmas Island","CC":"Cocos (Keeling) Islands","CO":"Colombia","KM":"Comoros","CG":"Congo","CD":"Congo, Democratic Republic","CK":"Cook Islands","CR":"Costa Rica","CI":"Cote D'Ivoire","HR":"Croatia","CU":"Cuba","CW":"Cura\u00e7ao","CY":"Cyprus","CZ":"Czech Republic","DK":"Denmark","DJ":"Djibouti","DM":"Dominica","DO":"Dominican Republic","EC":"Ecuador","EG":"Egypt","SV":"El Salvador","GQ":"Equatorial Guinea","ER":"Eritrea","EE":"Estonia","ET":"Ethiopia","FK":"Falkland Islands (Malvinas)","FO":"Faroe Islands","FJ":"Fiji","FI":"Finland","FR":"France","GF":"French Guiana","PF":"French Polynesia","TF":"French Southern Territories","GA":"Gabon","GM":"Gambia","GE":"Georgia","DE":"Germany","GH":"Ghana","GI":"Gibraltar","GR":"Greece","GL":"Greenland","GD":"Grenada","GP":"Guadeloupe","GU":"Guam","GT":"Guatemala","GG":"Guernsey","GN":"Guinea","GW":"Guinea-Bissau","GY":"Guyana","HT":"Haiti","HM":"Heard Island & Mcdonald Islands","VA":"Holy See (Vatican City State)","HN":"Honduras","HK":"Hong Kong","HU":"Hungary","IS":"Iceland","IN":"India","ID":"Indonesia","IR":"Iran, Islamic Republic Of","IQ":"Iraq","IE":"Ireland","IM":"Isle Of Man","IL":"Israel","IT":"Italy","JM":"Jamaica","JP":"Japan","JE":"Jersey","JO":"Jordan","KZ":"Kazakhstan","KE":"Kenya","KI":"Kiribati","KR":"Korea, South","KP":"Korea, North","XK":"Kosovo","KW":"Kuwait","KG":"Kyrgyzstan","LA":"Lao People's Democratic Republic","LV":"Latvia","LB":"Lebanon","LS":"Lesotho","LR":"Liberia","LY":"Libyan Arab Jamahiriya","LI":"Liechtenstein","LT":"Lithuania","LU":"Luxembourg","MO":"Macao","MK":"Macedonia","MG":"Madagascar","MW":"Malawi","MY":"Malaysia","MV":"Maldives","ML":"Mali","MT":"Malta","MH":"Marshall Islands","MQ":"Martinique","MR":"Mauritania","MU":"Mauritius","YT":"Mayotte","MX":"Mexico","FM":"Micronesia, Federated States Of","MD":"Moldova","MC":"Monaco","MN":"Mongolia","ME":"Montenegro","MS":"Montserrat","MA":"Morocco","MZ":"Mozambique","MM":"Myanmar","NA":"Namibia","NR":"Nauru","NP":"Nepal","NL":"Netherlands","AN":"Netherlands Antilles","NC":"New Caledonia","NZ":"New Zealand","NI":"Nicaragua","NE":"Niger","NG":"Nigeria","NU":"Niue","NF":"Norfolk Island","MP":"Northern Mariana Islands","NO":"Norway","OM":"Oman","PK":"Pakistan","PW":"Palau","PS":"Palestinian Territory, Occupied","PA":"Panama","PG":"Papua New Guinea","PY":"Paraguay","PE":"Peru","PH":"Philippines","PN":"Pitcairn","PL":"Poland","PT":"Portugal","PR":"Puerto Rico","QA":"Qatar","RE":"Reunion","RO":"Romania","RU":"Russia","RW":"Rwanda","BL":"Saint Barthelemy","SH":"Saint Helena","KN":"Saint Kitts And Nevis","LC":"Saint Lucia","MF":"Saint Martin","PM":"Saint Pierre And Miquelon","VC":"Saint Vincent And Grenadines","WS":"Samoa","SM":"San Marino","ST":"Sao Tome And Principe","SA":"Saudi Arabia","SN":"Senegal","RS":"Serbia","SC":"Seychelles","SL":"Sierra Leone","SG":"Singapore","SX":"Sint Maarten","SK":"Slovakia","SI":"Slovenia","SB":"Solomon Islands","SO":"Somalia","ZA":"South Africa","GS":"South Georgia And Sandwich Isl.","SS":"South Sudan","ES":"Spain","LK":"Sri Lanka","SD":"Sudan","SR":"Suriname","SJ":"Svalbard And Jan Mayen","SZ":"Swaziland","SE":"Sweden","CH":"Switzerland","SY":"Syrian Arab Republic","TW":"Taiwan","TJ":"Tajikistan","TZ":"Tanzania","TH":"Thailand","TL":"Timor-Leste","TG":"Togo","TK":"Tokelau","TO":"Tonga","TT":"Trinidad And Tobago","TN":"Tunisia","TR":"Turkey","TM":"Turkmenistan","TC":"Turks And Caicos Islands","TV":"Tuvalu","UG":"Uganda","UA":"Ukraine","AE":"United Arab Emirates","GB":"United Kingdom","US":"United States","UM":"United States Outlying Islands","UY":"Uruguay","UZ":"Uzbekistan","VU":"Vanuatu","VE":"Venezuela","VN":"Viet Nam","VG":"Virgin Islands, British","VI":"Virgin Islands, U.S.","WF":"Wallis And Futuna","EH":"Western Sahara","YE":"Yemen","ZM":"Zambia","ZW":"Zimbabwe"}"></b> <b ng-init="context.associatedTaxRate = 0"></b> <b ng-init="context.billing.address_country = "SG""></b> <b ng-init="context.billing.tax_id = """></b> <b ng-init="context.countriesPhoneCodes = {"AD":"376","AE":"971","AF":"93","AG":"1268","AI":"1264","AL":"355","AM":"374","AN":"599","AO":"244","AQ":"672","AR":"54","AS":"1684","AT":"43","AU":"61","AW":"297","AZ":"994","BA":"387","BB":"1246","BD":"880","BE":"32","BF":"226","BG":"359","BH":"973","BI":"257","BJ":"229","BL":"590","BM":"1441","BN":"673","BO":"591","BR":"55","BS":"1242","BT":"975","BW":"267","BY":"375","BZ":"501","CA":"1","CC":"61","CD":"243","CF":"236","CG":"242","CH":"41","CI":"225","CK":"682","CL":"56","CM":"237","CN":"86","CO":"57","CR":"506","CU":"53","CV":"238","CX":"61","CY":"357","CZ":"420","DE":"49","DJ":"253","DK":"45","DM":"1767","DO":"1809","DZ":"213","EC":"593","EE":"372","EG":"20","ER":"291","ES":"34","ET":"251","FI":"358","FJ":"679","FK":"500","FM":"691","FO":"298","FR":"33","GA":"241","GB":"44","GD":"1473","GE":"995","GH":"233","GI":"350","GL":"299","GM":"220","GN":"224","GQ":"240","GR":"30","GT":"502","GU":"1671","GW":"245","GY":"592","HK":"852","HN":"504","HR":"385","HT":"509","HU":"36","ID":"62","IE":"353","IL":"972","IM":"44","IN":"91","IQ":"964","IR":"98","IS":"354","IT":"39","JM":"1876","JO":"962","JP":"81","KE":"254","KG":"996","KH":"855","KI":"686","KM":"269","KN":"1869","KP":"850","KR":"82","KW":"965","BQ":"599","KY":"1345","KZ":"7","LA":"856","LB":"961","LC":"1758","LI":"423","LK":"94","LR":"231","LS":"266","LT":"370","LU":"352","LV":"371","LY":"218","MA":"212","MC":"377","MD":"373","ME":"382","MF":"1599","MG":"261","MH":"692","MK":"389","ML":"223","MM":"95","MN":"976","MO":"853","MP":"1670","MR":"222","MS":"1664","MT":"356","MU":"230","MV":"960","MW":"265","MX":"52","MY":"60","MZ":"258","NA":"264","NC":"687","NE":"227","NG":"234","NI":"505","NL":"31","NO":"47","NP":"977","NR":"674","NU":"683","NZ":"64","OM":"968","PA":"507","PE":"51","PF":"689","PG":"675","PH":"63","PK":"92","PL":"48","PM":"508","PN":"870","PR":"1","PT":"351","PW":"680","PY":"595","QA":"974","RO":"40","RS":"381","RU":"7","RW":"250","SA":"966","SB":"677","SC":"248","SD":"249","SE":"46","SG":"65","SH":"290","SI":"386","SK":"421","SL":"232","SM":"378","SN":"221","SO":"252","SR":"597","ST":"239","SV":"503","SY":"963","SZ":"268","TC":"1649","TD":"235","TG":"228","TH":"66","TJ":"992","TK":"690","TL":"670","TM":"993","TN":"216","TO":"676","TR":"90","TT":"1868","TV":"688","TW":"886","TZ":"255","UA":"380","UG":"256","US":"1","UY":"598","UZ":"998","VA":"39","VC":"1784","VE":"58","VG":"1284","VI":"1340","VN":"84","VU":"678","WF":"681","WS":"685","XK":"381","YE":"967","YT":"262","ZA":"27","ZM":"260","ZW":"263"}"></b> <b ng-init="context.vat = {"id":"","tid":"","isValid":false,"country":"SG"}"></b> <b ng-init="context.license = {}"></b> <b ng-init="context.licenses = 1"></b> <b ng-init="context.annualOverMonthlyDiscount = 0"></b> <b ng-init="context.isPaypalSupported = true"></b> <b ng-init="context.isPaypalRecurringProfileSupported = true"></b> <b ng-init="context.inPaypalCheckout = false"></b> <b ng-init="context.fsSession = {"__fs_pp_session":"foslivl0k0vjcmhv9tbblk8uu4"}"></b> <b ng-init="context.isReady4Review = context.inPaypalCheckout"></b> <b ng-init="context.selectedMethod = 'cc'"></b> <b ng-init="context.geolocationCountryCode = 'SG'"></b> <b ng-init="context.hideLicenseKey = false"></b> <b ng-init="context.hasInitialLicenseKey = false"></b> <b ng-init="context.licenseAction = 'create'"></b> <b ng-init="context.user = {}"></b> <b ng-init="context.firstName = """></b> <b ng-init="context.lastName = """></b> <b ng-init="context.email = """></b> <b ng-init="context.readonlyEmail = false"></b> <b ng-init="context.readonlyFirstName = false"></b> <b ng-init="context.readonlyLastName = false"></b> <b ng-init="context.company = """></b> <b ng-init="context.isSandbox = false"></b> <b ng-init="context.fromEmailAddress = "invoize@wpsora.com""></b> <b ng-init="context.sandboxToken = false"></b> <b ng-init="context.unitLabel = 'Site'"></b> <b ng-init="context.links = {"userDashboard":"https:\/\/users.freemius.com\/store\/7201\/login\/","eulaUrl":"https:\/\/freemius.com\/plugin\/16134\/invoize\/legal\/eula\/","saleTermsUrl":"https:\/\/freemius.com\/plugin\/16134\/invoize\/legal\/terms-of-sale\/"}"></b> <b ng-init="context.requestedLocale = null"></b> <b ng-init="context.appearanceConfig = {"layout":null,"formPosition":null,"fullscreen":null,"isShowingUpsells":true,"isShowingReviews":null,"isShowingRefundBadge":null,"defaultTitle":"","productIcon":"https:\/\/s3-us-west-2.amazonaws.com\/freemius\/plugins\/16134\/icons\/b11fc8f9ed9bdb280310a36dc9dd604b.png","isBundleCollapsed":true,"cancelUrl":null,"cancelIcon":null,"refundPolicyPosition":"dynamic","reviews":[]}"></b> <b ng-init="context.cartConfig = {"showMonthlySwitch":null,"annualDiscount":null,"multiSiteDiscount":null,"bundleDiscount":null,"maximizeBundleDiscount":true,"alwaysShowRenewalsAmount":false,"showInlineCurrencySelector":true}"></b> <b ng-init="context.promotionData = null"></b> <b ng-init="init()"></b> </div>  <div id="mode" class="dialog-mode badges-variant-{{ ui.securityBadgesVariant }}" ng-class="{ 'sandbox': context.isSandbox, 'trial' : isTrialMode(), 'trial-without-payment-method': isFreePlanOrFreeTrialMode(), 'processing': context.isProcessingUpgrade, 'plan--free': context.isFreePlan, 'account-details-hidden': entity.hasUserContext() || entity.hasLicenseContext(), 'licenses-hidden': context.hideLicenses, 'payment-method-update': context.isPaymentMethodUpdate, 'is-full-coupon-discount': hasFullCouponDiscount(), 'is-two-column': appearanceConfig.isTwoColumn, 'is-form-on-right': appearanceConfig.isFormOnRight, 'is-shrunk': context.upgradeComplete, 'is-full-size': appearanceConfig.isFullPageSize, 'dashboard-mode--independent': isDashboardPage() && isIndependentPage() }"> <div id="overlay" ng-class="{'active': ui.showOverlay}"> <div id="content_container" ng-class="{'completed': context.upgradeComplete, 'is-showing-slot-in-fulfillment': isShowingSlotInFulfillment()}"> <div id="checkout_main" fs-scroll-on-change="getScrollOnChange()" fs-scroll-direction="getScrollDirection()" fs-scroll-animation-element="getScrollAnimationElement()"><section id="content" ng-class="{'shake': ui.shake}"> <fs-signal-bar ng-if="appearanceConfig.shouldShowSignalBar" appearance-config="appearanceConfig" on-close="closeDialog()" is-upgrade-complete="context.upgradeComplete"></fs-signal-bar> <div id="checkout_form" ng-show="!context.upgradeComplete" class="animate fs-checkout-form" ng-class="{ 'is-free-plan': context.isFreePlan, 'fs-checkout-form--is-two-column': appearanceConfig.isTwoColumn, 'fs-checkout-form--is-form-on-right': appearanceConfig.isFormOnRight, 'fs-checkout-form--is-full-page-size': appearanceConfig.isFullPageSize }"> <div class="fs-checkout-form__details"> <fs-cancel-button ng-if="appearanceConfig.shouldShowCancelButton" appearance-config="appearanceConfig"></fs-cancel-button>  <fs-cart-header appearance-config="appearanceConfig" cart-title="checkoutTitle()" cart-subtitle="checkoutSubtitle()" is-titles-only="context.isFreePlan || context.isPaymentMethodUpdate" is-bold-title="isTrialMode() && isTrialModePaid()" plugin="context.plugin"> <fs-cart-header-line-items ng-if=" ! context.isPaymentMethodUpdate && ! isFreePlanOrFreeTrialMode() && context.billingCycle"> <fs-line-item amount="contextManager.preDiscount.getUnDiscountedPrice()" currency-symbol="context.currencySymbol" is-bold=" ! isTrialMode() || ! isTrialModePaid()" is-stroked-out="contextManager.preDiscount.hasAnyDiscount()"> {{ itemOrderDescription() }} <fs-line-item-breakdown> <fs-animated-line content="{{ itemOrderFullPriceBreakdown() }}"></fs-animated-line> </fs-line-item-breakdown> </fs-line-item> </fs-cart-header-line-items> <fs-cart-header-licensing ng-if=" ! context.isFreePlan && ! context.hideLicenses && ! context.isPaymentMethodUpdate"> <span ng-if="context.disableLicensesSelector || ! context.hasMultipleLicenseQuantities" class="fs-fake-select fs-control-small fs-cart-header__licensing-dropdown">{{ licensesLabel(context.pricing.licenses, context.unitLabel, true) }}</span> <div ng-if="! context.disableLicensesSelector && context.hasMultipleLicenseQuantities" class="fs-cart-header__licensing-dropdown"> <fs-select id="license_quantities_dropdown" ng-model="context.licenses" is-small="true" is-text-like="true" ng-disabled="isCompletedState()" aria-label="{{ context.unitLabel }}"> <fs-select-option ng-repeat="licenseQuantity in context.licenseQuantities" ng-disabled="('update' === context.licenseAction) && null != licenseQuantity && licenseQuantity < context.license.activations" value="licenseQuantity"> {{ licensesLabel(licenseQuantity, context.unitLabel, true) }} </fs-select-option> </fs-select> </div> <fs-smart-input ng-if=" ! context.hideLicenseKey && ! context.isTrialMode && ! context.isFreePlan && ! isSaas()" id="license_actions" class="fs-cart-header__licensing-input" initial-value="context.license.license_key" on-submit="submitLicenseKey" on-clear="cancelLicense" is-masking-value="true" is-disabled-edit="context.inPaypalCheckout || isCompletedState()" is-muted="true" is-darker="true" is-floating-right="true" is-smaller-input="appearanceConfig.isTwoColumn" icon="license" label="{{ 'Enter license key' | translate }}"> <span translate>Renewing or upgrading? <u>Enter license key</u></span> </fs-smart-input> </fs-cart-header-licensing>  <fs-cart-header-footer ng-if="! isFreePlanOrFreeTrialMode() && contextManager.preDiscount.hasApplicableAnnualDiscount() && ! context.isPaymentMethodUpdate"> <fs-line-item is-muted=" ! upsells.annual.isSelected" is-bold="true" amount="contextManager.preDiscount.annual.amount" is-stroked-out=" ! upsells.annual.isSelected" is-discount="true" currency-symbol="context.currencySymbol"> <fs-line-item-control> <fs-switch ng-if="! upsells.annual.isDisabled || cartConfig.shouldShowMonthlySwitch" is-active="upsells.annual.isSelected" on-toggle="upsells.annual.toggle()" is-bordered="true"> <fs-badge ng-hide="contextManager.preDiscount.shouldHideAnnualDiscountPercentage"> <span translate-params-percentage="contextManager.preDiscount.annual.percentage" translate>Save {{ percentage }}%</span> </fs-badge> </fs-switch> <fs-badge ng-if="upsells.annual.isDisabled && ! cartConfig.shouldShowMonthlySwitch"> <span translate-params-percentage="contextManager.preDiscount.annual.percentage" translate>{{ percentage }}% Off</span> </fs-badge> </fs-line-item-control> <span class="description" translate>Annual discount</span> </fs-line-item> </fs-cart-header-footer>  </fs-cart-header>     <fs-line-items id="order_summary" ng-if=" ! context.isPaymentMethodUpdate && ! isFreePlanOrFreeTrialMode() && context.billingCycle">  <fs-line-item ng-if="contextManager.preDiscount.hasMultiSiteDiscount()" class="discount discount--multisite" amount="contextManager.preDiscount.multiSite.amount" is-discount="true" currency-symbol="context.currencySymbol" is-muted="true"> <span class="description" ng-if="contextManager.preDiscount.hasAnnualDiscount()" translate-params-license-unit-label="licenseUnitLabel()" translate-params-percentage="contextManager.preDiscount.multiSite.percentage" translate>Multi-{{ licenseUnitLabel }} license discount (Extra {{ percentage }}%)</span> <span class="description" ng-if=" ! contextManager.preDiscount.hasAnnualDiscount()" translate-params-license-unit-label="licenseUnitLabel()" translate-params-percentage="contextManager.preDiscount.multiSite.percentage" translate>Multi-{{ licenseUnitLabel }} license discount (Save {{ percentage }}%)</span> </fs-line-item>   <fs-line-item ng-if="contextManager.preDiscount.hasBundleDiscount()" class="discount bundle-discount discount--bundle" is-discount="true" amount="contextManager.preDiscount.bundle.amount" currency-symbol="context.currencySymbol"> <span class="description" ng-if="contextManager.preDiscount.hasAnnualOrMultiSiteDiscount()" translate-params-percentage="contextManager.preDiscount.bundle.percentage" translate>Bundle discount (Extra {{ percentage }}%)</span> <span class="description" ng-if=" ! contextManager.preDiscount.hasAnnualOrMultiSiteDiscount()" translate-params-percentage="contextManager.preDiscount.bundle.percentage" translate>Bundle discount (Save {{ percentage }}%)</span> </fs-line-item>   <fs-line-item ng-if="(contextManager.preDiscount.hasAnyDiscount() || hasCouponDiscount() || tax.shouldShowTaxRow() || pluginHasRenewalsDiscount()) && ! isFreePlanOrFreeTrialMode()" class="subtotal" amount="price(context.billingCycle)" currency-symbol="context.currencySymbol" has-separator="true" is-bold="true"> <span class="description"> <span translate translate-context="Subtotal row">Subtotal</span> </span> </fs-line-item>   <fs-line-item ng-if="hasProrationDiscount()" class="discount discount--prorated" amount="context.proratedDiscountAmount" currency-symbol="context.currencySymbol" is-discount="true"> <span class="description">{{ proratedDiscountLabel() }}</span> </fs-line-item>   <fs-line-item ng-if="showPluginRenewalDiscount()" class="discount discount--plugin-renewals" currency-symbol="context.currencySymbol" is-discount="true" amount="context.renewalDiscount.initialRenewalDiscount"> <span class="description">{{ getPluginFirstRenewalsDiscountDesc() }}</span> </fs-line-item>   <fs-line-item class="promotional-code has-smart-input" has-smart-input="true" currency-symbol="context.currencySymbol" amount="hasCouponDiscount() && ! showPluginRenewalDiscount() ? context.couponDiscount : null" is-discount="true"> <div class="description promotional-code__description"> <div id="promotional_code" ng-if=" ! context.isFreePlan" ng-hide="context.hideCoupon || context.isPaymentMethodUpdate" class="promotional-code__input"> <fs-smart-input current-value="context.coupon ? context.coupon.code : ''" on-submit="submitPromotionalCode" icon="tag" on-clear="cancelPromotionalCode" is-disabled-edit="context.inPaypalCheckout" is-darker="true" label="{{ 'Enter promotion code' | translate }}"> <span translate>Have a promotional code?</span> </fs-smart-input> </div> <div class="promotional-code__text" ng-if="hasCouponDiscount() && ! showPluginRenewalDiscount()"> {{ getCouponDiscountDesc() }} <fs-tooltip ng-if="pricing.shouldGetRelativeRenewalsDiscount()"> <fs-tooltip-trigger> <button class="fs-tooltip__trigger-button"> <span class="fsds-sr-only" translate translate-context="Tooltip Trigger Button Question Mark">?</span> <fs-icon icon="question" aria-label="Help"></fs-icon> </button> </fs-tooltip-trigger> <fs-tooltip-content> <div> <p>{{ getCouponRelativeDiscountTooltip() }}</p> </div> </fs-tooltip-content> </fs-tooltip> </div> <span title="expires in" ng-if="context.coupon.is_special_promo" class="countdown-fomo promotional-code__fomo"> <fs-icon icon="fire"></fs-icon> <span class="expires-in"> <span id="count-timer">{{ '00' == context.couponCountdown.days ? '' : (context.couponCountdown.days + ' ' + (1 == context.couponCountdown.days ? 'day' : 'days') + ' & ') }}{{ context.couponCountdown.hours }}:{{ context.couponCountdown.minutes }}:{{ context.couponCountdown.seconds }}</span> </span> </span> </div> </fs-line-item>   <fs-line-item ng-if="tax.shouldShowTaxRow() && ! isFreePlanOrFreeTrialMode() && ! hasFullCouponDiscount()" class="tax" is-loading="tax.isCalculatingTax" currency-symbol="context.currencySymbol" amount="tax.isCalculatingTax ? null : calcFirstPaymentTax()" is-muted="tax.hasExemption()" is-stroked-out="tax.hasExemption()"> <div class="description description--tax"> <span ng-if=" ! tax.isCalculatingTax"> <span>{{ tax.getTaxLabel() }}</span> <span>({{ tax.getTaxInPercentage() }})</span> </span> <span ng-if="tax.isCalculatingTax" translate>Calculating tax...</span> <div class="vat-tooltip"> <fs-tooltip> <fs-tooltip-trigger> <button class="vat-tooltip__trigger fs-tooltip__trigger-button"> <span class="fsds-sr-only" translate translate-context="Tooltip Trigger Button Question Mark">?</span> <fs-icon icon="question" aria-label="Help"></fs-icon> </button> </fs-tooltip-trigger> <fs-tooltip-content> <div> <p translate>Tax is calculated based on your billing address.</p> </div> </fs-tooltip-content> </fs-tooltip> </div> </div> </fs-line-item>   <fs-line-item ng-if="isTrialModePaid()" currency-symbol="context.currencySymbol" currency="context.currency" has-separator="true" is-muted="true" is-trial-line="true" amount="priceWithTax()"> <span class="description description--after-trial" translate>Total after trial</span> </fs-line-item>   <fs-line-item ng-if=" ! isFreePlanOrFreeTrialMode()" amount="isTrialMode() ? '0.00' : priceWithTax()" currency-symbol="context.currencySymbol" currency=" ! entity.hasLicenseContext() && hasMultipleVisibleCurrencies() ? null : context.currency" is-bold="true" has-separator=" ! isTrialModePaid()" size="large" class="order-total"> <span class="description description--total">{{ getTodayTotalLabel() }}</span> <fs-line-item-secondary-control ng-if=" ! entity.hasLicenseContext() && hasMultipleVisibleCurrencies() && cartConfig.shouldShowInlineCurrencySelector"> <fs-select id="currencies_secondary" is-small="true" is-dark="true" is-text-like="true" aria-label="Currency Selection" is-hiding-main-badge="true" is-transparent="true" ng-model="context.currency" ng-disabled="! canChangeCurrency()"> <fs-select-option ng-repeat="(currency,currencySymbol) in context.currencies" badge="currencySymbol" value="currency"> {{ currency | uppercase }} </fs-select-option> </fs-select> </fs-line-item-secondary-control> <fs-line-item-breakdown ng-if="shouldShowRenewalsLineInTotal()" ng-class="{'fs-line-item__breakdown--with-badge': hasTotalRenewalsDiscount()}"> <fs-badge ng-if="hasTotalRenewalsDiscount()" is-muted="true"> <span translate-params-renewals-discount-value="calcTotalRenewalsDiscountPercentage()" translate> {{ renewalsDiscountValue }} Off Renewals </span> </fs-badge> <span ng-if="pricing.isAnnual()" class="description description--renewals-discount" translate-params-renewals-price="renewalPaymentWithTax() | currency:context.currencySymbol:2" translate> Renews at {{ renewalsPrice }} per year </span> <span ng-if="pricing.isMonthly()" class="description description--renewals-discount" translate-params-renewals-price="renewalPaymentWithTax() | currency:context.currencySymbol:2" translate> Renews at {{ renewalsPrice }} per month </span> </fs-line-item-breakdown> </fs-line-item>  </fs-line-items>   <div ng-if="isTrialModePaid() && !hasFullCouponDiscount()" id="trial_summary_notice"> <fs-alert has-bottom-gutter="appearanceConfig.isTwoColumn" type="warn"> <p translate-params-trial-start-date="context.trial.start | date:'MMMM d, yyyy'" translate-params-trial-end-date="context.trial.end | date:'MMMM d, yyyy'" translate-params-trial-email-reminder-day="context.trial.reminder" translate> Your free trial begins on <strong>{{ trialStartDate }}</strong> and will end on <strong>{{ trialEndDate }}</strong>. You can cancel anytime before <strong>{{ trialEndDate }}</strong> to avoid being charged and we’ll send an email reminder {{ trialEmailReminderDay }} days before the trial ends. </p> </fs-alert> </div>   <fs-promotion promotion-data="context.promotionData"></fs-promotion>   <div ng-if=" ! isCompletedState() && (appearanceConfig.isShowingReviews || (hasRefundPolicy() && appearanceConfig.hasRefundBadgeBelowBreakdown))" class="fs-social-proofing fs-social-proofing--two-column row row--has-horizontal-padding row--has-bottom-padding" ng-class="{'fs-social-proofing--two-column--dynamic-refund-badge': appearanceConfig.isRefundBadgeDynamic}"> <div ng-if="hasRefundPolicy() && appearanceConfig.hasRefundBadgeBelowBreakdown" class="col s4 fs-social-proofing__refund-badge"> <fs-money-back-guarantee refund-policy="context.plugin.refund_policy" money-back-period="context.plugin.money_back_period"></fs-money-back-guarantee> </div> <div class="col s4" ng-if="appearanceConfig.isShowingReviews"> <fs-reviews reviews="appearanceConfig.reviews"></fs-reviews> </div> </div>  </div>  <div class="fs-checkout-form__form"> <fs-cancel-button ng-if="appearanceConfig.shouldShowCancelButton" appearance-config="appearanceConfig"></fs-cancel-button>   <div class="user-and-billing-form animate" ng-show=" ! context.isReady4Review">  <h2 ng-if="! entity.hasUserContext() && ! entity.hasLicenseContext()" class="fsds-sr-only" translate>Enter your account details</h2> <form id="account_details" ng-if="! entity.hasUserContext() && ! entity.hasLicenseContext()" name="userForm" ng-submit="reviewOrder()" required> <div class="row row--no-vertical-gutter" ng-init="connectUserForm(userForm)"> <div id="user_{{ f.name }}_container" ng-repeat="f in accountDetailsFields" class="col s{{ 2*f.columns }} l{{ f.columns }}"> <fs-input-container is-required="f.required" is-showing-error="userForm[f.name].$dirty" control-id="user_{{ f.name }}"> <fs-input-control-label>{{ f.label() }}</fs-input-control-label> <fs-input-control> <input id="user_{{ f.name }}" type="{{ 'email' == f.name ? 'email' : 'text' }}" name="{{ f.name }}" autocomplete="{{ f.autocomplete }}" autocorrect="no" ng-model="context[f.name]" placeholder="{{ f.placeholder }}" ng-blur="userForm[f.name].$setDirty()" ng-model-options="{ updateOn: 'blur' }" ng-pattern="f.pattern" aria-required="true" fs-focus-me="f.name == context.focusField" fs-focus-me-desktop-only="true" ng-disabled="context.isProcessingUpgrade" ng-required="f.required && ! isReadonlyUserField(f.name)" ng-readonly="isReadonlyUserField(f.name)" /> </fs-input-control> <fs-input-control-error ng-messages="userForm[f.name].$error"> <span ng-message="required" translate-context="Form error" translate>Required</span> <span ng-message="pattern" translate-context="Form error" translate-params-label="f.label() | lowercase" translate>Invalid {{ label }}</span> </fs-input-control-error> </fs-input-container> </div> </div> <div id="user_email_confirmation_container" class="animate" ng-show="context.email && context.firstName"> <div class="row row--no-vertical-gutter"> <div class="col s2"> <fs-input-container control-id="user_email_confirmation" is-required="true" is-showing-error="userForm.email_confirmation.$dirty && areEmailsInvalid()" is-valid="userForm.email_confirmation.$dirty && ! areEmailsInvalid()"> <fs-input-control-label> <span translate-context="Form field" translate>Confirm email address</span> </fs-input-control-label> <fs-input-control> <input id="user_email_confirmation" type="text" name="email_confirmation" autocomplete="no" autocorrect="no" ng-model="context.email_confirmation" ng-blur="userForm.email_confirmation.$dirty = true" ng-model-options="{ updateOn: 'default blur', debounce: {default: 700, blur: 1, cut: 1, paste: 1, mouseup: 1} }" aria-required="true" fs-focus-me="'email_confirmation' == context.focusField" fs-focus-me-desktop-only="true" ng-disabled="context.isProcessingUpgrade" required /> </fs-input-control> <fs-input-control-error> {{ emailsNotMatchingError() }} </fs-input-control-error> </fs-input-container> </div> <div class="col s2"> <fs-input-container control-id="user_phone" is-showing-error="userForm.phone.$dirty"> <fs-input-control-label> <span ng-if="ui.isMobile" translate-context="Form field" translate>Phone number</span> <span ng-if=" ! ui.isMobile" translate-context="Form field" translate>Phone number <span class="fsds-muted-text">(optional)</span></span> </fs-input-control-label> <fs-input-control> <input id="user_phone" type="tel" name="phone" autocomplete="no" ng-model="context.phone" fs-restrict="[^0-9\+\-\s\.]" ng-blur="userForm.phone.$dirty = true" ng-model-options="{ updateOn: 'default blur', debounce: {default: 700, blur: 1, cut: 1, paste: 1, mouseup: 1} }" fs-focus-me="shouldFocusPhone()" fs-focus-me-desktop-only="true" placeholder="+{{ context.countriesPhoneCodes[context.billing.address_country] }} 888 888 8888" ng-disabled="context.isProcessingUpgrade" /> </fs-input-control> <fs-input-control-error ng-messages="userForm.phone.$error"> <span ng-message="invalid" translate-context="Form error" translate>Please enter a valid phone number</span> </fs-input-control-error> </fs-input-container> </div> </div> </div> <div ng-if="showCartNotice()" class="email-cart-notice"> <span translate>Your email and cart are saved so we can send you email reminders about this order.</span> <span ng-if="isGdprOptinRequired()"> <span ng-if=" ! context.isProcessingCartAction"> <a ng-click="allowOrDisallowCart()" href="#"> <span ng-if="context.isCartAllowed" translate-context="Verb" translate>No thanks</span> <span ng-if=" ! context.isCartAllowed" translate-context="Verb" translate>Yes - please</span> </a>. </span> <span ng-if="context.isProcessingCartAction" translate-context="Verb" translate>Processing...</span> </span> </div>  <div class="fs-social-proofing fs-social-proofing--single-column" ng-if="hasRefundPolicy() && appearanceConfig.isShowingRefundBadge"> <fs-money-back-guarantee refund-policy="context.plugin.refund_policy" money-back-period="context.plugin.money_back_period"></fs-money-back-guarantee> </div>  </form>   <div id="billing_details" class="step billing-details" ng-if=" ! isFreePlanOrFreeTrialMode() && ! hasFullCouponDiscount()"> <header class="billing-details__header"> <h2 class="billing-details__title" translate>Billing information</h2> <div id="trial_payment_method_tip" class="billing-details__trial-tooltip" ng-if="isTrialMode()"> <fs-tooltip tooltip-width="350"> <fs-tooltip-trigger> <a href="javascript: void;" translate>Why do we need this for a free trial?</a> </fs-tooltip-trigger> <fs-tooltip-content> <p><strong translate>Don't worry, we won't charge you now...</strong></p> <p translate-params-trial-end-date="context.trial.end | date:'MMMM d, yyyy'" translate-params-trial-reminder-day="context.trial.reminder" translate> We ask for your payment information to reduce fraud and provide a seamless subscription experience. Your account will renew automatically on <em>{{ trialEndDate }}</em>. You can cancel anytime before then to avoid being charged, and we’ll send you an email reminder <em>{{ trialReminderDay }} days before</em> your free trial ends. You won't be charged now. </p> </fs-tooltip-content> </fs-tooltip> </div> </header> <fs-payment-method-chooser is-paypal-supported="isPayPalSupported()" ng-model="context.selectedMethod" change-payment-method="changePaymentMethod"></fs-payment-method-chooser> <div id="billing" class="fsds-container-padding fs-billing" ng-show=" ! context.inPaypalCheckout"> <form name="billingForm" required ng-submit="context.isBillingFormValid && submitBillingForm($event)"> <div class="row fs-billing__gutter-below fs-billing__show-hide animate" ng-show="isTrialMode() && isLifetime() && ! isCreditCard()"> <div class="col"> <fs-alert type="warn" id="paypal_lifetime_trial_notice"> <p translate> PayPal requires setting up automatic payments in order to start a trial, but you'll only get charged one time if you continue using the product after the trial ends. </p> </fs-alert> </div> </div> <div id="prefill_billing_details" class="row" ng-if="context.isSandbox"> <div class="col"> <a id="prefill_billing_details" ng-click="prefillCheckoutForm()" style="font-weight: bold">🐞 Prefill Form (Only visible in Sandbox mode)</a> </div> </div> <div class="fs-billing__credit-card fs-billing__show-hide animate" ng-show="isCreditCard()"> <div class="row row--no-vertical-gutter"> <div id="fs_credit_card_container" class="col s4 l2"> <fs-input-container is-required="true" control-id="billing_cc" is-showing-error="billingForm.number.$dirty"> <fs-input-control-label> <span translate-context="Form field" translate>Credit or debit card number</span> </fs-input-control-label> <fs-input-control> <input id="billing_cc" type="tel" name="number" ng-model="context.billing.number" ng-blur="billingForm.number.$setDirty()" ng-required="isCreditCard()" fs-cc-number="isCreditCard()" restrict-numeric card-number-formatter card-type="context.billing.cardType" inputmode="numeric" autocomplete="cc-number" autocorrect="off" autocapitalize="none" spellcheck="false" maxlength="19" fs-focus-me="'cc' == context.focusField" placeholder="• • • • • • • • • • • • • • • •"/> </fs-input-control> <fs-input-control-icon> <fs-card-icon type="{{ context.billing.cardType }}"></fs-card-icon> </fs-input-control-icon> <fs-input-control-error ng-messages="billingForm.number.$error"> <span ng-message="required" translate-context="Form error" translate>Credit card required</span> <span ng-message="minlength" translate-context="Form error" translate>Credit card must be 15-19 digits</span> <span ng-message="pattern" translate-context="Form error" translate>Credit card must consist of only numbers</span> <span ng-message="invalid" translate-context="Form error" translate>Please enter a valid card number</span> </fs-input-control-error> </fs-input-container> </div> <div class="col s4 l2"> <div class="row"> <div id="billing_expiry_container" class="col s2"> <fs-input-container control-id="billing_expiry" is-required="true" is-showing-error="billingForm.exp.$dirty"> <fs-input-control-label> <span translate-context="Form field" translate>Expiry</span> </fs-input-control-label> <fs-input-control> <input id="billing_expiry" type="tel" name="exp" ng-model="context.billing.exp" ng-blur="billingForm.exp.$setDirty()" aria-required="true" ng-required="isCreditCard()" fs-cc-expiry="isCreditCard()" inputmode="numeric" autocomplete="cc-exp" autocorrect="off" autocapitalize="none" spellcheck="false" maxlength="9" placeholder="{{ 'MM / YY' | translate}}" fs-focus-me="shouldFocusExpiry()"/> </fs-input-control> <fs-input-control-error ng-messages="billingForm.exp.$error"> <span ng-message="required" translate-context="Form error" translate>Required</span> <span ng-message="invalid" translate-context="Form error" translate>Please enter a valid expiry date</span> </fs-input-control-error> </fs-input-container> </div> <div id="billing_code_container" class="col s2"> <fs-input-container control-id="billing_code" is-showing-error="billingForm.cvc.$dirty" is-required="true"> <fs-input-control-label> <span translate-context="Form field" translate>Security code</span> </fs-input-control-label> <fs-input-control> <input id="billing_code" type="tel" name="cvc" ng-model="context.billing.cvc" placeholder="123" ng-blur="billingForm.cvc.$setDirty()" aria-required="true" fs-restrict="[^0-9]" ng-required="isCreditCard()" fs-cc-code="isCreditCard()" card-cvc-formatter ng-maxlength="4" inputmode="numeric" autocomplete="cc-csc" autocorrect="off" autocapitalize="none" spellcheck="false" fs-focus-me="shouldFocusCvv()"/> </fs-input-control> <fs-input-control-icon> <fs-tooltip tooltip-width="350"> <fs-tooltip-trigger> <fs-icon icon="cvc" aria-label="CVC Code"></fs-icon> </fs-tooltip-trigger> <fs-tooltip-content> <div class="cc-cvc-tooltip row"> <div ng-show="!isAmericanExpress() || isUnknownCC()" class="col"> <img src="/assets/img/security-code-visa.svg" class="fs-tooltip__image-left" height="150" width="240" alt="image showing 3-digit card security code on back of card" /> <h4 ng-if="ccTypeTitle()">{{ ccTypeTitle() }}</h4> <h4 ng-if=" ! ccTypeTitle()" translate-context="Credit card provider" translate>Visa/MasterCard</h4> <p translate>The security code is a 3-digit number on the back of your credit card</p> </div> <div ng-show="isAmericanExpress() || isUnknownCC()" class="col"> <img src="/assets/img/security-code-amex.svg" class="fs-tooltip__image-left" height="150" width="240" alt="image showing 4-digit card security code on back of card" /> <h4 translate>American Express</h4> <p translate>The security code is a 4-digit number on the front of your credit card</p> </div> </div> </fs-tooltip-content> </fs-tooltip> </fs-input-control-icon> <fs-input-control-error ng-messages="billingForm.cvc.$error"> <span ng-message="required" translate-context="Form error" translate>Required</span> <span ng-message="invalid" translate-context="Form error" translate>Invalid security code</span> </fs-input-control-error> </fs-input-container> </div> </div> </div> </div> </div> <div class="row"> <div class="col {{ tax.isSupportingTaxID ? 's4 l2' : 's2' }}"> <fs-input-container control-id="billing_country" is-showing-error="isShowingBillingFormTaxDisclaimerOutsideZip()" is-required="true"> <fs-input-control-label> <span translate-context="Form field" translate>Country</span> </fs-input-control-label> <fs-input-control> <fs-select id="billing_country" ng-model="context.billing.address_country" name="country" fs-focus-me="'billing_country' === context.focusField" search-placeholder="{{ 'Search countries...' | translate }}" no-item-placeholder="{{ 'No countries found.' | translate }}" ng-change="updateBilling()"> <fs-select-option ng-repeat="(code, countryName) in context.countries" value="code"> {{ countryName }} </fs-select-option> </fs-select> </fs-input-control> <fs-input-control-error> <span class="fs-input-container__error-with-bottom-gutter" ng-class="{'fs-input-container__error-with-bottom-gutter--expand': !isShowingBillingFormZipError(billingForm.zip)}"> {{ tax.getTaxDisclaimer() }} </span> </fs-input-control-error> </fs-input-container> </div> <div class="col s2 {{ tax.isSupportingTaxID ? 'l1' : '' }}"> <fs-input-container control-id="billing_zip" is-showing-error="isShowingBillingFormZipError(billingForm.zip)" is-required="tax.isZipCodeRequired || getBillingCountry().supportsPostalOrZipCode()"> <fs-input-control-label> <span>{{ getBillingCountry().getZipCodeUILabel() }}</span> </fs-input-control-label> <fs-input-control> <input id="billing_zip" type="{{ getBillingCountry().hasNonNumericZipCode() ? 'text' : 'tel' }}" name="zip" ng-model="context.billing.address_zip" ng-focus="billingForm.zip.$fsHidePattern = true;" ng-blur="billingForm.zip.$setDirty(); billingForm.zip.$fsHidePattern = false;" aria-required="true" ng-pattern="getBillingCountry().zipCodePattern" ng-required="tax.isZipCodeRequired || getBillingCountry().supportsPostalOrZipCode()" maxlength="10" inputmode="{{ getBillingCountry().hasNonNumericZipCode() ? 'text' : 'numeric' }}" autocomplete="postal-code" autocorrect="no" autocapitalize="none" spellcheck="false" ng-change="updateBilling()" fs-focus-me="shouldFocusZipCode()"/> </fs-input-control> <fs-input-control-error> <span ng-if=" ! context.isPaymentMethodUpdate && tax.shouldShowTaxRow() && tax.getTaxRateAfterExemption() && tax.isZipCodeRequired" class="tax-disclaimer"> <span>{{ tax.getTaxDisclaimer() }} </span> </span> <span ng-messages="billingForm.zip.$error"> <span ng-message="required" translate-context="Form error" translate-params-zip-code-ui-label="getBillingCountry().getZipCodeUILabel()" translate>{{ zipCodeUiLabel }} is required</span> <span ng-message="pattern" ng-show=" ! billingForm.zip.$fsHidePattern" translate-context="Form error" translate-params-zip-code-ui-label="getBillingCountry().getZipCodeUILabel().toLowerCase()" translate>Invalid {{ zipCodeUiLabel }} format</span> <span ng-message="invalid_us_zipcode" translate-context="Form error" translate-params-zip-code-ui-label="getBillingCountry().getZipCodeUILabel().toLowerCase()" translate>Invalid {{ zipCodeUiLabel }}</span> </span> </fs-input-control-error> </fs-input-container> </div>  <div ng-if="tax.isSupportingTaxID" class="col s2 l1"> <fs-tax-id is-disabled-edit="context.isPaymentMethodUpdate || context.inPaypalCheckout" billing="context.billing" tax="tax" product-type="context.plugin.type" ></fs-tax-id> </div>   <fs-upsell ng-if="appearanceConfig.isShowingUpsells" class="col s14 {{ 0 === $index ? 'col--no-top-gutter' : '' }}" ng-repeat="upsell in upsells.getBeforeReviewUpsells(priceWithTax())" upsell="upsell" current-price="priceWithTax()"></fs-upsell>  </div> <div class="row" ng-show="context.upgradeCardError && isCreditCard()"> <div class="col"> <fs-alert type="error"> <p>{{ context.upgradeCardError }}</p> </fs-alert> </div> </div> <div class="fs-billing__show-hide animate" ng-show="isTrialMode()"> <div class="row fs-billing__gutter-above"> <fs-choice-container class="col" type="checkbox" is-dense="true" font-size="md"> <label id="trial_reminder"> <input type="checkbox" checked="checked" value="true" /> <span translate-params-trial-email-reminder-day="context.trial.reminder" translate> Send me an email reminder <em>{{ trialEmailReminderDay }} days before</em> the trial ends. </span> </label> </fs-choice-container> </div> </div> <fs-country-restricted-feedback ng-if="isCountryRestricted(context.billing.address_country)"></fs-country-restricted-feedback> <div class="fs-billing__show-hide animate fs-billing__paypal-instruction fs-billing__gutter-above" ng-show=" ! isCreditCard()"> <div class="row"> <div class="col"> <p class="fsds-text-size-md" translate> Click <b>Continue to PayPal</b> to log in and confirm your purchase. You'll be sent back to this page to finish up. </p> </div> </div> </div> <fs-cta-group> <fs-cta-left> <fs-cta ng-show="isCreditCard()" appearance="primary" is-icon-right="true" is-disabled="" on-click="validateBillingForm(billingForm, $event)" should-focus="context.prefilled" > <span translate-context="Verb" translate>Review Order</span> <fs-icon icon="arrow-right" aria-hidden="true"></fs-icon> </fs-cta> <fs-cta ng-show=" ! isCreditCard()" id="paypal_express_checkout_button" is-disabled="context.isProcessingUpgrade" is-icon-right="true" on-click="validateBillingForm(billingForm, $event)" should-focus="context.prefilled"> <fs-icon icon="{{ context.isProcessingUpgrade ? 'cog' : 'arrow-right' }}" is-spinning="context.isProcessingUpgrade" aria-hidden="true"></fs-icon> <span translate-context="Verb" translate>Continue to PayPal</span> </fs-cta> </fs-cta-left> </fs-cta-group> </form> </div> </div>  </div>   <div ng-if="isTrialModeFree()" id="trial_without_payment_method_notice"> <fs-alert type="info"> <p translate-params-trial-begin-date="context.trial.start | date:'MMMM d, yyyy'" translate-params-trial-end-date="context.trial.end | date:'MMMM d, yyyy'" translate> Your free trial begins on <strong>{{ trialBeginDate }}</strong> and ends on <strong>{{ trialEndDate }}</strong>. </p> </fs-alert> </div>   <div id="review_order" ng-show="isFreePlanOrFreeTrialMode() || context.isReady4Review || hasFullCouponDiscount()" class="step animate order-review" ng-class="{'is-free-upgrade': hasFullCouponDiscount()}"> <fs-payment-back ng-show="context.isReady4Review" payment-method="context.selectedMethod" card-type="context.billing.cardType" cc-suffix="ccSuffix()" on-edit="editCardDetails" is-disabled="ui.isBlockingSubmission || context.inPaypalCheckout || context.isProcessingUpgrade || context.upgradeComplete" user-email="context.email" ></fs-payment-back> <h2 ng-if=" ! isFreePlanOrFreeTrialMode() && ! hasFullCouponDiscount()" class="order-review__title" translate>Review your order</h2> <div class="row" ng-if="context.isPaymentMethodUpdate || ! isCreditCardDetailsUpdate()"> <div id="payment_terms" class="col order-review__list" ng-if=" ! isFreePlanOrFreeTrialMode() && ! hasFullCouponDiscount()"> <ul ng-if="isTrialMode()"> <li translate-params-trial-begin-date="context.trial.start | date:'MMMM d, yyyy'" translate-params-trial-end-date="context.trial.end | date:'MMMM d, yyyy'" translate> Your free trial begins on <em>{{ trialBeginDate }}</em> and ends on <em>{{ trialEndDate }}</em>. </li> <li> <span ng-if="isCreditCard()"> <span ng-if="tax.hasTaxAfterExemption()" translate-params-trial-end-date="context.trial.end | date:'MMMM d, yyyy'" translate-params-first-payment-amount="firstPaymentAmount() | currency:context.currencySymbol:2" translate-params-first-payment-currency="context.currency | uppercase" translate-params-first-payment-tax="calcFirstPaymentTaxAfterExemption() | currency:context.currencySymbol:2" translate> On <em>{{ trialEndDate }}</em>, your card ending in <em>{{ ccSuffix() }}</em> will be charged <em>{{ firstPaymentAmount }} {{ firstPaymentCurrency }}</em> (plus {{ firstPaymentTax }} tax). </span> <span ng-if=" ! tax.hasTaxAfterExemption()" translate-params-trial-end-date="context.trial.end | date:'MMMM d, yyyy'" translate-params-first-payment-amount="firstPaymentAmount() | currency:context.currencySymbol:2" translate-params-first-payment-currency="context.currency | uppercase" translate> On <em>{{ trialEndDate }}</em>, your card ending in <em>{{ ccSuffix() }}</em> will be charged <em>{{ firstPaymentAmount }} {{ firstPaymentCurrency }}</em>. </span> </span> <span ng-if=" ! isCreditCard()"> <span ng-if="tax.hasTaxAfterExemption()" translate-params-trial-end-date="context.trial.end | date:'MMMM d, yyyy'" translate-params-first-payment-amount="firstPaymentAmount() | currency:context.currencySymbol:2" translate-params-first-payment-currency="context.currency | uppercase" translate-params-first-payment-tax="calcFirstPaymentTaxAfterExemption() | currency:context.currencySymbol:2" translate> On <em>{{ trialEndDate }}</em>, your PayPal account will be charged <em>{{ firstPaymentAmount }} {{ firstPaymentCurrency }}</em> (plus {{ firstPaymentTax }} tax). </span> <span ng-if=" ! tax.hasTaxAfterExemption()" translate-params-trial-end-date="context.trial.end | date:'MMMM d, yyyy'" translate-params-first-payment-amount="firstPaymentAmount() | currency:context.currencySymbol:2" translate-params-first-payment-currency="context.currency | uppercase" translate> On <em>{{ trialEndDate }}</em>, your PayPal account will be charged <em>{{ firstPaymentAmount }} {{ firstPaymentCurrency }}</em>. </span> </span> </li> <li ng-if=" ! isLifetime()"> <span ng-if="tax.hasTaxAfterExemption()" translate-params-renewal-payment-amount="renewalPaymentAmount() | currency:context.currencySymbol:2" translate> After the trial, your {{ planCycleAdjective() }} renewal payments will be <em>{{ renewalPaymentAmount }} {{ context.currency | uppercase }}</em> (plus {{ calcRenewalPaymentTaxWithExemption() | currency:context.currencySymbol:2 }} tax). </span> <span ng-if=" ! tax.hasTaxAfterExemption()" translate-params-renewal-payment-amount="renewalPaymentAmount() | currency:context.currencySymbol:2" translate> After the trial, your {{ planCycleAdjective() }} renewal payments will be <em>{{ renewalPaymentAmount }} {{ context.currency | uppercase }}</em>. </span> </li> <li translate-params-plan-cycle-adjective="!isLifetime() ? planCycleAdjective() : ''" translate> To avoid {{ planCycleAdjective }} charges, cancel before the renewal date. </li> <li translate-params-trial-email-reminder-day="context.trial.reminder" translate> We’ll send an email reminder <em>{{ trialEmailReminderDay }} days before</em> the trial ends. </li> </ul> <ul ng-if="!isTrialMode()"> <li ng-show="!isLifetime()"> <span ng-if="hasFullCouponDiscount()"> <span ng-if="context.isPaymentMethodUpdate" translate-params-plan-renewal-date="cycleEndDate() | date:'MMMM d, yyyy'" translate> Your plan renews automatically on <em>{{ planRenewalDate }}</em>. </span> <span ng-if=" ! context.isPaymentMethodUpdate" translate-params-plan-begin-date="context.now | date:'MMMM d, yyyy'" translate-params-plan-renewal-date="cycleEndDate() | date:'MMMM d, yyyy'" translate> Your plan begins on <em>{{ planBeginDate }}</em> and renews automatically on <em>{{ planRenewalDate }}</em>. </span> </span> <span ng-if=" ! hasFullCouponDiscount()"> <span ng-if="context.isPaymentMethodUpdate" translate-params-plan-renewal-date="cycleEndDate() | date:'MMMM d, yyyy'" translate> Your paid plan renews automatically on <em>{{ planRenewalDate }}</em>. </span> <span ng-if=" ! context.isPaymentMethodUpdate" translate-params-plan-begin-date="context.now | date:'MMMM d, yyyy'" translate-params-plan-renewal-date="cycleEndDate() | date:'MMMM d, yyyy'" translate> Your paid plan begins on <em>{{ planBeginDate }}</em> and renews automatically on <em>{{ planRenewalDate }}</em>. </span> </span> </li> <li ng-if=" ! context.isPaymentMethodUpdate"> <span ng-if="isCreditCard()"> <span ng-if="tax.hasTaxAfterExemption()" translate-params-first-payment-amount="firstPaymentAmount() | currency:context.currencySymbol:2" translate-params-first-payment-currency="context.currency | uppercase" translate-params-first-payment-tax="calcFirstPaymentTaxAfterExemption() | currency:context.currencySymbol:2" translate> Your card ending in <em>{{ ccSuffix() }}</em> will be charged <em>{{ firstPaymentAmount }} {{ firstPaymentCurrency }}</em> (plus {{ firstPaymentTax }} tax). </span> <span ng-if=" ! tax.hasTaxAfterExemption()" translate-params-first-payment-amount="firstPaymentAmount() | currency:context.currencySymbol:2" translate-params-first-payment-currency="context.currency | uppercase" translate> Your card ending in <em>{{ ccSuffix() }}</em> will be charged <em>{{ firstPaymentAmount }} {{ firstPaymentCurrency }}</em>. </span> </span> <span ng-if=" ! isCreditCard()"> <span ng-if="tax.hasTaxAfterExemption()" translate-params-first-payment-amount="firstPaymentAmount() | currency:context.currencySymbol:2" translate-params-first-payment-currency="context.currency | uppercase" translate-params-first-payment-tax="calcFirstPaymentTaxAfterExemption() | currency:context.currencySymbol:2" translate> Your PayPal account will be charged <em>{{ firstPaymentAmount }} {{ firstPaymentCurrency }}</em> (plus {{ firstPaymentTax }} tax). </span> <span ng-if=" ! tax.hasTaxAfterExemption()" translate-params-first-payment-amount="firstPaymentAmount() | currency:context.currencySymbol:2" translate-params-first-payment-currency="context.currency | uppercase" translate> Your PayPal account will be charged <em>{{ firstPaymentAmount }} {{ firstPaymentCurrency }}</em>. </span> </span> </li> <li ng-if="!isLifetime()"> <span ng-if="tax.hasTaxAfterExemption()" translate-params-renewal-amount="renewalPaymentAmount() | currency:context.currencySymbol:2" translate> Your {{ planCycleAdjective() }} renewal payments will be <em>{{ renewalAmount }} {{ context.currency | uppercase }}</em> (plus {{ calcRenewalPaymentTaxWithExemption() | currency:context.currencySymbol:2 }} tax). </span> <span ng-if=" ! tax.hasTaxAfterExemption()" translate-params-renewal-amount="renewalPaymentAmount() | currency:context.currencySymbol:2" translate> Your {{ planCycleAdjective() }} renewal payments will be <em>{{ renewalAmount }} {{ context.currency | uppercase }}</em>. </span> </li> <li ng-if-start="!isLifetime()"> <span ng-if="'annual' == context.billingCycle" translate> To avoid charges for the next year, cancel before the renewal date. </span> <span ng-if="'annual' != context.billingCycle" translate> To avoid charges for the next month, cancel before the renewal date. </span> </li> <li ng-if-end ng-show="'annual' == context.billingCycle" translate> We'll send an email reminder 30 days before your subscription renews. </li> </ul> </div> </div>  <fs-eu-waiver-control ng-if="isCoolingOffWaiverRequired()" ng-model="context.euWaiveRight" should-focus="ui.focusEUWaiveRight" has-refund-policy="hasRefundPolicy()" eula-url="eulaUrl" money-back-period="context.plugin.money_back_period" module-label="moduleLabel()" has-error=" ! isFreePlanOrFreeTrialMode() && !hasFullCouponDiscount() && isEUCountry() && ui.showEUError" purchase-button-text="getPurchaseButtonText()" ></fs-eu-waiver-control>   <fs-marketing-optin-control ng-if="isGdprOptinRequired()" ng-model="context.isMarketingAllowed" module-label="moduleLabel()" should-focus="ui.focusGdprOptin" show-gdpr-optin-error="ui.showGdprOptinError" has-gdpr-optin-selection-error="context.hasGdprOptinSelectionError" ></fs-marketing-optin-control>   <label id="auto_install" ng-if="ui.showAutoInstall && shouldActivateLicenseAfterPurchase()" class="checkbox-container"> <input type="checkbox" ng-model="context.autoInstallAfterUpgrade"> <strong><b>NEW</b> ⚡  Automatically install the {{ context.bundleProduct ? context.bundleProduct.type : moduleLabel() }} after the {{ context.hasFreePlan ? 'upgrade' : (isLifetime() ? 'purchase' : 'checkout') }}.</strong> </label>  <div class="row" ng-show="context.upgradeError"> <div class="col"> <fs-alert type="error" has-top-gutter="true"> <p ng-if=" ! context.isUpgradeErrorHtml">{{ context.upgradeError }}</p> <div ng-if="context.isUpgradeErrorHtml" ng-bind-html="context.upgradeError | fsAllowUnsanitizedHtml"></div> </fs-alert> </div> </div>  <div ng-show="ui.showRecaptcha" id="recaptcha" class="g-recaptcha" data-sitekey="6LdrfQsTAAAAAImG9PKRAwAoD7CJpPXTDyi34rGU" hl="en" data-callback="afterRecaptchaComplete"></div>   <form name="twoFAForm" required ng-submit="subscribe($event)" ng-show="ui.showTwoFA" > <div id="two-fa" class="row"> <div class="col s4"> <fs-input-container is-required="true" is-showing-error="twoFAForm.two_fa.$dirty" control-id="two_fa"> <fs-input-control> <fs-two-fa control-id="two_fa" control-name="two_fa" ng-model="context.security.twoFA" ng-blur="twoFAForm.two_fa.$dirty = true" ng-disabled="context.isProcessingUpgrade" should-focus="'two_fa' === context.focusField" on-complete="subscribe()" ></fs-two-fa> </fs-input-control> <fs-input-control-error class="align-center" ng-messages="twoFAForm.two_fa.$error"> <span ng-message="required" translate-context="Form error" translate>2FA Security code is required.</span> <span ng-message="minlength, maxlength" translate-context="Form error" translate>Must be a 6-digit numeric code.</span> </fs-input-control-error> </fs-input-container> </div> </div> </form>  <fs-country-restricted-feedback ng-if="isCountryRestricted(context.billing.address_country)"></fs-country-restricted-feedback> <fs-cta-group class="fs-checkout-cta" no-top-gutter="context.isFreePlan"> <fs-cta-left> <fs-cta ng-if="ui.isShowingRetryButton" on-click="reloadClearingSession($event)"> <span translate>Pay with a different method</span> </fs-cta> <fs-cta ng-if=" ! ui.isShowingRetryButton" on-click="subscribe($event)" is-icon-right="true" is-disabled="context.isProcessingUpgrade || isCountryRestricted(context.billing.address_country) || ui.isBlockingSubmission"> <fs-icon icon="{{ context.isProcessingUpgrade ? 'cog' : 'none' }}" is-spinning="context.isProcessingUpgrade" aria-hidden="true"></fs-icon> {{ context.isProcessingUpgrade ? getProcessingText() : getPurchaseButtonText() }} </fs-cta> </fs-cta-left> <fs-cta-footer> <div id="legal_terms"> <fs-legal-terms is-credit-card-details-update="isCreditCardDetailsUpdate()" is-trial-mode-free="isTrialModeFree()" is-free-plan-or-free-trial-mode="isFreePlanOrFreeTrialMode()" eula-url="eulaUrl" sale-terms-url="saleTermsUrl" is-saas="isSaas()" is-downloadable-software="false"></fs-legal-terms> </div> </fs-cta-footer> </fs-cta-group> <fs-fulfillment-badge-disclaimer is-credit-card-details-update="isCreditCardDetailsUpdate()" is-trial-mode-free="isTrialModeFree()" module-label="moduleLabel()" fulfillment-link="getFreemiusCheckoutFulfillmentLink()" is-standalone="true" ></fs-fulfillment-badge-disclaimer> </div>   <fs-promotion promotion-data="context.promotionData"></fs-promotion>   <div ng-if=" ! isCompletedState() && ((hasRefundPolicy() && appearanceConfig.isShowingRefundBadge) || appearanceConfig.isShowingReviews)" class="fs-social-proofing fs-social-proofing--mixed-column row row--has-horizontal-padding row--has-bottom-padding" ng-class="{ 'fs-social-proofing--mixed-column--dynamic-refund-badge': appearanceConfig.isRefundBadgeDynamic }"> <div class="col s4 fs-social-proofing__content fs-social-proofing__content--two-column fs-social-proofing__refund-badge" ng-if="hasRefundPolicy() && appearanceConfig.isShowingRefundBadge && appearanceConfig.hasRefundBadgeBelowForm"> <fs-money-back-guarantee refund-policy="context.plugin.refund_policy" money-back-period="context.plugin.money_back_period"></fs-money-back-guarantee> </div> <div class="col s4 fs-social-proofing__content fs-social-proofing__content--single-column" ng-if="appearanceConfig.isShowingReviews"> <fs-reviews reviews="appearanceConfig.reviews"></fs-reviews> </div> </div>  </div>  </div>  <div id="upsell" ng-show="isUpsellState()" class="step animate">  <fs-alert type="success"> <fs-alert-icon> <fs-icon icon="fire" aria-label="Attention"></fs-icon> </fs-alert-icon> <h3 translate>You've Unlocked an Exclusive Offer</h3> <p translate> Have you ever calculated how much it would cost you if your website got hacked? Our friends at WPMatic are offering a <b>50% discount</b>, exclusive for {{ context.plugin.title }} customers, on all of their security and maintenance plans. </p> <p translate>Check out this special offer and save hundreds of dollars a year.</p> </fs-alert> <fs-cta-group is-showing-safety-badge="false"> <fs-cta-left> <a target="_blank" ng-href="https://wpmatic.io/amember/signup/?nfamm=true&ref=freemius&coupon=freemius50&name_f={{ context.firstName }}&name_l={{ context.lastName }}&email={{ context.email }}&_email={{ context.email }}"> <fs-cta on-click="getUpsell()"> <span translate>Sounds interesting!</span> </fs-cta> </a> </fs-cta-left> <fs-cta-right> <fs-cta appearance="secondary" on-click="skipUpsell()"> <span translate>No thanks</span> </fs-cta> </fs-cta-right> </fs-cta-group> </div>  <fs-post-upgrade-message-saas ng-if=" ! context.isPaymentMethodUpdate && isSaas() && context.customCheckoutConfirmationSaas" ng-show="isCompletedState()" settings="context.customCheckoutConfirmationSaas" on-resend-email="resendPostUpgradeEmail()" default-on-close="returnPostUpgradeData()" context="context" ></fs-post-upgrade-message-saas>  <div id="post_upgrade_message" ng-if="context.isPaymentMethodUpdate || ! isSaas() || ! context.customCheckoutConfirmationSaas" ng-show="( ! isDashboardPage() || context.showDashboardPageCompletedState) && isCompletedState()" class="step animate fs-post-upgrade-message"> <h3 class="fs-post-upgrade-message__title"> <img class="fs-post-upgrade-message__icon" src="{{ appearanceConfig.productIcon }}" alt="{{ plugin.type }} icon"/> <span ng-if="isLifetime()" class="fs-post-upgrade-message__title-text" translate>Purchase was successful</span> <span ng-if=" ! isLifetime()" class="fs-post-upgrade-message__title-text" translate>Subscription was successful</span> </h3> <p> <span ng-if="isTrialMode()" translate>Thanks for giving <strong>{{ context.plugin.title }}</strong> {{ context.plan.title }} plan a spin!</span> <span ng-if="!isTrialMode() && entity.hasLicenseContext()"> <span ng-if="context.isPaymentMethodUpdate" translate>The payment method of your <strong>{{ context.plugin.title }}</strong> license was updated!</span> <span ng-if=" ! context.isPaymentMethodUpdate" translate>Thanks for renewing your <strong>{{ context.plugin.title }}</strong> license!</span> </span> <span ng-if="!isTrialMode() && !entity.hasLicenseContext()"> <span ng-if="context.hasFreePlan"> <span ng-if="context.isFreePlan" translate-context="Free subscription" translate> Thanks for subscribing for <strong>{{ context.plugin.title }}</strong>! </span> <span ng-if=" ! context.isFreePlan" translate> Thanks for upgrading <strong>{{ context.plugin.title }}</strong>! </span> </span> <span ng-if=" ! context.hasFreePlan"> <span ng-if="isLifetime()" translate> Thanks for purchasing <strong>{{ context.plugin.title }}</strong>! </span> <span ng-if=" ! isLifetime()" translate-context="Paid subscription" translate> Thanks for subscribing to <strong>{{ context.plugin.title }}</strong>! </span> </span> </span> <span ng-bind-html="postUpgradeSentEmailMessage() | fsAllowUnsanitizedHtml"></span> </p> <fs-alert has-top-gutter="true" type="error" ng-if="context.failedZipcodePurchasesCount > 0"> <p translate-n="context.failedZipcodePurchasesCount" translate-plural="Notice: Some of your checkout attempts failed due to an incorrect ZIP Code. These charges may temporarily appear as pending on your credit card statement before being removed." translate> Notice: One of your checkout attempts failed due to an incorrect ZIP Code. This charge may temporarily appear as pending on your credit card statement before being removed. </p> </fs-alert> <fs-cta-group ng-if=" ! isFreePlanOrFreeTrialMode() || context.hasFreeReleases" is-showing-safety-badge="false"> <fs-cta-left> <fs-cta on-click="returnPostUpgradeData()"> <span translate>Got it</span> </fs-cta> </fs-cta-left> <fs-cta-right> <fs-cta on-click="resendPostUpgradeEmail()" is-icon-right="true" appearance="secondary" is-disabled="context.isResendingEmail"> <span ng-if="context.isResendingEmail" translate>Sending...</span> <span ng-if=" ! context.isResendingEmail" translate>Didn't Get It - Resend email</span> <fs-icon icon="{{ context.isResendingEmail ? 'cog' : 'none' }}" is-spinning="true"></fs-icon> </fs-cta> </fs-cta-right> <fs-cta-footer> <p id="resend_email" translate> Didn't get the email? Try checking your spam folder or search for emails from <strong>{{ context.fromEmailAddress }}</strong>. Can't find it? <a href="#" ng-click="resendPostUpgradeEmail()">Click here</a> to resend it. </p> </fs-cta-footer> </fs-cta-group> </div>  </section></div>  <fs-fulfillment-badge css-top="ui.fulfillmentTop" is-position-controlled="isDashboardPage() && ! isIndependentPage()" is-credit-card-details-update="isCreditCardDetailsUpdate()" is-trial-mode-free="isTrialModeFree()" module-label="moduleLabel()" fulfillment-link="getFreemiusCheckoutFulfillmentLink()" has-custom-slot="isShowingSlotInFulfillment()" >  <fs-language-selector i18n="i18n" ng-if="i18n.shouldShowUI" current-country-code="context.geolocationCountryCode"></fs-language-selector>   <fs-select ng-if=" ! entity.hasLicenseContext() && hasMultipleVisibleCurrencies()" id="currencies" is-small="true" is-dark="true" aria-label="Currency Selection" ng-model="context.currency" ng-disabled="! canChangeCurrency()"> <fs-select-option ng-repeat="(currency,currencySymbol) in context.currencies" badge="currencySymbol" value="currency"> {{ currency | uppercase }} </fs-select-option> </fs-select>   <div ng-if="context.isSandbox" id="sandbox_notice" class="fs-fake-select fs-control-small fs-control-darker"> <a href="https://freemius.com/help/documentation/selling-with-freemius/freemius-checkout-buy-button/" target="_blank"><span>API</span></a> <span class="fs-fake-select__text-divider">–</span> <a href="https://freemius.com/help/documentation/wordpress-sdk/testing/#sandbox_payments" target="_blank"><span>Testing</span></a> </div>  </fs-fulfillment-badge>  </div>  </div> </div> </div> </section> </body> </html>

CINXE.COM

Invoize Checkout | Freemius